WIP

Author: saddlepaddle

apps/web/client/src/app/_components/hero/create.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useAuthContext } from '@/app/auth/auth-context';
-import { DraftImagePill } from '@/app/project/[id]/_components/right-panel/chat-tab/context-pills/draft-image-pill';
+import { ImagePill } from '@/app/project/[id]/_components/right-panel/chat-tab/context-pills/image-pill';
 import { validateImageLimit } from '@/app/project/[id]/_components/right-panel/chat-tab/context-pills/helpers';
 import { useCreateManager } from '@/components/store/create';
 import { Routes } from '@/utils/constants';
@@ -198,6 +198,7 @@ export const Create = observer(({
 
             return {
                 type: MessageContextType.IMAGE,
+                source: 'external',
                 content: base64,
                 displayName: file.name,
                 mimeType: file.type,
@@ -287,7 +288,7 @@ export const Create = observer(({
                         >
                             <AnimatePresence mode="popLayout">
                                 {selectedImages.map((imageContext) => (
-                                    <DraftImagePill
+                                    <ImagePill
                                         key={imageContext.content}
                                         context={imageContext}
                                         onRemove={() => handleRemoveImage(imageContext)}

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/index.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { useEditorEngine } from '@/components/store/editor';
-import { MessageContextType, type LocalImageMessageContext } from '@onlook/models/chat';
+import { observer } from 'mobx-react-lite';
+
+import type { ImageMessageContext } from '@onlook/models/chat';
+import { MessageContextType } from '@onlook/models/chat';
 import { Icons } from '@onlook/ui/icons';
 import { toast } from '@onlook/ui/sonner';
 import { convertToBase64DataUrl, getMimeType } from '@onlook/utility';
-import { observer } from 'mobx-react-lite';
+
+import { useEditorEngine } from '@/components/store/editor';
 import { BreadcrumbNavigation } from './breadcrumb-navigation';
 import { FolderList } from './folder-list';
 import { useImageOperations } from './hooks/use-image-operations';
@@ -30,7 +33,9 @@ export const ImagesTab = observer(() => {
     } = useNavigation();
 
     // Get the CodeEditorApi for the active branch
-    const branchData = editorEngine.branches.getBranchDataById(editorEngine.branches.activeBranch.id);
+    const branchData = editorEngine.branches.getBranchDataById(
+        editorEngine.branches.activeBranch.id,
+    );
 
     // Image operations and data
     const {
@@ -54,7 +59,9 @@ export const ImagesTab = observer(() => {
             toast.success('Image renamed successfully');
         } catch (error) {
             console.error('Failed to rename image:', error);
-            toast.error(`Failed to rename image: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            toast.error(
+                `Failed to rename image: ${error instanceof Error ? error.message : 'Unknown error'}`,
+            );
             throw error;
         }
     };
@@ -65,7 +72,9 @@ export const ImagesTab = observer(() => {
             toast.success('Image deleted successfully');
         } catch (error) {
             console.error('Failed to delete image:', error);
-            toast.error(`Failed to delete image: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            toast.error(
+                `Failed to delete image: ${error instanceof Error ? error.message : 'Unknown error'}`,
+            );
             throw error;
         }
     };
@@ -81,20 +90,19 @@ export const ImagesTab = observer(() => {
                 throw new Error('Failed to load image file');
             }
 
-            // Convert to base64 data URL
             const base64Content = convertToBase64DataUrl(fileContent, mimeType);
 
-            // Create LOCAL_IMAGE context with actual image data
-            const localImageContext: LocalImageMessageContext = {
-                type: MessageContextType.LOCAL_IMAGE,
+            const imageContext: ImageMessageContext = {
+                type: MessageContextType.IMAGE,
+                source: 'local',
                 path: imagePath,
                 branchId: branchId,
                 content: base64Content,
                 displayName: fileName,
                 mimeType: mimeType,
             };
 
-            editorEngine.chat.context.addContexts([localImageContext]);
+            editorEngine.chat.context.addContexts([imageContext]);
             toast.success('Image added to chat');
         } catch (error) {
             console.error('Failed to add image to chat:', error);
@@ -104,23 +112,23 @@ export const ImagesTab = observer(() => {
 
     if (loading) {
         return (
-            <div className="w-full h-full flex items-center justify-center gap-2">
-                <Icons.LoadingSpinner className="w-4 h-4 animate-spin" />
+            <div className="flex h-full w-full items-center justify-center gap-2">
+                <Icons.LoadingSpinner className="h-4 w-4 animate-spin" />
                 Loading images...
             </div>
         );
     }
 
     if (error) {
         return (
-            <div className="w-full h-full flex items-center justify-center text-sm text-red-500">
+            <div className="flex h-full w-full items-center justify-center text-sm text-red-500">
                 Error: {error.message}
             </div>
         );
     }
 
     return (
-        <div className="w-full h-full flex flex-col gap-3 p-3">
+        <div className="flex h-full w-full flex-col gap-3 p-3">
             <SearchUploadBar
                 search={search}
                 setSearch={setSearch}
@@ -133,10 +141,7 @@ export const ImagesTab = observer(() => {
                 onNavigate={navigateToFolder}
             />
 
-            <FolderList
-                folders={folders}
-                onFolderClick={handleFolderClick}
-            />
+            <FolderList folders={folders} onFolderClick={handleFolderClick} />
 
             <ImageGrid
                 images={images}
@@ -150,4 +155,4 @@ export const ImagesTab = observer(() => {
             />
         </div>
     );
-});
+});