From e78a5b0a050818454344020b1682c07c1051f932 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Mon, 18 Nov 2024 19:55:28 -0500
Subject: [PATCH 01/29] image-upload

---
 app/components/chat/BaseChat.tsx          | 121 ++++++++++++++++------
 app/components/chat/Chat.client.tsx       |  42 +++++++-
 app/components/chat/FilePreview.tsx       |  40 +++++++
 app/components/chat/SendButton.client.tsx |   5 +-
 app/components/chat/UserMessage.tsx       |  27 ++++-
 app/components/sidebar/Menu.client.tsx    |   2 +-
 app/components/workbench/EditorPanel.tsx  |   9 +-
 app/components/workbench/FileTree.tsx     |   2 +-
 app/lib/.server/llm/stream-text.ts        |  41 ++++++--
 app/routes/api.chat.ts                    |  17 ++-
 10 files changed, 244 insertions(+), 62 deletions(-)
 create mode 100644 app/components/chat/FilePreview.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 629c5cb..e0cd928 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -17,6 +17,8 @@ import Cookies from 'js-cookie';
 import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/utils/types';
 
+import FilePreview from './FilePreview';
+
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
   { text: 'Build a simple blog using Astro' },
@@ -33,7 +35,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
       <select
         value={provider?.name}
         onChange={(e) => {
-          setProvider(providerList.find((p) => p.name === e.target.value));
+          setProvider(providerList.find(p => p.name === e.target.value));
           const firstModel = [...modelList].find((m) => m.provider == e.target.value);
           setModel(firstModel ? firstModel.name : '');
         }}
@@ -49,7 +51,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
         key={provider?.name}
         value={model}
         onChange={(e) => setModel(e.target.value)}
-        style={{ maxWidth: '70%' }}
+        style={{ maxWidth: "70%" }}
         className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
         {[...modelList]
@@ -85,32 +87,38 @@ interface BaseChatProps {
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
+  uploadedFiles?: File[];
+  setUploadedFiles?: (files: File[]) => void;
+  imageDataList?: string[];
+  setImageDataList?: (dataList: string[]) => void;
 }
-
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
-  (
-    {
-      textareaRef,
-      messageRef,
-      scrollRef,
-      showChat = true,
-      chatStarted = false,
-      isStreaming = false,
-      enhancingPrompt = false,
-      promptEnhanced = false,
-      messages,
-      input = '',
-      model,
-      setModel,
-      provider,
-      setProvider,
-      sendMessage,
-      handleInputChange,
-      enhancePrompt,
-      handleStop,
-    },
-    ref,
-  ) => {
+  ({
+    textareaRef,
+    messageRef,
+    scrollRef,
+    showChat,
+    chatStarted = false,
+    isStreaming = false,
+    model,
+    setModel,
+    provider,
+    setProvider,
+    input = '',
+    enhancingPrompt,
+    handleInputChange,
+    promptEnhanced,
+    enhancePrompt,
+    sendMessage,
+    handleStop,
+    uploadedFiles,
+    setUploadedFiles,
+    imageDataList,
+    setImageDataList,
+    messages,
+    children,  // Add this
+  }, ref) => {
+    console.log(provider);
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [modelList, setModelList] = useState(MODEL_LIST);
@@ -131,7 +139,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         Cookies.remove('apiKeys');
       }
 
-      initializeModelList().then((modelList) => {
+      initializeModelList().then(modelList => {
         setModelList(modelList);
       });
     }, []);
@@ -152,6 +160,32 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
+    const handleRemoveFile = () => {
+      setUploadedFiles([]);
+      setImageDataList([]);
+    };
+
+    const handleFileUpload = () => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const base64Image = e.target?.result as string;
+            setUploadedFiles?.([...uploadedFiles, file]);
+            setImageDataList?.([...imageDataList, base64Image]);
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+
+      input.click();
+    };
+
     return (
       <div
         ref={ref}
@@ -205,13 +239,22 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   setProvider={setProvider}
                   providerList={PROVIDER_LIST}
                 />
-                {provider && (
+                {provider &&
                   <APIKeyManager
                     provider={provider}
                     apiKey={apiKeys[provider.name] || ''}
                     setApiKey={(key) => updateApiKey(provider.name, key)}
-                  />
-                )}
+                  />}
+
+                <FilePreview
+                  files={uploadedFiles}
+                  imageDataList={imageDataList}
+                  onRemove={(index) => {
+                    setUploadedFiles?.(uploadedFiles.filter((_, i) => i !== index));
+                    setImageDataList?.(imageDataList.filter((_, i) => i !== index));
+                  }}
+                />
+
                 <div
                   className={classNames(
                     'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
@@ -245,21 +288,30 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   <ClientOnly>
                     {() => (
                       <SendButton
-                        show={input.length > 0 || isStreaming}
+                        show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
                         isStreaming={isStreaming}
                         onClick={(event) => {
                           if (isStreaming) {
                             handleStop?.();
                             return;
                           }
-
-                          sendMessage?.(event);
+                          if (input.length > 0 || uploadedFiles.length > 0) {
+                            sendMessage?.(event);
+                          }
                         }}
                       />
                     )}
                   </ClientOnly>
                   <div className="flex justify-between items-center text-sm p-4 pt-2">
                     <div className="flex gap-1 items-center">
+                      <IconButton
+                        title="Upload file"
+                        className="transition-all"
+                        onClick={() => handleFileUpload()}
+                      >
+                        <div className="i-ph:upload text-xl"></div>
+                      </IconButton>
+
                       <IconButton
                         title="Enhance prompt"
                         disabled={input.length === 0 || enhancingPrompt}
@@ -322,3 +374,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     );
   },
 );
+
+
+
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 31748b3..d62a5bd 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -73,8 +73,11 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
   useShortcuts();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);  // Move here
+  const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+
+
   const [model, setModel] = useState(() => {
     const savedModel = Cookies.get('selectedModel');
     return savedModel || DEFAULT_MODEL;
@@ -196,7 +199,19 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        * manually reset the input and we'd have to manually pass in file attachments. However, those
        * aren't relevant here.
        */
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
+      append({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}`
+          },
+          ...(imageDataList.map(imageData => ({
+            type: 'image',
+            image: imageData
+          })))
+        ]
+      });
 
       /**
        * After sending a new message we reset all modifications since the model
@@ -204,16 +219,30 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        */
       workbenchStore.resetAllFileModifications();
     } else {
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
+      append({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`
+          },
+          ...(imageDataList.map(imageData => ({
+            type: 'image',
+            image: imageData
+          })))
+        ]
+      });
     }
 
     setInput('');
+    // Add file cleanup here
+    setUploadedFiles([]);
+    setImageDataList([]);
 
     resetEnhancer();
 
     textareaRef.current?.blur();
   };
-
   const [messageRef, scrollRef] = useSnapScroll();
 
   useEffect(() => {
@@ -274,6 +303,11 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
           apiKeys
         );
       }}
+      uploadedFiles={uploadedFiles}
+      setUploadedFiles={setUploadedFiles}
+      imageDataList={imageDataList}
+      setImageDataList={setImageDataList}
     />
   );
 });
+
diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
new file mode 100644
index 0000000..378ada6
--- /dev/null
+++ b/app/components/chat/FilePreview.tsx
@@ -0,0 +1,40 @@
+// FilePreview.tsx
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface FilePreviewProps {
+    files: File[];
+    imageDataList: string[]; // or imagePreviews: string[]
+    onRemove: (index: number) => void;
+}
+
+const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemove }) => {
+    if (!files || files.length === 0) {
+        return null; // Or render a placeholder if desired
+    }
+
+    return (
+        <div className="flex flex-row overflow-x-auto"> {/* Add horizontal scrolling if needed */}
+            {files.map((file, index) => (
+                <div key={file.name + file.size} className="mr-2 relative">
+                    {/* Display image preview or file icon */}
+                    {imageDataList[index] && (
+                        <div className="relative">
+                            <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
+                            <button
+                                onClick={() => onRemove(index)}
+                                className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
+                            >
+                                <div className="bg-black rounded-full p-1">
+                                    <X className="w-3 h-3 text-gray-400" strokeWidth={2.5} />
+                                </div>
+                            </button>
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default FilePreview;
diff --git a/app/components/chat/SendButton.client.tsx b/app/components/chat/SendButton.client.tsx
index 99770fc..59e5e52 100644
--- a/app/components/chat/SendButton.client.tsx
+++ b/app/components/chat/SendButton.client.tsx
@@ -4,11 +4,12 @@ interface SendButtonProps {
   show: boolean;
   isStreaming?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onImagesSelected?: (images: File[]) => void;
 }
 
 const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
 
-export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
+export const SendButton = ({ show, isStreaming, onClick }: SendButtonProps) => {
   return (
     <AnimatePresence>
       {show ? (
@@ -30,4 +31,4 @@ export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
       ) : null}
     </AnimatePresence>
   );
-}
+};
diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index 803d2cd..a57d4fa 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -9,13 +9,34 @@ interface UserMessageProps {
 }
 
 export function UserMessage({ content }: UserMessageProps) {
+  const sanitizedContent = sanitizeUserMessage(content);
+  const textContent = Array.isArray(sanitizedContent) 
+    ? sanitizedContent.find(item => item.type === 'text')?.text || ''
+    : sanitizedContent;
+
   return (
     <div className="overflow-hidden pt-[4px]">
-      <Markdown limitedMarkdown>{sanitizeUserMessage(content)}</Markdown>
+      <Markdown limitedMarkdown>{textContent}</Markdown>
     </div>
   );
 }
 
-function sanitizeUserMessage(content: string) {
-  return content.replace(modificationsRegex, '').replace(MODEL_REGEX, 'Using: $1').replace(PROVIDER_REGEX, ' ($1)\n\n').trim();
+// function sanitizeUserMessage(content: string) {
+//   return content.replace(modificationsRegex, '').replace(MODEL_REGEX, 'Using: $1').replace(PROVIDER_REGEX, ' ($1)\n\n').trim();
+// }
+function sanitizeUserMessage(content: string | Array<{type: string, text?: string, image_url?: {url: string}}>) {
+  if (Array.isArray(content)) {
+    return content.map(item => {
+      if (item.type === 'text') {
+        return {
+          type: 'text',
+          text: item.text?.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '')
+        };
+      }
+      return item; // Keep image_url items unchanged
+    });
+  }
+  
+  // Handle legacy string content
+  return content.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '');
 }
diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index cf6d978..5b1bc6f 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -33,7 +33,7 @@ const menuVariants = {
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
 
-export function Menu() {
+export const Menu = () => {
   const menuRef = useRef<HTMLDivElement>(null);
   const [list, setList] = useState<ChatHistoryItem[]>([]);
   const [open, setOpen] = useState(false);
diff --git a/app/components/workbench/EditorPanel.tsx b/app/components/workbench/EditorPanel.tsx
index 046eaf8..e789f1d 100644
--- a/app/components/workbench/EditorPanel.tsx
+++ b/app/components/workbench/EditorPanel.tsx
@@ -23,7 +23,6 @@ import { isMobile } from '~/utils/mobile';
 import { FileBreadcrumb } from './FileBreadcrumb';
 import { FileTree } from './FileTree';
 import { Terminal, type TerminalRef } from './terminal/Terminal';
-import React from 'react';
 
 interface EditorPanelProps {
   files?: FileMap;
@@ -204,7 +203,7 @@ export const EditorPanel = memo(
                   const isActive = activeTerminal === index;
 
                   return (
-                    <React.Fragment key={index}>
+                    <>
                       {index == 0 ? (
                         <button
                           key={index}
@@ -223,7 +222,7 @@ export const EditorPanel = memo(
                           Bolt Terminal
                         </button>
                       ) : (
-                        <React.Fragment>
+                        <>
                           <button
                             key={index}
                             className={classNames(
@@ -239,9 +238,9 @@ export const EditorPanel = memo(
                             <div className="i-ph:terminal-window-duotone text-lg" />
                             Terminal {terminalCount > 1 && index}
                           </button>
-                        </React.Fragment>
+                        </>
                       )}
-                    </React.Fragment>
+                    </>
                   );
                 })}
                 {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
diff --git a/app/components/workbench/FileTree.tsx b/app/components/workbench/FileTree.tsx
index bfd8302..71f40af 100644
--- a/app/components/workbench/FileTree.tsx
+++ b/app/components/workbench/FileTree.tsx
@@ -111,7 +111,7 @@ export const FileTree = memo(
     };
 
     return (
-      <div className={classNames('text-sm', className ,'overflow-y-auto')}>
+      <div className={classNames('text-sm', className)}>
         {filteredFileList.map((fileOrFolder) => {
           switch (fileOrFolder.kind) {
             case 'file': {
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 8bfd797..a50c28e 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -25,26 +25,39 @@ export type Messages = Message[];
 export type StreamingOptions = Omit<Parameters<typeof _streamText>[0], 'model'>;
 
 function extractPropertiesFromMessage(message: Message): { model: string; provider: string; content: string } {
+  const textContent = Array.isArray(message.content)
+    ? message.content.find(item => item.type === 'text')?.text || ''
+    : message.content;
+
+  const modelMatch = textContent.match(MODEL_REGEX);
+  const providerMatch = textContent.match(PROVIDER_REGEX);
+
   // Extract model
-  const modelMatch = message.content.match(MODEL_REGEX);
+  // const modelMatch = message.content.match(MODEL_REGEX);
   const model = modelMatch ? modelMatch[1] : DEFAULT_MODEL;
 
   // Extract provider
-  const providerMatch = message.content.match(PROVIDER_REGEX);
+  // const providerMatch = message.content.match(PROVIDER_REGEX);
   const provider = providerMatch ? providerMatch[1] : DEFAULT_PROVIDER;
 
-  // Remove model and provider lines from content
-  const cleanedContent = message.content
-    .replace(MODEL_REGEX, '')
-    .replace(PROVIDER_REGEX, '')
-    .trim();
+  const cleanedContent = Array.isArray(message.content)
+    ? message.content.map(item => {
+      if (item.type === 'text') {
+        return {
+          type: 'text',
+          text: item.text?.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '')
+        };
+      }
+      return item; // Preserve image_url and other types as is
+    })
+    : textContent.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '');
 
   return { model, provider, content: cleanedContent };
 }
 
 export function streamText(
-  messages: Messages, 
-  env: Env, 
+  messages: Messages,
+  env: Env,
   options?: StreamingOptions,
   apiKeys?: Record<string, string>
 ) {
@@ -67,6 +80,16 @@ export function streamText(
     return message; // No changes for non-user messages
   });
 
+  // const modelConfig = getModel(currentProvider, currentModel, env, apiKeys);
+  // const coreMessages = convertToCoreMessages(processedMessages);
+  
+  // console.log('Debug streamText:', JSON.stringify({
+  //   model: modelConfig,
+  //   messages: processedMessages,
+  //   coreMessages: coreMessages,
+  //   system: getSystemPrompt()
+  // }, null, 2));
+
   return _streamText({
     model: getModel(currentProvider, currentModel, env, apiKeys),
     system: getSystemPrompt(),
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 47666c7..284fccb 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -30,13 +30,15 @@ function parseCookies(cookieHeader) {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages } = await request.json<{
-    messages: Messages
+  // console.log('=== API CHAT LOGGING START ===');
+  // console.log('Request received:', request.url);
+  
+  const { messages, imageData } = await request.json<{
+    messages: Messages,
+    imageData?: string[]
   }>();
 
   const cookieHeader = request.headers.get("Cookie");
-
-  // Parse the cookie's value (returns an object or null if no cookie exists)
   const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || "{}");
 
   const stream = new SwitchableStream();
@@ -69,6 +71,13 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
     const result = await streamText(messages, context.cloudflare.env, options, apiKeys);
 
+    // console.log('=== API CHAT LOGGING START ===');
+    // console.log('StreamText:', JSON.stringify({
+    //   messages,
+    //   result,
+    // }, null, 2));
+    // console.log('=== API CHAT LOGGING END ===');
+
     stream.switchSource(result.toAIStream());
 
     return new Response(stream.readable, {

From 32f758bbcf4c32162c09449f63df0062d63cd323 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Mon, 18 Nov 2024 20:05:31 -0500
Subject: [PATCH 02/29] add module lucide-react

---
 package.json   |  1 +
 pnpm-lock.yaml | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/package.json b/package.json
index ce8e95d..e828e00 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "jose": "^5.6.3",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
+    "lucide-react": "^0.460.0",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
     "react": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82e14c1..d507a01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,6 +152,9 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      lucide-react:
+        specifier: ^0.460.0
+        version: 0.460.0(react@18.3.1)
       nanostores:
         specifier: ^0.10.3
         version: 0.10.3
@@ -3594,6 +3597,11 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  lucide-react@0.460.0:
+    resolution: {integrity: sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -9339,6 +9347,10 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  lucide-react@0.460.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8

From fe3ea8005e35acea625d04584bef7de06adaeecc Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Tue, 19 Nov 2024 20:37:23 -0500
Subject: [PATCH 03/29] changing based on PR review

---
 app/components/chat/BaseChat.tsx    | 70 ++++++++++++++---------------
 app/components/chat/FilePreview.tsx | 13 +++---
 app/components/chat/UserMessage.tsx |  3 --
 app/lib/.server/llm/stream-text.ts  | 14 +-----
 app/routes/api.chat.ts              | 13 ++----
 package.json                        |  1 -
 pnpm-lock.yaml                      | 12 -----
 7 files changed, 46 insertions(+), 80 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e0cd928..d3ccb05 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -35,7 +35,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
       <select
         value={provider?.name}
         onChange={(e) => {
-          setProvider(providerList.find(p => p.name === e.target.value));
+          setProvider(providerList.find((p) => p.name === e.target.value));
           const firstModel = [...modelList].find((m) => m.provider == e.target.value);
           setModel(firstModel ? firstModel.name : '');
         }}
@@ -51,7 +51,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
         key={provider?.name}
         value={model}
         onChange={(e) => setModel(e.target.value)}
-        style={{ maxWidth: "70%" }}
+        style={{ maxWidth: '70%' }}
         className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
         {[...modelList]
@@ -93,32 +93,34 @@ interface BaseChatProps {
   setImageDataList?: (dataList: string[]) => void;
 }
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
-  ({
-    textareaRef,
-    messageRef,
-    scrollRef,
-    showChat,
-    chatStarted = false,
-    isStreaming = false,
-    model,
-    setModel,
-    provider,
-    setProvider,
-    input = '',
-    enhancingPrompt,
-    handleInputChange,
-    promptEnhanced,
-    enhancePrompt,
-    sendMessage,
-    handleStop,
-    uploadedFiles,
-    setUploadedFiles,
-    imageDataList,
-    setImageDataList,
-    messages,
-    children,  // Add this
-  }, ref) => {
-    console.log(provider);
+  (
+    {
+      textareaRef,
+      messageRef,
+      scrollRef,
+      showChat = true,
+      chatStarted = false,
+      isStreaming = false,
+      model,
+      setModel,
+      provider,
+      setProvider,
+      input = '',
+      enhancingPrompt,
+      handleInputChange,
+      promptEnhanced,
+      enhancePrompt,
+      sendMessage,
+      handleStop,
+      uploadedFiles,
+      setUploadedFiles,
+      imageDataList,
+      setImageDataList,
+      messages,
+      children,  // Add this
+    },
+    ref,
+  ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [modelList, setModelList] = useState(MODEL_LIST);
@@ -139,7 +141,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         Cookies.remove('apiKeys');
       }
 
-      initializeModelList().then(modelList => {
+      initializeModelList().then((modelList) => {
         setModelList(modelList);
       });
     }, []);
@@ -239,12 +241,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   setProvider={setProvider}
                   providerList={PROVIDER_LIST}
                 />
-                {provider &&
+                {provider && (
                   <APIKeyManager
                     provider={provider}
                     apiKey={apiKeys[provider.name] || ''}
                     setApiKey={(key) => updateApiKey(provider.name, key)}
-                  />}
+                  />
+                )}
 
                 <FilePreview
                   files={uploadedFiles}
@@ -309,7 +312,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         className="transition-all"
                         onClick={() => handleFileUpload()}
                       >
-                        <div className="i-ph:upload text-xl"></div>
+                        <div className="i-ph:paperclip text-xl"></div>
                       </IconButton>
 
                       <IconButton
@@ -374,6 +377,3 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     );
   },
 );
-
-
-
diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
index 378ada6..31fd11b 100644
--- a/app/components/chat/FilePreview.tsx
+++ b/app/components/chat/FilePreview.tsx
@@ -1,23 +1,22 @@
-// FilePreview.tsx
+// Remove the lucide-react import
 import React from 'react';
-import { X } from 'lucide-react';
 
+// Rest of the interface remains the same
 interface FilePreviewProps {
     files: File[];
-    imageDataList: string[]; // or imagePreviews: string[]
+    imageDataList: string[];
     onRemove: (index: number) => void;
 }
 
 const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemove }) => {
     if (!files || files.length === 0) {
-        return null; // Or render a placeholder if desired
+        return null;
     }
 
     return (
-        <div className="flex flex-row overflow-x-auto"> {/* Add horizontal scrolling if needed */}
+        <div className="flex flex-row overflow-x-auto">
             {files.map((file, index) => (
                 <div key={file.name + file.size} className="mr-2 relative">
-                    {/* Display image preview or file icon */}
                     {imageDataList[index] && (
                         <div className="relative">
                             <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
@@ -26,7 +25,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
                                 className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
                             >
                                 <div className="bg-black rounded-full p-1">
-                                    <X className="w-3 h-3 text-gray-400" strokeWidth={2.5} />
+                                    <div className="i-ph:x w-3 h-3 text-gray-400" />
                                 </div>
                             </button>
                         </div>
diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index a57d4fa..d7e1228 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -21,9 +21,6 @@ export function UserMessage({ content }: UserMessageProps) {
   );
 }
 
-// function sanitizeUserMessage(content: string) {
-//   return content.replace(modificationsRegex, '').replace(MODEL_REGEX, 'Using: $1').replace(PROVIDER_REGEX, ' ($1)\n\n').trim();
-// }
 function sanitizeUserMessage(content: string | Array<{type: string, text?: string, image_url?: {url: string}}>) {
   if (Array.isArray(content)) {
     return content.map(item => {
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index a50c28e..1603396 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -45,12 +45,12 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
       if (item.type === 'text') {
         return {
           type: 'text',
-          text: item.text?.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '')
+          text: item.text?.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '')
         };
       }
       return item; // Preserve image_url and other types as is
     })
-    : textContent.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '');
+    : textContent.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 
   return { model, provider, content: cleanedContent };
 }
@@ -80,16 +80,6 @@ export function streamText(
     return message; // No changes for non-user messages
   });
 
-  // const modelConfig = getModel(currentProvider, currentModel, env, apiKeys);
-  // const coreMessages = convertToCoreMessages(processedMessages);
-  
-  // console.log('Debug streamText:', JSON.stringify({
-  //   model: modelConfig,
-  //   messages: processedMessages,
-  //   coreMessages: coreMessages,
-  //   system: getSystemPrompt()
-  // }, null, 2));
-
   return _streamText({
     model: getModel(currentProvider, currentModel, env, apiKeys),
     system: getSystemPrompt(),
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 284fccb..8fdb3d7 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -30,15 +30,15 @@ function parseCookies(cookieHeader) {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  // console.log('=== API CHAT LOGGING START ===');
-  // console.log('Request received:', request.url);
-  
+
   const { messages, imageData } = await request.json<{
     messages: Messages,
     imageData?: string[]
   }>();
 
   const cookieHeader = request.headers.get("Cookie");
+
+  // Parse the cookie's value (returns an object or null if no cookie exists)
   const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || "{}");
 
   const stream = new SwitchableStream();
@@ -71,13 +71,6 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
     const result = await streamText(messages, context.cloudflare.env, options, apiKeys);
 
-    // console.log('=== API CHAT LOGGING START ===');
-    // console.log('StreamText:', JSON.stringify({
-    //   messages,
-    //   result,
-    // }, null, 2));
-    // console.log('=== API CHAT LOGGING END ===');
-
     stream.switchSource(result.toAIStream());
 
     return new Response(stream.readable, {
diff --git a/package.json b/package.json
index 56a9e72..40ede0f 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "jose": "^5.6.3",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
-    "lucide-react": "^0.460.0",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
     "react": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ead147e..4158d19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -155,9 +155,6 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
-      lucide-react:
-        specifier: ^0.460.0
-        version: 0.460.0(react@18.3.1)
       nanostores:
         specifier: ^0.10.3
         version: 0.10.3
@@ -3674,11 +3671,6 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
-  lucide-react@0.460.0:
-    resolution: {integrity: sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
-
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -9492,10 +9484,6 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
-  lucide-react@0.460.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8

From 76713c2e6e5b2518f9d8d995647204e4ab66c6b9 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Wed, 20 Nov 2024 17:56:07 -0500
Subject: [PATCH 04/29] fixes for PR #332

---
 app/components/chat/UserMessage.tsx      | 21 +++++----------------
 app/components/workbench/EditorPanel.tsx |  9 +++++----
 app/lib/.server/llm/stream-text.ts       |  5 +++++
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index d7e1228..c5d9c9b 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -9,10 +9,7 @@ interface UserMessageProps {
 }
 
 export function UserMessage({ content }: UserMessageProps) {
-  const sanitizedContent = sanitizeUserMessage(content);
-  const textContent = Array.isArray(sanitizedContent) 
-    ? sanitizedContent.find(item => item.type === 'text')?.text || ''
-    : sanitizedContent;
+  const textContent = sanitizeUserMessage(content);
 
   return (
     <div className="overflow-hidden pt-[4px]">
@@ -23,17 +20,9 @@ export function UserMessage({ content }: UserMessageProps) {
 
 function sanitizeUserMessage(content: string | Array<{type: string, text?: string, image_url?: {url: string}}>) {
   if (Array.isArray(content)) {
-    return content.map(item => {
-      if (item.type === 'text') {
-        return {
-          type: 'text',
-          text: item.text?.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '')
-        };
-      }
-      return item; // Keep image_url items unchanged
-    });
+    const textItem = content.find(item => item.type === 'text');
+    return textItem?.text?.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '') || '';
   }
   
-  // Handle legacy string content
-  return content.replace(/\[Model:.*?\]\n\n/, '').replace(/\[Provider:.*?\]\n\n/, '');
-}
+  return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
+}
\ No newline at end of file
diff --git a/app/components/workbench/EditorPanel.tsx b/app/components/workbench/EditorPanel.tsx
index e789f1d..a9c9d33 100644
--- a/app/components/workbench/EditorPanel.tsx
+++ b/app/components/workbench/EditorPanel.tsx
@@ -23,6 +23,7 @@ import { isMobile } from '~/utils/mobile';
 import { FileBreadcrumb } from './FileBreadcrumb';
 import { FileTree } from './FileTree';
 import { Terminal, type TerminalRef } from './terminal/Terminal';
+import React from 'react';
 
 interface EditorPanelProps {
   files?: FileMap;
@@ -203,7 +204,7 @@ export const EditorPanel = memo(
                   const isActive = activeTerminal === index;
 
                   return (
-                    <>
+                    <React.Fragment key={index}>
                       {index == 0 ? (
                         <button
                           key={index}
@@ -222,7 +223,7 @@ export const EditorPanel = memo(
                           Bolt Terminal
                         </button>
                       ) : (
-                        <>
+                        <React.Fragment>
                           <button
                             key={index}
                             className={classNames(
@@ -238,9 +239,9 @@ export const EditorPanel = memo(
                             <div className="i-ph:terminal-window-duotone text-lg" />
                             Terminal {terminalCount > 1 && index}
                           </button>
-                        </>
+                          </React.Fragment>
                       )}
-                    </>
+                    </React.Fragment>
                   );
                 })}
                 {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 1603396..7951512 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -80,6 +80,11 @@ export function streamText(
     return message; // No changes for non-user messages
   });
 
+  console.log('Stream Text:', JSON.stringify({
+    model: getModel(currentProvider, currentModel, env, apiKeys),
+    messages: convertToCoreMessages(processedMessages),    
+  }));
+
   return _streamText({
     model: getModel(currentProvider, currentModel, env, apiKeys),
     system: getSystemPrompt(),

From 302cd28775b5abe214817c2b7790a313b2f8f34f Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Wed, 20 Nov 2024 19:35:57 -0500
Subject: [PATCH 05/29] .

---
 app/lib/.server/llm/stream-text.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 7951512..1603396 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -80,11 +80,6 @@ export function streamText(
     return message; // No changes for non-user messages
   });
 
-  console.log('Stream Text:', JSON.stringify({
-    model: getModel(currentProvider, currentModel, env, apiKeys),
-    messages: convertToCoreMessages(processedMessages),    
-  }));
-
   return _streamText({
     model: getModel(currentProvider, currentModel, env, apiKeys),
     system: getSystemPrompt(),

From 937ba7e61b9ba45d5283fbac3e8a34bd39f7d641 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Thu, 21 Nov 2024 00:17:06 -0500
Subject: [PATCH 06/29] model pickup

---
 app/lib/.server/llm/stream-text.ts | 2 ++
 app/routes/api.chat.ts             | 8 ++++++--
 app/utils/constants.ts             | 6 ++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 1603396..3b563ea 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -64,6 +64,8 @@ export function streamText(
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER;
 
+  console.log('StreamText:', JSON.stringify(messages));
+
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 8fdb3d7..d622b46 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -31,11 +31,14 @@ function parseCookies(cookieHeader) {
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
 
-  const { messages, imageData } = await request.json<{
+  const { messages, imageData, model } = await request.json<{
     messages: Messages,
-    imageData?: string[]
+    imageData?: string[],
+    model: string
   }>();
 
+  console.log('ChatAction:', JSON.stringify(messages));
+
   const cookieHeader = request.headers.get("Cookie");
 
   // Parse the cookie's value (returns an object or null if no cookie exists)
@@ -47,6 +50,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     const options: StreamingOptions = {
       toolChoice: 'none',
       apiKeys,
+      model,
       onFinish: async ({ text: content, finishReason }) => {
         if (finishReason !== 'length') {
           return stream.close();
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 308832b..501a87e 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -30,13 +30,15 @@ const PROVIDER_LIST: ProviderInfo[] = [
     icon: "i-ph:cloud-arrow-down",
   }, {
     name: 'OpenAILike',
-    staticModels: [],
+    staticModels: [
+      { name: 'o1-mini', label: 'o1-mini', provider: 'OpenAILike' },      
+    ],
     getDynamicModels: getOpenAILikeModels
   },
   {
     name: 'OpenRouter',
     staticModels: [
-      { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
+      { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenRouter' },
       {
         name: 'anthropic/claude-3.5-sonnet',
         label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)',

From 36b7d94bdd0ab8b92d780d581889c4dc75607cd7 Mon Sep 17 00:00:00 2001
From: navyseal4000 <navyseal4000@gmail.com>
Date: Wed, 13 Nov 2024 21:36:50 -0600
Subject: [PATCH 07/29] Added speech to text capability

---
 app/components/chat/BaseChat.tsx | 79 ++++++++++++++++++++++++++++++++
 app/types/global.d.ts            |  2 +
 2 files changed, 81 insertions(+)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 902cb23..fee28c0 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -87,6 +87,35 @@ interface BaseChatProps {
   enhancePrompt?: () => void;
 }
 
+const SpeechRecognitionButton = ({
+  isListening,
+  onStart,
+  onStop,
+  disabled
+}: {
+  isListening: boolean;
+  onStart: () => void;
+  onStop: () => void;
+  disabled: boolean;
+}) => {
+  return (
+    <IconButton
+      title={isListening ? "Stop listening" : "Start speech recognition"}
+      disabled={disabled}
+      className={classNames('transition-all', {
+        'text-bolt-elements-item-contentAccent': isListening,
+      })}
+      onClick={isListening ? onStop : onStart}
+    >
+      {isListening ? (
+        <div className="i-ph:microphone-slash text-xl" />
+      ) : (
+        <div className="i-ph:microphone text-xl" />
+      )}
+    </IconButton>
+  );
+};
+
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
     {
@@ -114,6 +143,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [modelList, setModelList] = useState(MODEL_LIST);
+    const [isListening, setIsListening] = useState(false);
+    const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -134,8 +165,49 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       initializeModelList().then((modelList) => {
         setModelList(modelList);
       });
+      if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+
+        recognition.onresult = (event) => {
+          const transcript = Array.from(event.results)
+            .map(result => result[0])
+            .map(result => result.transcript)
+            .join('');
+
+          if (handleInputChange) {
+            const syntheticEvent = {
+              target: { value: transcript },
+            } as React.ChangeEvent<HTMLTextAreaElement>;
+            handleInputChange(syntheticEvent);
+          }
+        };
+
+        recognition.onerror = (event) => {
+          console.error('Speech recognition error:', event.error);
+          setIsListening(false);
+        };
+
+        setRecognition(recognition);
+      }
     }, []);
 
+    const startListening = () => {
+      if (recognition) {
+        recognition.start();
+        setIsListening(true);
+      }
+    };
+
+    const stopListening = () => {
+      if (recognition) {
+        recognition.stop();
+        setIsListening(false);
+      }
+    };
+
     const updateApiKey = (provider: string, key: string) => {
       try {
         const updatedApiKeys = { ...apiKeys, [provider]: key };
@@ -284,6 +356,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           </>
                         )}
                       </IconButton>
+
+                      <SpeechRecognitionButton
+                        isListening={isListening}
+                        onStart={startListening}
+                        onStop={stopListening}
+                        disabled={isStreaming}
+                      />
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
diff --git a/app/types/global.d.ts b/app/types/global.d.ts
index a1f6789..193c65d 100644
--- a/app/types/global.d.ts
+++ b/app/types/global.d.ts
@@ -1,3 +1,5 @@
 interface Window {
   showDirectoryPicker(): Promise<FileSystemDirectoryHandle>;
+  webkitSpeechRecognition: typeof SpeechRecognition;
+  SpeechRecognition: typeof SpeechRecognition;  
 }

From a896f3f312bcecf9b9df588b63a4a3b78efbe06d Mon Sep 17 00:00:00 2001
From: navyseal4000 <navyseal4000@gmail.com>
Date: Thu, 21 Nov 2024 07:55:53 -0600
Subject: [PATCH 08/29] Clear speech to text, listening upon submission

---
 app/components/chat/BaseChat.tsx | 38 ++++++++++++++++++++++++++++----
 app/utils/constants.ts           |  2 +-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index fee28c0..dde0cca 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -145,6 +145,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const [modelList, setModelList] = useState(MODEL_LIST);
     const [isListening, setIsListening] = useState(false);
     const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
+    const [transcript, setTranscript] = useState('');
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -177,6 +178,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
             .map(result => result.transcript)
             .join('');
 
+          setTranscript(transcript);
+
+
           if (handleInputChange) {
             const syntheticEvent = {
               target: { value: transcript },
@@ -208,6 +212,25 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
+    const handleSendMessage = (event: React.UIEvent, messageInput?: string) => {
+      if (sendMessage) {
+        sendMessage(event, messageInput);
+        if (recognition) {
+          recognition.abort(); // Stop current recognition
+          setTranscript(''); // Clear transcript
+          setIsListening(false);
+
+          // Clear the input by triggering handleInputChange with empty value
+          if (handleInputChange) {
+            const syntheticEvent = {
+              target: { value: '' },
+            } as React.ChangeEvent<HTMLTextAreaElement>;
+            handleInputChange(syntheticEvent);
+          }
+        }
+      }
+    };
+
     const updateApiKey = (provider: string, key: string) => {
       try {
         const updatedApiKeys = { ...apiKeys, [provider]: key };
@@ -301,8 +324,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         }
 
                         event.preventDefault();
-
-                        sendMessage?.(event);
+                        if (isStreaming) {
+                          handleStop?.();
+                          return;
+                        }
+                        handleSendMessage?.(event);
                       }
                     }}
                     value={input}
@@ -327,7 +353,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             return;
                           }
 
-                          sendMessage?.(event);
+                          handleSendMessage?.(event);
                         }}
                       />
                     )}
@@ -384,7 +410,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <button
                         key={index}
                         onClick={(event) => {
-                          sendMessage?.(event, examplePrompt.text);
+                          if (isStreaming) {
+                            handleStop?.();
+                            return;
+                          }
+                          handleSendMessage?.(event, examplePrompt.text);
                         }}
                         className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
                       >
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 942afc4..3be6680 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -6,7 +6,7 @@ export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
 export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
-export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
+export const DEFAULT_MODEL = 'qwen2.5-coder:32b';
 
 const PROVIDER_LIST: ProviderInfo[] = [
   {

From fdf33812c9bc2a071f5746aded0ccc9f27171864 Mon Sep 17 00:00:00 2001
From: navyseal4000 <navyseal4000@gmail.com>
Date: Thu, 21 Nov 2024 08:00:27 -0600
Subject: [PATCH 09/29] Revert constant change

This reverts the constant change for the default model in commit a896f3f312bcecf9b9df588b63a4a3b78efbe06d.
---
 app/utils/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 3be6680..942afc4 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -6,7 +6,7 @@ export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
 export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
-export const DEFAULT_MODEL = 'qwen2.5-coder:32b';
+export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
 
 const PROVIDER_LIST: ProviderInfo[] = [
   {

From df94e665d694553d5a2bacc5e9f3912f0464e67f Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Thu, 21 Nov 2024 18:09:49 -0500
Subject: [PATCH 10/29] picking right model

---
 app/lib/.server/llm/model.ts       | 33 ++++++++++++++++++++++--------
 app/lib/.server/llm/stream-text.ts | 25 +++++++++++++++++-----
 app/routes/api.chat.ts             |  2 +-
 app/utils/constants.ts             |  5 ++++-
 4 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index e07f2bb..da296d0 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -15,14 +15,23 @@ export function getAnthropicModel(apiKey: string, model: string) {
 
   return anthropic(model);
 }
-export function getOpenAILikeModel(baseURL:string,apiKey: string, model: string) {
+
+export function getOpenAILikeModel(baseURL: string, apiKey: string, model: string) {
+  // console.log('OpenAILike config:', { baseURL, hasApiKey: !!apiKey, model });
   const openai = createOpenAI({
     baseURL,
     apiKey,
   });
-
-  return openai(model);
+  // console.log('OpenAI client created:', !!openai);
+  const client = openai(model);
+  // console.log('OpenAI model client:', !!client);
+  return client;
+  // return {
+  //   model: client,
+  //   provider: 'OpenAILike'  // Correctly identifying the actual provider
+  // };
 }
+
 export function getOpenAIModel(apiKey: string, model: string) {
   const openai = createOpenAI({
     apiKey,
@@ -74,7 +83,7 @@ export function getOllamaModel(baseURL: string, model: string) {
   return Ollama;
 }
 
-export function getDeepseekModel(apiKey: string, model: string){
+export function getDeepseekModel(apiKey: string, model: string) {
   const openai = createOpenAI({
     baseURL: 'https://api.deepseek.com/beta',
     apiKey,
@@ -108,9 +117,15 @@ export function getXAIModel(apiKey: string, model: string) {
 
   return openai(model);
 }
+
 export function getModel(provider: string, model: string, env: Env, apiKeys?: Record<string, string>) {
-  const apiKey = getAPIKey(env, provider, apiKeys);
-  const baseURL = getBaseURL(env, provider);
+  let apiKey;  // Declare first
+  let baseURL;
+
+  apiKey = getAPIKey(env, provider, apiKeys);  // Then assign
+  baseURL = getBaseURL(env, provider);
+
+  // console.log('getModel inputs:', { provider, model, baseURL, hasApiKey: !!apiKey });
 
   switch (provider) {
     case 'Anthropic':
@@ -126,11 +141,11 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
     case 'Google':
       return getGoogleModel(apiKey, model);
     case 'OpenAILike':
-      return getOpenAILikeModel(baseURL,apiKey, model);
+      return getOpenAILikeModel(baseURL, apiKey, model);
     case 'Deepseek':
       return getDeepseekModel(apiKey, model);
     case 'Mistral':
-      return  getMistralModel(apiKey, model);
+      return getMistralModel(apiKey, model);
     case 'LMStudio':
       return getLMStudioModel(baseURL, model);
     case 'xAI':
@@ -138,4 +153,4 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
     default:
       return getOllamaModel(baseURL, model);
   }
-}
+}
\ No newline at end of file
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 3b563ea..28c8c96 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -52,6 +52,10 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
     })
     : textContent.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 
+  // console.log('Model from message:', model);
+  // console.log('Found in MODEL_LIST:', MODEL_LIST.find((m) => m.name === model));
+  // console.log('Current MODEL_LIST:', MODEL_LIST);
+
   return { model, provider, content: cleanedContent };
 }
 
@@ -64,7 +68,7 @@ export function streamText(
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER;
 
-  console.log('StreamText:', JSON.stringify(messages));
+  // console.log('StreamText:', JSON.stringify(messages));
 
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
@@ -82,11 +86,22 @@ export function streamText(
     return message; // No changes for non-user messages
   });
 
-  return _streamText({
-    model: getModel(currentProvider, currentModel, env, apiKeys),
+  // console.log('Message content:', messages[0].content);
+  // console.log('Extracted properties:', extractPropertiesFromMessage(messages[0]));
+
+  const llmClient = getModel(currentProvider, currentModel, env, apiKeys);
+  // console.log('LLM Client:', llmClient);
+
+  const llmConfig = {
+    ...options,
+    model: llmClient, //getModel(currentProvider, currentModel, env, apiKeys),
+    provider: currentProvider,
     system: getSystemPrompt(),
     maxTokens: MAX_TOKENS,
     messages: convertToCoreMessages(processedMessages),
-    ...options,
-  });
+  };
+
+  // console.log('LLM Config:', llmConfig);
+
+  return _streamText(llmConfig);
 }
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index d622b46..bc42fb2 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -37,7 +37,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     model: string
   }>();
 
-  console.log('ChatAction:', JSON.stringify(messages));
+  // console.log('ChatAction:', JSON.stringify(messages));
 
   const cookieHeader = request.headers.get("Cookie");
 
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 501a87e..b1b421b 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -32,6 +32,7 @@ const PROVIDER_LIST: ProviderInfo[] = [
     name: 'OpenAILike',
     staticModels: [
       { name: 'o1-mini', label: 'o1-mini', provider: 'OpenAILike' },      
+      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
     ],
     getDynamicModels: getOpenAILikeModels
   },
@@ -58,7 +59,9 @@ const PROVIDER_LIST: ProviderInfo[] = [
 
   }, {
     name: 'Google',
-    staticModels: [
+    staticModels: [ 
+      { name: 'gemini-exp-1121', label: 'Gemini Experimental 1121', provider: 'Google' },
+      { name: 'gemini-1.5-pro-002', label: 'Gemini 1.5 Pro 002', provider: 'Google' },
       { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
       { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' }
     ],

From 074161024d1bbea51a2bcb1e1b2654ca74597aac Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Thu, 21 Nov 2024 23:31:41 -0500
Subject: [PATCH 11/29] merge with upstream

---
 app/lib/.server/llm/model.ts       |  3 ---
 app/lib/.server/llm/stream-text.ts | 34 ++++++++++++++----------------
 app/routes/api.chat.ts             |  2 --
 app/utils/constants.ts             |  2 +-
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index a6a560e..307c817 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -22,7 +22,6 @@ export function getAnthropicModel(apiKey: string, model: string) {
 }
 
 export function getOpenAILikeModel(baseURL: string, apiKey: string, model: string) {
-  // console.log('OpenAILike config:', { baseURL, hasApiKey: !!apiKey, model });
   const openai = createOpenAI({
     baseURL,
     apiKey,
@@ -132,8 +131,6 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
   apiKey = getAPIKey(env, provider, apiKeys);  // Then assign
   baseURL = getBaseURL(env, provider);
 
-  // console.log('getModel inputs:', { provider, model, baseURL, hasApiKey: !!apiKey });
-
   switch (provider) {
     case 'Anthropic':
       return getAnthropicModel(apiKey, model);
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index c2e161d..965ec95 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -52,12 +52,9 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
     })
     : textContent.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 
-  // console.log('Model from message:', model);
-  // console.log('Found in MODEL_LIST:', MODEL_LIST.find((m) => m.name === model));
-  // console.log('Current MODEL_LIST:', MODEL_LIST);
-
   return { model, provider, content: cleanedContent };
 }
+
 export function streamText(
   messages: Messages,
   env: Env,
@@ -79,20 +76,21 @@ export function streamText(
 
       return { ...message, content };
     }
+    return message;
+  });
 
-    const modelDetails = MODEL_LIST.find((m) => m.name === currentModel);
+  const modelDetails = MODEL_LIST.find((m) => m.name === currentModel);
 
-    const dynamicMaxTokens =
-      modelDetails && modelDetails.maxTokenAllowed
-        ? modelDetails.maxTokenAllowed
-        : MAX_TOKENS;
+  const dynamicMaxTokens =
+    modelDetails && modelDetails.maxTokenAllowed
+      ? modelDetails.maxTokenAllowed
+      : MAX_TOKENS;
 
-    return _streamText({
-      model: getModel(currentProvider, currentModel, env, apiKeys),
-      system: getSystemPrompt(),
-      maxTokens: dynamicMaxTokens,
-      messages: convertToCoreMessages(processedMessages),
-      ...options,
-    });
-  }
-)}
+  return _streamText({
+    ...options,
+    model: getModel(currentProvider, currentModel, env, apiKeys),
+    system: getSystemPrompt(),
+    maxTokens: dynamicMaxTokens,
+    messages: convertToCoreMessages(processedMessages),
+  });
+}
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index bc42fb2..789beb0 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -37,8 +37,6 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     model: string
   }>();
 
-  // console.log('ChatAction:', JSON.stringify(messages));
-
   const cookieHeader = request.headers.get("Cookie");
 
   // Parse the cookie's value (returns an object or null if no cookie exists)
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index f96dceb..d781353 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -32,7 +32,7 @@ const PROVIDER_LIST: ProviderInfo[] = [
     name: 'OpenAILike',
     staticModels: [
       { name: 'o1-mini', label: 'o1-mini', provider: 'OpenAILike' },      
-      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
+      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAILike' },
     ],
     getDynamicModels: getOpenAILikeModels
   },

From 809b54e04aaf37e474b5151340b704d57e5afc48 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Wed, 27 Nov 2024 14:30:09 -0500
Subject: [PATCH 12/29] upload new files

---
 app/components/workbench/Workbench.client.tsx | 59 ++++++++++++++
 app/lib/stores/files.ts                       |  4 +
 app/lib/stores/workbench.ts                   | 81 +++++++++++++++++--
 3 files changed, 139 insertions(+), 5 deletions(-)

diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
index 7e21dd0..da5b60d 100644
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@@ -57,6 +57,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
   renderLogger.trace('Workbench');
 
   const [isSyncing, setIsSyncing] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
 
   const hasPreview = useStore(computed(workbenchStore.previews, (previews) => previews.length > 0));
   const showWorkbench = useStore(workbenchStore.showWorkbench);
@@ -119,6 +120,60 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
     }
   }, []);
 
+  const handleUploadFiles = useCallback(async () => {
+    setIsUploading(true);
+
+    try {
+      //   const directoryHandle = await window.showDirectoryPicker();
+
+      //   // First upload new files
+      //   await workbenchStore.uploadFilesFromDisk(directoryHandle);
+
+      //   // Get current files state
+      //   const currentFiles = workbenchStore.files.get();
+
+      //   // Create new modifications map with all files as "new"
+      //   const newModifications = new Map();
+      //   Object.entries(currentFiles).forEach(([path, file]) => {
+      //     if (file.type === 'file') {
+      //       newModifications.set(path, file.content);
+      //     }
+      //   });
+
+      //   // Update workbench state
+      //   await workbenchStore.refreshFiles();
+      //   workbenchStore.resetAllFileModifications();
+
+      //   toast.success('Files uploaded successfully');
+      // } catch (error) {
+      //   toast.error('Failed to upload files');
+      // }
+      await handleUploadFilesFunc();
+    }
+
+    finally {
+      setIsUploading(false);
+    }
+  }, []);
+
+  async function handleUploadFilesFunc() {
+    try {
+      // First clean all statuses
+      await workbenchStore.saveAllFiles();
+      await workbenchStore.resetAllFileModifications();
+      await workbenchStore.refreshFiles();
+
+      // Now upload new files
+      const directoryHandle = await window.showDirectoryPicker();
+      await workbenchStore.uploadFilesFromDisk(directoryHandle);
+
+      toast.success('Files uploaded successfully');
+    } catch (error) {
+      console.error('Upload files error:', error);
+      toast.error('Failed to upload files');
+    }
+  }
+
   return (
     chatStarted && (
       <motion.div
@@ -158,6 +213,10 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                       {isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
                       {isSyncing ? 'Syncing...' : 'Sync Files'}
                     </PanelHeaderButton>
+                    <PanelHeaderButton className="mr-1 text-sm" onClick={handleUploadFiles} disabled={isSyncing}>
+                      {isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-up" />}
+                      {isSyncing ? 'Uploading...' : 'Upload Files'}
+                    </PanelHeaderButton>
                     <PanelHeaderButton
                       className="mr-1 text-sm"
                       onClick={() => {
diff --git a/app/lib/stores/files.ts b/app/lib/stores/files.ts
index 663ae58..b0f726e 100644
--- a/app/lib/stores/files.ts
+++ b/app/lib/stores/files.ts
@@ -80,6 +80,10 @@ export class FilesStore {
     this.#modifiedFiles.clear();
   }
 
+  markFileAsNew(filePath: string) {
+    this.#modifiedFiles.set(filePath, '');
+  }
+
   async saveFile(filePath: string, content: string) {
     const webcontainer = await this.#webcontainer;
 
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
index 4db14e7..6378ba7 100644
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -32,6 +32,7 @@ export type WorkbenchViewType = 'code' | 'preview';
 export class WorkbenchStore {
   #previewsStore = new PreviewsStore(webcontainer);
   #filesStore = new FilesStore(webcontainer);
+
   #editorStore = new EditorStore(this.#filesStore);
   #terminalStore = new TerminalStore(webcontainer);
 
@@ -43,7 +44,7 @@ export class WorkbenchStore {
   modifiedFiles = new Set<string>();
   artifactIdList: string[] = [];
   #boltTerminal: { terminal: ITerminal; process: WebContainerProcess } | undefined;
-  #globalExecutionQueue=Promise.resolve();
+  #globalExecutionQueue = Promise.resolve();
   constructor() {
     if (import.meta.hot) {
       import.meta.hot.data.artifacts = this.artifacts;
@@ -54,7 +55,7 @@ export class WorkbenchStore {
   }
 
   addToExecutionQueue(callback: () => Promise<void>) {
-    this.#globalExecutionQueue=this.#globalExecutionQueue.then(()=>callback())
+    this.#globalExecutionQueue = this.#globalExecutionQueue.then(() => callback())
   }
 
   get previews() {
@@ -277,11 +278,11 @@ export class WorkbenchStore {
   }
 
   runAction(data: ActionCallbackData, isStreaming: boolean = false) {
-    if(isStreaming) {
+    if (isStreaming) {
       this._runAction(data, isStreaming)
     }
-    else{
-      this.addToExecutionQueue(()=>this._runAction(data, isStreaming))
+    else {
+      this.addToExecutionQueue(() => this._runAction(data, isStreaming))
     }
   }
   async _runAction(data: ActionCallbackData, isStreaming: boolean = false) {
@@ -381,6 +382,61 @@ export class WorkbenchStore {
     return syncedFiles;
   }
 
+  async uploadFilesFromDisk(sourceHandle: FileSystemDirectoryHandle) {
+    const loadedFiles = [];
+    const wc = await webcontainer;
+    const newFiles = {};
+
+    const processDirectory = async (handle: FileSystemDirectoryHandle, currentPath: string = '') => {
+      const entries = await Array.fromAsync(handle.values());
+
+      for (const entry of entries) {
+        const entryPath = currentPath ? `${currentPath}/${entry.name}` : entry.name;
+        const fullPath = `/${entryPath}`;
+
+        if (entry.kind === 'directory') {
+          await wc.fs.mkdir(fullPath, { recursive: true });
+          const subDirHandle = await handle.getDirectoryHandle(entry.name);
+          await processDirectory(subDirHandle, entryPath);
+        } else {
+          const file = await entry.getFile();
+          const content = await file.text();
+
+          // Write to WebContainer
+          await wc.fs.writeFile(fullPath, content);
+
+          // Mark file as new
+          this.#filesStore.markFileAsNew(fullPath);
+
+          // Update the files store with the current content
+          this.files.setKey(fullPath, { type: 'file', content, isBinary: false });
+
+          // Collect for editor store with actual content
+          newFiles[fullPath] = { type: 'file', content, isBinary: false };
+          loadedFiles.push(entryPath);
+        }
+      }
+    }
+
+    await processDirectory(sourceHandle);
+
+    return loadedFiles;
+  }
+
+  async refreshFiles() {
+    // Clear old state
+    this.modifiedFiles = new Set<string>();
+    this.artifactIdList = [];
+
+    // Reset stores
+    this.#filesStore = new FilesStore(webcontainer);
+    this.#editorStore = new EditorStore(this.#filesStore);
+
+    // Update UI state
+    this.currentView.set('code');
+    this.unsavedFiles.set(new Set<string>());
+  }
+
   async pushToGitHub(repoName: string, githubUsername: string, ghToken: string) {
 
     try {
@@ -486,6 +542,21 @@ export class WorkbenchStore {
       console.error('Error pushing to GitHub:', error instanceof Error ? error.message : String(error));
     }
   }
+
+  async markFileAsModified(filePath: string) {
+    const file = this.#filesStore.getFile(filePath);
+    if (file?.type === 'file') {
+      // First collect all original content
+      const originalContent = file.content;
+      console.log(`Processing ${filePath}:`, originalContent);
+
+      // Then save modifications
+      await this.saveFile(filePath, originalContent);
+    }
+  }
+
+
+
 }
 
 export const workbenchStore = new WorkbenchStore();

From ccaa67b6b23dac0b67f67c67fef94fbca96482ed Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Sat, 30 Nov 2024 00:04:53 -0500
Subject: [PATCH 13/29] adjusting spaces for X button in file-preview

---
 app/components/chat/FilePreview.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
index 4c842ee..0500d03 100644
--- a/app/components/chat/FilePreview.tsx
+++ b/app/components/chat/FilePreview.tsx
@@ -1,7 +1,5 @@
-// Remove the lucide-react import
 import React from 'react';
 
-// Rest of the interface remains the same
 interface FilePreviewProps {
   files: File[];
   imageDataList: string[];
@@ -14,19 +12,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
   }
 
   return (
-    <div className="flex flex-row overflow-x-auto">
+    <div className="flex flex-row overflow-x-auto -mt-2">
       {files.map((file, index) => (
         <div key={file.name + file.size} className="mr-2 relative">
           {imageDataList[index] && (
-            <div className="relative">
+            <div className="relative pt-4 pr-4">
               <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
               <button
                 onClick={() => onRemove(index)}
-                className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
+                className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
               >
-                <div className="bg-black rounded-full p-1">
-                  <div className="i-ph:x w-3 h-3 text-gray-400" />
-                </div>
+                <div className="i-ph:x w-3 h-3 text-gray-200" />
               </button>
             </div>
           )}

From 34a8a39a3c39f25eb0269942b98f0b6ca6c11044 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Mon, 2 Dec 2024 18:30:21 +0530
Subject: [PATCH 14/29] added artifact bundling for custom long artifacts like
 uploading folder

---
 app/components/chat/Artifact.tsx           | 13 +++++++++++--
 app/components/chat/ImportFolderButton.tsx |  2 +-
 app/lib/runtime/message-parser.ts          |  2 ++
 app/lib/stores/workbench.ts                |  4 +++-
 app/types/artifact.ts                      |  1 +
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/components/chat/Artifact.tsx b/app/components/chat/Artifact.tsx
index 682a4c7..f26b1ee 100644
--- a/app/components/chat/Artifact.tsx
+++ b/app/components/chat/Artifact.tsx
@@ -59,6 +59,14 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             workbenchStore.showWorkbench.set(!showWorkbench);
           }}
         >
+          {artifact.type == 'bundled' && (
+            <>
+              <div className="p-4">
+                <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
+              </div>
+              <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+            </>
+          )}
           <div className="px-5 p-3.5 w-full text-left">
             <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
             <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
@@ -66,7 +74,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
         </button>
         <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
         <AnimatePresence>
-          {actions.length && (
+          {actions.length && artifact.type !== 'bundled' && (
             <motion.button
               initial={{ width: 0 }}
               animate={{ width: 'auto' }}
@@ -83,7 +91,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
         </AnimatePresence>
       </div>
       <AnimatePresence>
-        {showActions && actions.length > 0 && (
+        {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
           <motion.div
             className="actions"
             initial={{ height: 0 }}
@@ -92,6 +100,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             transition={{ duration: 0.15 }}
           >
             <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
             <div className="p-5 text-left bg-bolt-elements-actions-background">
               <ActionList actions={actions} />
             </div>
diff --git a/app/components/chat/ImportFolderButton.tsx b/app/components/chat/ImportFolderButton.tsx
index 5f822ee..b28ca51 100644
--- a/app/components/chat/ImportFolderButton.tsx
+++ b/app/components/chat/ImportFolderButton.tsx
@@ -79,7 +79,7 @@ ${content}
       role: 'assistant',
       content: `I'll help you set up these files.${binaryFilesMessage}
 
-<boltArtifact id="imported-files" title="Imported Files">
+<boltArtifact id="imported-files" title="Imported Files" type="bundled">
 ${fileArtifacts.join('\n\n')}
 </boltArtifact>`,
       id: generateId(),
diff --git a/app/lib/runtime/message-parser.ts b/app/lib/runtime/message-parser.ts
index 48f3f52..ab6b695 100644
--- a/app/lib/runtime/message-parser.ts
+++ b/app/lib/runtime/message-parser.ts
@@ -192,6 +192,7 @@ export class StreamingMessageParser {
               const artifactTag = input.slice(i, openTagEnd + 1);
 
               const artifactTitle = this.#extractAttribute(artifactTag, 'title') as string;
+              const type = this.#extractAttribute(artifactTag, 'type') as string;
               const artifactId = this.#extractAttribute(artifactTag, 'id') as string;
 
               if (!artifactTitle) {
@@ -207,6 +208,7 @@ export class StreamingMessageParser {
               const currentArtifact = {
                 id: artifactId,
                 title: artifactTitle,
+                type,
               } satisfies BoltArtifactData;
 
               state.currentArtifact = currentArtifact;
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
index cbb3f8a..a1de47e 100644
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -18,6 +18,7 @@ import { extractRelativePath } from '~/utils/diff';
 export interface ArtifactState {
   id: string;
   title: string;
+  type?: string;
   closed: boolean;
   runner: ActionRunner;
 }
@@ -229,7 +230,7 @@ export class WorkbenchStore {
     // TODO: what do we wanna do and how do we wanna recover from this?
   }
 
-  addArtifact({ messageId, title, id }: ArtifactCallbackData) {
+  addArtifact({ messageId, title, id,type }: ArtifactCallbackData) {
     const artifact = this.#getArtifact(messageId);
 
     if (artifact) {
@@ -244,6 +245,7 @@ export class WorkbenchStore {
       id,
       title,
       closed: false,
+      type,
       runner: new ActionRunner(webcontainer, () => this.boltTerminal),
     });
   }
diff --git a/app/types/artifact.ts b/app/types/artifact.ts
index e35697a..660729c 100644
--- a/app/types/artifact.ts
+++ b/app/types/artifact.ts
@@ -1,4 +1,5 @@
 export interface BoltArtifactData {
   id: string;
   title: string;
+  type?: string; 
 }

From 0ab334126a9520907a58383f36209cfa8208bfbd Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Mon, 2 Dec 2024 14:08:41 -0500
Subject: [PATCH 15/29] adding to display the image in the chat conversation.
 and paste image too. tnx to @Stijnus

---
 app/components/chat/BaseChat.tsx    | 30 +++++++++++++++++++++++
 app/components/chat/UserMessage.tsx | 38 +++++++++++++++++++++++------
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index f004b3d..5c086d4 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -190,6 +190,35 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       input.click();
     };
 
+    const handlePaste = async (e: React.ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+
+      if (!items) {
+        return;
+      }
+
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+
+          const file = item.getAsFile();
+
+          if (file) {
+            const reader = new FileReader();
+
+            reader.onload = (e) => {
+              const base64Image = e.target?.result as string;
+              setUploadedFiles?.([...uploadedFiles, file]);
+              setImageDataList?.([...imageDataList, base64Image]);
+            };
+            reader.readAsDataURL(file);
+          }
+
+          break;
+        }
+      }
+    };
+
     const baseChat = (
       <div
         ref={ref}
@@ -286,6 +315,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     onChange={(event) => {
                       handleInputChange?.(event);
                     }}
+                    onPaste={handlePaste}
                     style={{
                       minHeight: TEXTAREA_MIN_HEIGHT,
                       maxHeight: TEXTAREA_MAX_HEIGHT,
diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index 167ce87..3e6485b 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -6,10 +6,39 @@ import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 import { Markdown } from './Markdown';
 
 interface UserMessageProps {
-  content: string;
+  content: string | Array<{ type: string; text?: string; image?: string }>;
 }
 
 export function UserMessage({ content }: UserMessageProps) {
+  if (Array.isArray(content)) {
+    const textItem = content.find((item) => item.type === 'text');
+    const textContent = sanitizeUserMessage(textItem?.text || '');
+    const images = content.filter((item) => item.type === 'image' && item.image);
+
+    return (
+      <div className="overflow-hidden pt-[4px]">
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <Markdown limitedMarkdown>{textContent}</Markdown>
+          </div>
+          {images.length > 0 && (
+            <div className="flex-shrink-0 w-[160px]">
+              {images.map((item, index) => (
+                <div key={index} className="relative">
+                  <img
+                    src={item.image}
+                    alt={`Uploaded image ${index + 1}`}
+                    className="w-full h-[160px] rounded-lg object-cover border border-bolt-elements-borderColor"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   const textContent = sanitizeUserMessage(content);
 
   return (
@@ -19,11 +48,6 @@ export function UserMessage({ content }: UserMessageProps) {
   );
 }
 
-function sanitizeUserMessage(content: string | Array<{ type: string; text?: string; image_url?: { url: string } }>) {
-  if (Array.isArray(content)) {
-    const textItem = content.find((item) => item.type === 'text');
-    return textItem?.text?.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '') || '';
-  }
-
+function sanitizeUserMessage(content: string) {
   return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 }

From 1589d2a8f57143a05b7d2c9e7a03fc7fc1eca27c Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Tue, 3 Dec 2024 02:13:33 +0530
Subject: [PATCH 16/29] feat(Dynamic Models): together AI Dynamic Models

---
 app/lib/.server/llm/stream-text.ts | 18 +++----
 app/routes/api.chat.ts             | 14 ++---
 app/types/model.ts                 |  2 +-
 app/utils/constants.ts             | 83 ++++++++++++++++++++++++++++--
 app/utils/parseCookies.ts          | 19 +++++++
 vite.config.ts                     |  2 +-
 6 files changed, 113 insertions(+), 25 deletions(-)
 create mode 100644 app/utils/parseCookies.ts

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 3ef8792..bfb88c2 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -1,11 +1,8 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck – TODO: Provider proper types
-
 import { convertToCoreMessages, streamText as _streamText } from 'ai';
 import { getModel } from '~/lib/.server/llm/model';
 import { MAX_TOKENS } from './constants';
 import { getSystemPrompt } from './prompts';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER, MODEL_LIST, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, getModelList, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 
 interface ToolResult<Name extends string, Args, Result> {
   toolCallId: string;
@@ -32,7 +29,7 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
 
   // Extract provider
   const providerMatch = message.content.match(PROVIDER_REGEX);
-  const provider = providerMatch ? providerMatch[1] : DEFAULT_PROVIDER;
+  const provider = providerMatch ? providerMatch[1] : DEFAULT_PROVIDER.name;
 
   // Remove model and provider lines from content
   const cleanedContent = message.content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '').trim();
@@ -40,10 +37,10 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
   return { model, provider, content: cleanedContent };
 }
 
-export function streamText(messages: Messages, env: Env, options?: StreamingOptions, apiKeys?: Record<string, string>) {
+export async function streamText(messages: Messages, env: Env, options?: StreamingOptions,apiKeys?: Record<string, string>) {
   let currentModel = DEFAULT_MODEL;
-  let currentProvider = DEFAULT_PROVIDER;
-
+  let currentProvider = DEFAULT_PROVIDER.name;
+  const MODEL_LIST = await getModelList(apiKeys||{});   
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
@@ -51,7 +48,6 @@ export function streamText(messages: Messages, env: Env, options?: StreamingOpti
       if (MODEL_LIST.find((m) => m.name === model)) {
         currentModel = model;
       }
-
       currentProvider = provider;
 
       return { ...message, content };
@@ -65,10 +61,10 @@ export function streamText(messages: Messages, env: Env, options?: StreamingOpti
   const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS;
 
   return _streamText({
-    model: getModel(currentProvider, currentModel, env, apiKeys),
+    model: getModel(currentProvider, currentModel, env, apiKeys) as any,
     system: getSystemPrompt(),
     maxTokens: dynamicMaxTokens,
-    messages: convertToCoreMessages(processedMessages),
+    messages: convertToCoreMessages(processedMessages as any),
     ...options,
   });
 }
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index ac35a22..017ae92 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck – TODO: Provider proper types
-
 import { type ActionFunctionArgs } from '@remix-run/cloudflare';
 import { MAX_RESPONSE_SEGMENTS, MAX_TOKENS } from '~/lib/.server/llm/constants';
 import { CONTINUE_PROMPT } from '~/lib/.server/llm/prompts';
@@ -11,8 +8,8 @@ export async function action(args: ActionFunctionArgs) {
   return chatAction(args);
 }
 
-function parseCookies(cookieHeader) {
-  const cookies = {};
+function parseCookies(cookieHeader:string) {
+  const cookies:any = {};
 
   // Split the cookie string by semicolons and spaces
   const items = cookieHeader.split(';').map((cookie) => cookie.trim());
@@ -39,14 +36,13 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
   const cookieHeader = request.headers.get('Cookie');
 
   // Parse the cookie's value (returns an object or null if no cookie exists)
-  const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || '{}');
+  const apiKeys = JSON.parse(parseCookies(cookieHeader||"").apiKeys || '{}'); 
 
   const stream = new SwitchableStream();
 
   try {
     const options: StreamingOptions = {
       toolChoice: 'none',
-      apiKeys,
       onFinish: async ({ text: content, finishReason }) => {
         if (finishReason !== 'length') {
           return stream.close();
@@ -63,7 +59,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         messages.push({ role: 'assistant', content });
         messages.push({ role: 'user', content: CONTINUE_PROMPT });
 
-        const result = await streamText(messages, context.cloudflare.env, options);
+        const result = await streamText(messages, context.cloudflare.env, options,apiKeys);
 
         return stream.switchSource(result.toAIStream());
       },
@@ -79,7 +75,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         contentType: 'text/plain; charset=utf-8',
       },
     });
-  } catch (error) {
+  } catch (error:any) {
     console.log(error);
 
     if (error.message?.includes('API key')) {
diff --git a/app/types/model.ts b/app/types/model.ts
index 32522c6..29bff2e 100644
--- a/app/types/model.ts
+++ b/app/types/model.ts
@@ -3,7 +3,7 @@ import type { ModelInfo } from '~/utils/types';
 export type ProviderInfo = {
   staticModels: ModelInfo[];
   name: string;
-  getDynamicModels?: () => Promise<ModelInfo[]>;
+  getDynamicModels?: (apiKeys?: Record<string, string>) => Promise<ModelInfo[]>;
   getApiKeyLink?: string;
   labelForGetApiKey?: string;
   icon?: string;
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 1120bc1..81a6457 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -1,3 +1,5 @@
+import Cookies from 'js-cookie';
+import { parseCookies } from './parseCookies';
 import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
 import type { ProviderInfo } from '~/types/model';
 
@@ -262,6 +264,7 @@ const PROVIDER_LIST: ProviderInfo[] = [
   },
   {
     name: 'Together',
+    getDynamicModels: getTogetherModels, 
     staticModels: [
       {
         name: 'Qwen/Qwen2.5-Coder-32B-Instruct',
@@ -293,6 +296,61 @@ const staticModels: ModelInfo[] = PROVIDER_LIST.map((p) => p.staticModels).flat(
 
 export let MODEL_LIST: ModelInfo[] = [...staticModels];
 
+
+export async function getModelList(apiKeys: Record<string, string>) {
+  MODEL_LIST = [
+    ...(
+      await Promise.all(
+        PROVIDER_LIST.filter(
+          (p): p is ProviderInfo & { getDynamicModels: () => Promise<ModelInfo[]> } => !!p.getDynamicModels,
+        ).map((p) => p.getDynamicModels(apiKeys)),
+      )
+    ).flat(),
+    ...staticModels,
+  ];
+  return MODEL_LIST;
+}
+
+async function getTogetherModels(apiKeys?: Record<string, string>): Promise<ModelInfo[]> {
+  try {
+    let baseUrl = import.meta.env.TOGETHER_API_BASE_URL || '';
+    let provider='Together'
+
+  if (!baseUrl) {
+    return [];
+  }
+  let apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? ''
+
+  if (apiKeys && apiKeys[provider]) {
+    apiKey = apiKeys[provider];
+  }
+
+  if (!apiKey) {
+    return [];
+  }
+
+  const response = await fetch(`${baseUrl}/models`, {
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+    },
+  });
+  const res = (await response.json()) as any;
+    let data: any[] = (res || []).filter((model: any) => model.type=='chat')
+  return data.map((m: any) => ({
+    name: m.id,
+    label: `${m.display_name} - in:$${(m.pricing.input).toFixed(
+      2,
+    )} out:$${(m.pricing.output).toFixed(2)} - context ${Math.floor(m.context_length / 1000)}k`,
+    provider: provider,
+    maxTokenAllowed: 8000, 
+  }));
+} catch (e) {
+  console.error('Error getting OpenAILike models:', e);
+  return [];
+}
+}
+
+
 const getOllamaBaseUrl = () => {
   const defaultBaseUrl = import.meta.env.OLLAMA_API_BASE_URL || 'http://localhost:11434';
 
@@ -339,8 +397,13 @@ async function getOpenAILikeModels(): Promise<ModelInfo[]> {
     if (!baseUrl) {
       return [];
     }
+    let apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
+    
+    let apikeys = JSON.parse(Cookies.get('apiKeys')||'{}')
+    if (apikeys && apikeys['OpenAILike']){
+      apiKey = apikeys['OpenAILike'];
+    }
 
-    const apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
     const response = await fetch(`${baseUrl}/models`, {
       headers: {
         Authorization: `Bearer ${apiKey}`,
@@ -396,7 +459,6 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
   if (typeof window === 'undefined') {
     return [];
   }
-
   try {
     const baseUrl = import.meta.env.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
     const response = await fetch(`${baseUrl}/v1/models`);
@@ -414,12 +476,27 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
 }
 
 async function initializeModelList(): Promise<ModelInfo[]> {
+  let apiKeys: Record<string, string> = {};
+  try {
+    const storedApiKeys = Cookies.get('apiKeys');
+
+    if (storedApiKeys) {
+      const parsedKeys = JSON.parse(storedApiKeys);
+
+      if (typeof parsedKeys === 'object' && parsedKeys !== null) {
+        apiKeys = parsedKeys;
+      }
+    }
+    
+  } catch (error) {
+    
+  }
   MODEL_LIST = [
     ...(
       await Promise.all(
         PROVIDER_LIST.filter(
           (p): p is ProviderInfo & { getDynamicModels: () => Promise<ModelInfo[]> } => !!p.getDynamicModels,
-        ).map((p) => p.getDynamicModels()),
+        ).map((p) => p.getDynamicModels(apiKeys)),
       )
     ).flat(),
     ...staticModels,
diff --git a/app/utils/parseCookies.ts b/app/utils/parseCookies.ts
new file mode 100644
index 0000000..235adc3
--- /dev/null
+++ b/app/utils/parseCookies.ts
@@ -0,0 +1,19 @@
+export function parseCookies(cookieHeader: string) {
+    const cookies: any = {};
+
+    // Split the cookie string by semicolons and spaces
+    const items = cookieHeader.split(';').map((cookie) => cookie.trim());
+
+    items.forEach((item) => {
+        const [name, ...rest] = item.split('=');
+
+        if (name && rest) {
+            // Decode the name and value, and join value parts in case it contains '='
+            const decodedName = decodeURIComponent(name.trim());
+            const decodedValue = decodeURIComponent(rest.join('=').trim());
+            cookies[decodedName] = decodedValue;
+        }
+    });
+
+    return cookies;
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 5f86830..1bb08d3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,7 +28,7 @@ export default defineConfig((config) => {
       chrome129IssuePlugin(),
       config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
     ],
-    envPrefix:["VITE_","OPENAI_LIKE_API_","OLLAMA_API_BASE_URL","LMSTUDIO_API_BASE_URL"],
+    envPrefix: ["VITE_", "OPENAI_LIKE_API_", "OLLAMA_API_BASE_URL", "LMSTUDIO_API_BASE_URL","TOGETHER_API_BASE_URL"],
     css: {
       preprocessorOptions: {
         scss: {

From 7192690c1cec4a87275d031df05c6861e43f84d9 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Tue, 3 Dec 2024 02:19:30 +0530
Subject: [PATCH 17/29] clean up

---
 app/utils/constants.ts    |  1 -
 app/utils/parseCookies.ts | 19 -------------------
 2 files changed, 20 deletions(-)
 delete mode 100644 app/utils/parseCookies.ts

diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 81a6457..7109a93 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -1,5 +1,4 @@
 import Cookies from 'js-cookie';
-import { parseCookies } from './parseCookies';
 import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
 import type { ProviderInfo } from '~/types/model';
 
diff --git a/app/utils/parseCookies.ts b/app/utils/parseCookies.ts
deleted file mode 100644
index 235adc3..0000000
--- a/app/utils/parseCookies.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export function parseCookies(cookieHeader: string) {
-    const cookies: any = {};
-
-    // Split the cookie string by semicolons and spaces
-    const items = cookieHeader.split(';').map((cookie) => cookie.trim());
-
-    items.forEach((item) => {
-        const [name, ...rest] = item.split('=');
-
-        if (name && rest) {
-            // Decode the name and value, and join value parts in case it contains '='
-            const decodedName = decodeURIComponent(name.trim());
-            const decodedValue = decodeURIComponent(rest.join('=').trim());
-            cookies[decodedName] = decodedValue;
-        }
-    });
-
-    return cookies;
-}
\ No newline at end of file

From 5adc0f681c60b15e69da97dadfccf8efd3707259 Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Mon, 2 Dec 2024 20:27:10 -0500
Subject: [PATCH 18/29] adding drag and drop images to text area

---
 app/components/chat/BaseChat.tsx | 38 +++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 233aa66..749af6c 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -351,9 +351,41 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 >
                   <textarea
                     ref={textareaRef}
-                    className={
-                      'w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm'
-                    }
+                    className={classNames(
+                      'w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm',
+                      'transition-all duration-200',
+                      'hover:border-bolt-elements-focus',
+                    )}
+                    onDragEnter={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.style.border = '2px solid #1488fc';
+                    }}
+                    onDragOver={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.style.border = '2px solid #1488fc';
+                    }}
+                    onDragLeave={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+
+                      const files = Array.from(e.dataTransfer.files);
+                      files.forEach((file) => {
+                        if (file.type.startsWith('image/')) {
+                          const reader = new FileReader();
+
+                          reader.onload = (e) => {
+                            const base64Image = e.target?.result as string;
+                            setUploadedFiles?.([...uploadedFiles, file]);
+                            setImageDataList?.([...imageDataList, base64Image]);
+                          };
+                          reader.readAsDataURL(file);
+                        }
+                      });
+                    }}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
                         if (event.shiftKey) {

From fee629d8cd8b49290564f31a06b9cc86ba12a702 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Tue, 3 Dec 2024 11:28:23 +0530
Subject: [PATCH 19/29] fixed test cases

---
 .../__snapshots__/message-parser.spec.ts.snap  | 18 ++++++++++++++++++
 app/lib/runtime/message-parser.spec.ts         |  6 +++++-
 app/lib/stores/workbench.ts                    |  2 +-
 app/types/artifact.ts                          |  2 +-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap b/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap
index 1543770..4b60f10 100644
--- a/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap
+++ b/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap
@@ -29,6 +29,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -37,6 +38,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -96,6 +98,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -104,6 +107,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -112,6 +116,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -120,6 +125,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -128,6 +134,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": "bundled",
 }
 `;
 
@@ -136,6 +143,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": "bundled",
 }
 `;
 
@@ -144,6 +152,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -152,6 +161,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -160,6 +170,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -168,6 +179,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -176,6 +188,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -184,6 +197,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -192,6 +206,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -200,6 +215,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -208,6 +224,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
 
@@ -216,5 +233,6 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre
   "id": "artifact_1",
   "messageId": "message_1",
   "title": "Some title",
+  "type": undefined,
 }
 `;
diff --git a/app/lib/runtime/message-parser.spec.ts b/app/lib/runtime/message-parser.spec.ts
index 739604b..4c5ba47 100644
--- a/app/lib/runtime/message-parser.spec.ts
+++ b/app/lib/runtime/message-parser.spec.ts
@@ -59,7 +59,11 @@ describe('StreamingMessageParser', () => {
         },
       ],
       [
-        ['Some text before <boltArti', 'fact', ' title="Some title" id="artifact_1">foo</boltArtifact> Some more text'],
+        [
+          'Some text before <boltArti',
+          'fact',
+          ' title="Some title" id="artifact_1" type="bundled" >foo</boltArtifact> Some more text',
+        ],
         {
           output: 'Some text before  Some more text',
           callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
index 8b13c7b..de3a11e 100644
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -231,7 +231,7 @@ export class WorkbenchStore {
     // TODO: what do we wanna do and how do we wanna recover from this?
   }
 
-  addArtifact({ messageId, title, id,type }: ArtifactCallbackData) {
+  addArtifact({ messageId, title, id, type }: ArtifactCallbackData) {
     const artifact = this.#getArtifact(messageId);
 
     if (artifact) {
diff --git a/app/types/artifact.ts b/app/types/artifact.ts
index 660729c..3a1e6b9 100644
--- a/app/types/artifact.ts
+++ b/app/types/artifact.ts
@@ -1,5 +1,5 @@
 export interface BoltArtifactData {
   id: string;
   title: string;
-  type?: string; 
+  type?: string | undefined;
 }

From 4139dbd0df82397319759ea6d572540dcf4cda52 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Tue, 3 Dec 2024 11:28:43 +0530
Subject: [PATCH 20/29] added nvm for husky

---
 .husky/pre-commit | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 966a4ad..74ea6e6 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -2,6 +2,9 @@
 
 echo "🔍 Running pre-commit hook to check the code looks good... 🔍"
 
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # Load nvm if you're using i
+
 if ! pnpm typecheck; then
     echo "❌ Type checking failed! Please review TypeScript types."
     echo "Once you're done, don't forget to add your changes to the commit! 🚀"

From e5d52de5a573f886778e4ee8fa821f79cc3026f2 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Wed, 4 Dec 2024 17:56:50 +0200
Subject: [PATCH 21/29] Hardcode url for together ai as fallback if not set in
 env

---
 app/lib/.server/llm/api-key.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/lib/.server/llm/api-key.ts b/app/lib/.server/llm/api-key.ts
index b06acb8..30cf2cd 100644
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -51,7 +51,7 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
 export function getBaseURL(cloudflareEnv: Env, provider: string) {
   switch (provider) {
     case 'Together':
-      return env.TOGETHER_API_BASE_URL || cloudflareEnv.TOGETHER_API_BASE_URL;
+      return env.TOGETHER_API_BASE_URL || cloudflareEnv.TOGETHER_API_BASE_URL || 'https://api.together.xyz/v1';
     case 'OpenAILike':
       return env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
     case 'LMStudio':

From 5a66a830e329a9f3bc0b21939bf05a7a8f8e4436 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Wed, 4 Dec 2024 17:56:55 +0200
Subject: [PATCH 22/29] Hardcode url for together ai as fallback if not set in
 env

---
 app/components/chat/BaseChat.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 730a158..5e213a6 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -255,7 +255,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     </button>
                   </div>
 
-
                   <div className={isModelSettingsCollapsed ? 'hidden' : ''}>
                     <ModelSelector
                       key={provider?.name + ':' + modelList.length}

From 67862d4080bcd6f02380e2720b3d7c2cef73d2da Mon Sep 17 00:00:00 2001
From: Cole Medin <47287758+coleam00@users.noreply.github.com>
Date: Wed, 4 Dec 2024 10:57:07 -0600
Subject: [PATCH 23/29] Updating README now that image attaching is merged,
 changing order of items in README list.

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 600acc1..33f861f 100644
--- a/README.md
+++ b/README.md
@@ -40,18 +40,18 @@ https://thinktank.ottomator.ai
 - ✅ Together Integration (@mouimet-infinisoft)
 - ✅ Mobile friendly (@qwikode)
 - ✅ Better prompt enhancing (@SujalXplores)
-- ⬜ **HIGH PRIORITY** - ALMOST DONE - Attach images to prompts (@atrokhym)
+- ✅ Attach images to prompts (@atrokhym)
 - ⬜ **HIGH PRIORITY** - Prevent Bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
-- ⬜ Azure Open AI API Integration
-- ⬜ Perplexity Integration
-- ⬜ Vertex AI Integration
 - ⬜ Deploy directly to Vercel/Netlify/other similar platforms
 - ⬜ Have LLM plan the project in a MD file for better results/transparency
 - ⬜ VSCode Integration with git-like confirmations
 - ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc.
 - ⬜ Voice prompting
+- ⬜ Azure Open AI API Integration
+- ⬜ Perplexity Integration
+- ⬜ Vertex AI Integration
 
 ## Bolt.new: AI-Powered Full-Stack Web Development in the Browser
 

From 2fd0c06ed4f40765851d6592acf25a6f533cfac0 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Wed, 4 Dec 2024 20:51:27 +0200
Subject: [PATCH 24/29] Split code a little bit

---
 app/components/chat/BaseChat.tsx          | 66 +----------------------
 app/components/chat/ModelSelector.tsx     | 63 ++++++++++++++++++++++
 app/components/chat/SpeechRecognition.tsx | 28 ++++++++++
 3 files changed, 93 insertions(+), 64 deletions(-)
 create mode 100644 app/components/chat/ModelSelector.tsx
 create mode 100644 app/components/chat/SpeechRecognition.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 9865d69..8c7589a 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -23,45 +23,8 @@ import { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButto
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 
 import FilePreview from './FilePreview';
-
-// @ts-ignore TODO: Introduce proper types
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList, apiKeys }) => {
-  return (
-    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
-      <select
-        value={provider?.name}
-        onChange={(e) => {
-          setProvider(providerList.find((p: ProviderInfo) => p.name === e.target.value));
-
-          const firstModel = [...modelList].find((m) => m.provider == e.target.value);
-          setModel(firstModel ? firstModel.name : '');
-        }}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
-      >
-        {providerList.map((provider: ProviderInfo) => (
-          <option key={provider.name} value={provider.name}>
-            {provider.name}
-          </option>
-        ))}
-      </select>
-      <select
-        key={provider?.name}
-        value={model}
-        onChange={(e) => setModel(e.target.value)}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%]"
-      >
-        {[...modelList]
-          .filter((e) => e.provider == provider?.name && e.name)
-          .map((modelOption) => (
-            <option key={modelOption.name} value={modelOption.name}>
-              {modelOption.label}
-            </option>
-          ))}
-      </select>
-    </div>
-  );
-};
+import { ModelSelector } from '~/components/chat/ModelSelector';
+import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -93,31 +56,6 @@ interface BaseChatProps {
   setImageDataList?: (dataList: string[]) => void;
 }
 
-const SpeechRecognitionButton = ({
-  isListening,
-  onStart,
-  onStop,
-  disabled,
-}: {
-  isListening: boolean;
-  onStart: () => void;
-  onStop: () => void;
-  disabled: boolean;
-}) => {
-  return (
-    <IconButton
-      title={isListening ? 'Stop listening' : 'Start speech recognition'}
-      disabled={disabled}
-      className={classNames('transition-all', {
-        'text-bolt-elements-item-contentAccent': isListening,
-      })}
-      onClick={isListening ? onStop : onStart}
-    >
-      {isListening ? <div className="i-ph:microphone-slash text-xl" /> : <div className="i-ph:microphone text-xl" />}
-    </IconButton>
-  );
-};
-
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
     {
diff --git a/app/components/chat/ModelSelector.tsx b/app/components/chat/ModelSelector.tsx
new file mode 100644
index 0000000..1bc7a66
--- /dev/null
+++ b/app/components/chat/ModelSelector.tsx
@@ -0,0 +1,63 @@
+import type { ProviderInfo } from '~/types/model';
+import type { ModelInfo } from '~/utils/types';
+
+interface ModelSelectorProps {
+  model?: string;
+  setModel?: (model: string) => void;
+  provider?: ProviderInfo;
+  setProvider?: (provider: ProviderInfo) => void;
+  modelList: ModelInfo[];
+  providerList: ProviderInfo[];
+  apiKeys: Record<string, string>;
+}
+
+export const ModelSelector = ({
+  model,
+  setModel,
+  provider,
+  setProvider,
+  modelList,
+  providerList,
+}: ModelSelectorProps) => {
+  return (
+    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
+      <select
+        value={provider?.name ?? ''}
+        onChange={(e) => {
+          const newProvider = providerList.find((p: ProviderInfo) => p.name === e.target.value);
+
+          if (newProvider && setProvider) {
+            setProvider(newProvider);
+          }
+
+          const firstModel = [...modelList].find((m) => m.provider === e.target.value);
+
+          if (firstModel && setModel) {
+            setModel(firstModel.name);
+          }
+        }}
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
+      >
+        {providerList.map((provider: ProviderInfo) => (
+          <option key={provider.name} value={provider.name}>
+            {provider.name}
+          </option>
+        ))}
+      </select>
+      <select
+        key={provider?.name}
+        value={model}
+        onChange={(e) => setModel?.(e.target.value)}
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%]"
+      >
+        {[...modelList]
+          .filter((e) => e.provider == provider?.name && e.name)
+          .map((modelOption) => (
+            <option key={modelOption.name} value={modelOption.name}>
+              {modelOption.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
diff --git a/app/components/chat/SpeechRecognition.tsx b/app/components/chat/SpeechRecognition.tsx
new file mode 100644
index 0000000..18c66c7
--- /dev/null
+++ b/app/components/chat/SpeechRecognition.tsx
@@ -0,0 +1,28 @@
+import { IconButton } from '~/components/ui/IconButton';
+import { classNames } from '~/utils/classNames';
+import React from 'react';
+
+export const SpeechRecognitionButton = ({
+  isListening,
+  onStart,
+  onStop,
+  disabled,
+}: {
+  isListening: boolean;
+  onStart: () => void;
+  onStop: () => void;
+  disabled: boolean;
+}) => {
+  return (
+    <IconButton
+      title={isListening ? 'Stop listening' : 'Start speech recognition'}
+      disabled={disabled}
+      className={classNames('transition-all', {
+        'text-bolt-elements-item-contentAccent': isListening,
+      })}
+      onClick={isListening ? onStop : onStart}
+    >
+      {isListening ? <div className="i-ph:microphone-slash text-xl" /> : <div className="i-ph:microphone text-xl" />}
+    </IconButton>
+  );
+};

From d1ae3477f0c2ef37ee6a4e1dff5b59d8af06520d Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Wed, 4 Dec 2024 20:55:46 +0200
Subject: [PATCH 25/29] lock file

---
 pnpm-lock.yaml | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95bf9b0..1bf0c53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -222,6 +222,9 @@ importers:
       '@types/diff':
         specifier: ^5.2.3
         version: 5.2.3
+      '@types/dom-speech-recognition':
+        specifier: ^0.0.4
+        version: 0.0.4
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -2039,6 +2042,9 @@ packages:
   '@types/diff@5.2.3':
     resolution: {integrity: sha512-K0Oqlrq3kQMaO2RhfrNQX5trmt+XLyom88zS0u84nnIcLvFnRUMRRHmrGny5GSM+kNO9IZLARsdQHDzkhAgmrQ==}
 
+  '@types/dom-speech-recognition@0.0.4':
+    resolution: {integrity: sha512-zf2GwV/G6TdaLwpLDcGTIkHnXf8JEf/viMux+khqKQKDa8/8BAUtXXZS563GnvJ4Fg0PBLGAaFf2GekEVSZ6GQ==}
+
   '@types/eslint@8.56.10':
     resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==}
 
@@ -7464,6 +7470,8 @@ snapshots:
 
   '@types/diff@5.2.3': {}
 
+  '@types/dom-speech-recognition@0.0.4': {}
+
   '@types/eslint@8.56.10':
     dependencies:
       '@types/estree': 1.0.6
@@ -7812,7 +7820,7 @@ snapshots:
       '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
       '@vanilla-extract/babel-plugin-debug-ids': 1.1.0
       '@vanilla-extract/css': 1.16.1
-      esbuild: 0.17.6
+      esbuild: 0.17.19
       eval: 0.1.8
       find-up: 5.0.0
       javascript-stringify: 2.1.0

From a8903cec11ef1c2a2c3dbd31bc8954727812967c Mon Sep 17 00:00:00 2001
From: JonathanGardner <jjgardner04@icloud.com>
Date: Thu, 5 Dec 2024 04:23:16 -0500
Subject: [PATCH 26/29] Added Fullscreen and Resizing to Preview

---
 app/components/workbench/Preview.tsx | 258 +++++++++++++++++++++++++--
 1 file changed, 240 insertions(+), 18 deletions(-)

diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index 4c1877c..b8c2d90 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -4,11 +4,16 @@ import { IconButton } from '~/components/ui/IconButton';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { PortDropdown } from './PortDropdown';
 
+type ResizeSide = 'left' | 'right' | null;
+
 export const Preview = memo(() => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+
   const [activePreviewIndex, setActivePreviewIndex] = useState(0);
   const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const hasSelectedPreview = useRef(false);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
@@ -16,26 +21,40 @@ export const Preview = memo(() => {
   const [url, setUrl] = useState('');
   const [iframeUrl, setIframeUrl] = useState<string | undefined>();
 
+  // Toggle between responsive mode and device mode
+  const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
+
+  // Use percentage for width
+  const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
+  // Height is always 100%
+  const height = '100%';
+
+  const resizingState = useRef({
+    isResizing: false,
+    side: null as ResizeSide,
+    startX: 0,
+    startWidthPercent: 37.5,
+    windowWidth: window.innerWidth,
+  });
+
+  // Define the scaling factor
+  const SCALING_FACTOR = 2; // Adjust this value to increase/decrease sensitivity
+
   useEffect(() => {
     if (!activePreview) {
       setUrl('');
       setIframeUrl(undefined);
-
       return;
     }
 
     const { baseUrl } = activePreview;
-
     setUrl(baseUrl);
     setIframeUrl(baseUrl);
-  }, [activePreview, iframeUrl]);
+  }, [activePreview]);
 
   const validateUrl = useCallback(
     (value: string) => {
-      if (!activePreview) {
-        return false;
-      }
-
+      if (!activePreview) return false;
       const { baseUrl } = activePreview;
 
       if (value === baseUrl) {
@@ -56,14 +75,13 @@ export const Preview = memo(() => {
     [],
   );
 
-  // when previews change, display the lowest port if user hasn't selected a preview
+  // When previews change, display the lowest port if user hasn't selected a preview
   useEffect(() => {
     if (previews.length > 1 && !hasSelectedPreview.current) {
       const minPortIndex = previews.reduce(findMinPortIndex, 0);
-
       setActivePreviewIndex(minPortIndex);
     }
-  }, [previews]);
+  }, [previews, findMinPortIndex]);
 
   const reloadPreview = () => {
     if (iframeRef.current) {
@@ -71,13 +89,129 @@ export const Preview = memo(() => {
     }
   };
 
+  const toggleFullscreen = async () => {
+    if (!isFullscreen && containerRef.current) {
+      await containerRef.current.requestFullscreen();
+    } else if (document.fullscreenElement) {
+      await document.exitFullscreen();
+    }
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  const toggleDeviceMode = () => {
+    setIsDeviceModeOn((prev) => !prev);
+  };
+
+  const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
+    if (!isDeviceModeOn) return;
+
+    // Prevent text selection
+    document.body.style.userSelect = 'none';
+
+    resizingState.current.isResizing = true;
+    resizingState.current.side = side;
+    resizingState.current.startX = e.clientX;
+    resizingState.current.startWidthPercent = widthPercent;
+    resizingState.current.windowWidth = window.innerWidth;
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    e.preventDefault(); // Prevent any text selection on mousedown
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!resizingState.current.isResizing) return;
+    const dx = e.clientX - resizingState.current.startX;
+    const windowWidth = resizingState.current.windowWidth;
+
+    // Apply scaling factor to increase sensitivity
+    const dxPercent = ((dx / windowWidth) * 100) * SCALING_FACTOR;
+
+    let newWidthPercent = resizingState.current.startWidthPercent;
+
+    if (resizingState.current.side === 'right') {
+      newWidthPercent = resizingState.current.startWidthPercent + dxPercent;
+    } else if (resizingState.current.side === 'left') {
+      newWidthPercent = resizingState.current.startWidthPercent - dxPercent;
+    }
+
+    // Clamp the width between 10% and 90%
+    newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
+
+    setWidthPercent(newWidthPercent);
+  };
+
+  const onMouseUp = () => {
+    resizingState.current.isResizing = false;
+    resizingState.current.side = null;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+
+    // Restore text selection
+    document.body.style.userSelect = '';
+  };
+
+  // Handle window resize to ensure widthPercent remains valid
+  useEffect(() => {
+    const handleWindowResize = () => {
+      // Optional: Adjust widthPercent if necessary
+      // For now, since widthPercent is relative, no action is needed
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+
+  // A small helper component for the handle's "grip" icon
+  const GripIcon = () => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        pointerEvents: 'none',
+      }}
+    >
+      <div
+        style={{
+          color: 'rgba(0,0,0,0.5)',
+          fontSize: '10px',
+          lineHeight: '5px',
+          userSelect: 'none',
+          marginLeft: '1px',
+        }}
+      >
+        •••
+        •••
+      </div>
+    </div>
+  );
+
   return (
-    <div className="w-full h-full flex flex-col">
+    <div ref={containerRef} className="w-full h-full flex flex-col relative">
       {isPortDropdownOpen && (
-        <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
+        <div
+          className="z-iframe-overlay w-full h-full absolute"
+          onClick={() => setIsPortDropdownOpen(false)}
+        />
       )}
       <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
+
         <div
           className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
         focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
@@ -101,6 +235,7 @@ export const Preview = memo(() => {
             }}
           />
         </div>
+
         {previews.length > 1 && (
           <PortDropdown
             activePreviewIndex={activePreviewIndex}
@@ -111,13 +246,100 @@ export const Preview = memo(() => {
             previews={previews}
           />
         )}
+
+        {/* Device mode toggle button */}
+        <IconButton
+          icon="i-ph:devices"
+          onClick={toggleDeviceMode}
+          title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
+        />
+
+        {/* Fullscreen toggle button */}
+        <IconButton
+          icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
+          onClick={toggleFullscreen}
+          title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+        />
       </div>
-      <div className="flex-1 border-t border-bolt-elements-borderColor">
-        {activePreview ? (
-          <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} />
-        ) : (
-          <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
-        )}
+
+      <div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
+        <div
+          style={{
+            width: isDeviceModeOn ? `${widthPercent}%` : '100%',
+            height: '100%', // Always full height
+            overflow: 'visible',
+            background: '#fff',
+            position: 'relative',
+            display: 'flex',
+          }}
+        >
+          {activePreview ? (
+            <iframe
+              ref={iframeRef}
+              className="border-none w-full h-full bg-white"
+              src={iframeUrl}
+              allowFullScreen
+            />
+          ) : (
+            <div className="flex w-full h-full justify-center items-center bg-white">
+              No preview available
+            </div>
+          )}
+
+          {isDeviceModeOn && (
+            <>
+              {/* Left handle */}
+              <div
+                onMouseDown={(e) => startResizing(e, 'left')}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '15px',
+                  marginLeft: '-15px',
+                  height: '100%',
+                  cursor: 'ew-resize',
+                  background: 'rgba(255,255,255,.2)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'background 0.2s',
+                  userSelect: 'none',
+                }}
+                onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
+                onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
+                title="Drag to resize width"
+              >
+                <GripIcon />
+              </div>
+
+              {/* Right handle */}
+              <div
+                onMouseDown={(e) => startResizing(e, 'right')}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  width: '15px',
+                  marginRight: '-15px',
+                  height: '100%',
+                  cursor: 'ew-resize',
+                  background: 'rgba(255,255,255,.2)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'background 0.2s',
+                  userSelect: 'none',
+                }}
+                onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
+                onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
+                title="Drag to resize width"
+              >
+                <GripIcon />
+              </div>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

From b6eef57ab31c1c91ca20811a3302c9640c363ac3 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Thu, 5 Dec 2024 12:17:12 +0200
Subject: [PATCH 27/29] Lint fix

---
 app/components/workbench/Preview.tsx | 46 ++++++++++++++--------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index b8c2d90..8235bc2 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -26,8 +26,6 @@ export const Preview = memo(() => {
 
   // Use percentage for width
   const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
-  // Height is always 100%
-  const height = '100%';
 
   const resizingState = useRef({
     isResizing: false,
@@ -44,6 +42,7 @@ export const Preview = memo(() => {
     if (!activePreview) {
       setUrl('');
       setIframeUrl(undefined);
+
       return;
     }
 
@@ -54,7 +53,10 @@ export const Preview = memo(() => {
 
   const validateUrl = useCallback(
     (value: string) => {
-      if (!activePreview) return false;
+      if (!activePreview) {
+        return false;
+      }
+
       const { baseUrl } = activePreview;
 
       if (value === baseUrl) {
@@ -103,6 +105,7 @@ export const Preview = memo(() => {
     };
 
     document.addEventListener('fullscreenchange', handleFullscreenChange);
+
     return () => {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
     };
@@ -113,7 +116,9 @@ export const Preview = memo(() => {
   };
 
   const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
-    if (!isDeviceModeOn) return;
+    if (!isDeviceModeOn) {
+      return;
+    }
 
     // Prevent text selection
     document.body.style.userSelect = 'none';
@@ -131,12 +136,15 @@ export const Preview = memo(() => {
   };
 
   const onMouseMove = (e: MouseEvent) => {
-    if (!resizingState.current.isResizing) return;
+    if (!resizingState.current.isResizing) {
+      return;
+    }
+
     const dx = e.clientX - resizingState.current.startX;
     const windowWidth = resizingState.current.windowWidth;
 
     // Apply scaling factor to increase sensitivity
-    const dxPercent = ((dx / windowWidth) * 100) * SCALING_FACTOR;
+    const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
 
     let newWidthPercent = resizingState.current.startWidthPercent;
 
@@ -165,11 +173,14 @@ export const Preview = memo(() => {
   // Handle window resize to ensure widthPercent remains valid
   useEffect(() => {
     const handleWindowResize = () => {
-      // Optional: Adjust widthPercent if necessary
-      // For now, since widthPercent is relative, no action is needed
+      /*
+       * Optional: Adjust widthPercent if necessary
+       * For now, since widthPercent is relative, no action is needed
+       */
     };
 
     window.addEventListener('resize', handleWindowResize);
+
     return () => {
       window.removeEventListener('resize', handleWindowResize);
     };
@@ -195,8 +206,7 @@ export const Preview = memo(() => {
           marginLeft: '1px',
         }}
       >
-        •••
-        •••
+        ••• •••
       </div>
     </div>
   );
@@ -204,10 +214,7 @@ export const Preview = memo(() => {
   return (
     <div ref={containerRef} className="w-full h-full flex flex-col relative">
       {isPortDropdownOpen && (
-        <div
-          className="z-iframe-overlay w-full h-full absolute"
-          onClick={() => setIsPortDropdownOpen(false)}
-        />
+        <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
       )}
       <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
@@ -274,16 +281,9 @@ export const Preview = memo(() => {
           }}
         >
           {activePreview ? (
-            <iframe
-              ref={iframeRef}
-              className="border-none w-full h-full bg-white"
-              src={iframeUrl}
-              allowFullScreen
-            />
+            <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
           ) : (
-            <div className="flex w-full h-full justify-center items-center bg-white">
-              No preview available
-            </div>
+            <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
           )}
 
           {isDeviceModeOn && (

From 7efad132844218aee3b03a7ddf3f878fcf4cf9cf Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Fri, 6 Dec 2024 16:58:04 +0530
Subject: [PATCH 28/29] list fix

---
 app/lib/.server/llm/stream-text.ts | 10 +++-
 app/routes/api.chat.ts             | 12 ++--
 app/utils/constants.ts             | 88 ++++++++++++++++--------------
 3 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 4b2b5b4..f408ba2 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -58,10 +58,15 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
   return { model, provider, content: cleanedContent };
 }
 
-export async function streamText(messages: Messages, env: Env, options?: StreamingOptions,apiKeys?: Record<string, string>) {
+export async function streamText(
+  messages: Messages,
+  env: Env,
+  options?: StreamingOptions,
+  apiKeys?: Record<string, string>,
+) {
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER.name;
-  const MODEL_LIST = await getModelList(apiKeys||{});   
+  const MODEL_LIST = await getModelList(apiKeys || {});
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
@@ -69,6 +74,7 @@ export async function streamText(messages: Messages, env: Env, options?: Streami
       if (MODEL_LIST.find((m) => m.name === model)) {
         currentModel = model;
       }
+
       currentProvider = provider;
 
       return { ...message, content };
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 81d3035..0073274 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -8,8 +8,8 @@ export async function action(args: ActionFunctionArgs) {
   return chatAction(args);
 }
 
-function parseCookies(cookieHeader:string) {
-  const cookies:any = {};
+function parseCookies(cookieHeader: string) {
+  const cookies: any = {};
 
   // Split the cookie string by semicolons and spaces
   const items = cookieHeader.split(';').map((cookie) => cookie.trim());
@@ -29,7 +29,7 @@ function parseCookies(cookieHeader:string) {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages, model } = await request.json<{
+  const { messages } = await request.json<{
     messages: Messages;
     model: string;
   }>();
@@ -37,7 +37,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
   const cookieHeader = request.headers.get('Cookie');
 
   // Parse the cookie's value (returns an object or null if no cookie exists)
-  const apiKeys = JSON.parse(parseCookies(cookieHeader||"").apiKeys || '{}'); 
+  const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
 
   const stream = new SwitchableStream();
 
@@ -60,7 +60,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         messages.push({ role: 'assistant', content });
         messages.push({ role: 'user', content: CONTINUE_PROMPT });
 
-        const result = await streamText(messages, context.cloudflare.env, options,apiKeys);
+        const result = await streamText(messages, context.cloudflare.env, options, apiKeys);
 
         return stream.switchSource(result.toAIStream());
       },
@@ -76,7 +76,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         contentType: 'text/plain; charset=utf-8',
       },
     });
-  } catch (error:any) {
+  } catch (error: any) {
     console.log(error);
 
     if (error.message?.includes('API key')) {
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 7109a93..26db65a 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -263,7 +263,7 @@ const PROVIDER_LIST: ProviderInfo[] = [
   },
   {
     name: 'Together',
-    getDynamicModels: getTogetherModels, 
+    getDynamicModels: getTogetherModels,
     staticModels: [
       {
         name: 'Qwen/Qwen2.5-Coder-32B-Instruct',
@@ -295,7 +295,6 @@ const staticModels: ModelInfo[] = PROVIDER_LIST.map((p) => p.staticModels).flat(
 
 export let MODEL_LIST: ModelInfo[] = [...staticModels];
 
-
 export async function getModelList(apiKeys: Record<string, string>) {
   MODEL_LIST = [
     ...(
@@ -312,43 +311,44 @@ export async function getModelList(apiKeys: Record<string, string>) {
 
 async function getTogetherModels(apiKeys?: Record<string, string>): Promise<ModelInfo[]> {
   try {
-    let baseUrl = import.meta.env.TOGETHER_API_BASE_URL || '';
-    let provider='Together'
+    const baseUrl = import.meta.env.TOGETHER_API_BASE_URL || '';
+    const provider = 'Together';
 
-  if (!baseUrl) {
+    if (!baseUrl) {
+      return [];
+    }
+
+    let apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
+
+    if (apiKeys && apiKeys[provider]) {
+      apiKey = apiKeys[provider];
+    }
+
+    if (!apiKey) {
+      return [];
+    }
+
+    const response = await fetch(`${baseUrl}/models`, {
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+      },
+    });
+    const res = (await response.json()) as any;
+    const data: any[] = (res || []).filter((model: any) => model.type == 'chat');
+
+    return data.map((m: any) => ({
+      name: m.id,
+      label: `${m.display_name} - in:$${m.pricing.input.toFixed(
+        2,
+      )} out:$${m.pricing.output.toFixed(2)} - context ${Math.floor(m.context_length / 1000)}k`,
+      provider,
+      maxTokenAllowed: 8000,
+    }));
+  } catch (e) {
+    console.error('Error getting OpenAILike models:', e);
     return [];
   }
-  let apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? ''
-
-  if (apiKeys && apiKeys[provider]) {
-    apiKey = apiKeys[provider];
-  }
-
-  if (!apiKey) {
-    return [];
-  }
-
-  const response = await fetch(`${baseUrl}/models`, {
-    headers: {
-      Authorization: `Bearer ${apiKey}`,
-    },
-  });
-  const res = (await response.json()) as any;
-    let data: any[] = (res || []).filter((model: any) => model.type=='chat')
-  return data.map((m: any) => ({
-    name: m.id,
-    label: `${m.display_name} - in:$${(m.pricing.input).toFixed(
-      2,
-    )} out:$${(m.pricing.output).toFixed(2)} - context ${Math.floor(m.context_length / 1000)}k`,
-    provider: provider,
-    maxTokenAllowed: 8000, 
-  }));
-} catch (e) {
-  console.error('Error getting OpenAILike models:', e);
-  return [];
 }
-}
-
 
 const getOllamaBaseUrl = () => {
   const defaultBaseUrl = import.meta.env.OLLAMA_API_BASE_URL || 'http://localhost:11434';
@@ -396,11 +396,13 @@ async function getOpenAILikeModels(): Promise<ModelInfo[]> {
     if (!baseUrl) {
       return [];
     }
+
     let apiKey = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
-    
-    let apikeys = JSON.parse(Cookies.get('apiKeys')||'{}')
-    if (apikeys && apikeys['OpenAILike']){
-      apiKey = apikeys['OpenAILike'];
+
+    const apikeys = JSON.parse(Cookies.get('apiKeys') || '{}');
+
+    if (apikeys && apikeys.OpenAILike) {
+      apiKey = apikeys.OpenAILike;
     }
 
     const response = await fetch(`${baseUrl}/models`, {
@@ -458,6 +460,7 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
   if (typeof window === 'undefined') {
     return [];
   }
+
   try {
     const baseUrl = import.meta.env.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
     const response = await fetch(`${baseUrl}/v1/models`);
@@ -476,6 +479,7 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
 
 async function initializeModelList(): Promise<ModelInfo[]> {
   let apiKeys: Record<string, string> = {};
+
   try {
     const storedApiKeys = Cookies.get('apiKeys');
 
@@ -486,9 +490,8 @@ async function initializeModelList(): Promise<ModelInfo[]> {
         apiKeys = parsedKeys;
       }
     }
-    
-  } catch (error) {
-    
+  } catch (error: any) {
+    console.warn(`Failed to fetch apikeys from cookies:${error?.message}`);
   }
   MODEL_LIST = [
     ...(
@@ -500,6 +503,7 @@ async function initializeModelList(): Promise<ModelInfo[]> {
     ).flat(),
     ...staticModels,
   ];
+
   return MODEL_LIST;
 }
 

From 417dbcab9be864f9ff42f133bb34c32e81fc476b Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Fri, 6 Dec 2024 17:14:56 +0530
Subject: [PATCH 29/29] added spinner

---
 app/components/chat/Artifact.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/chat/Artifact.tsx b/app/components/chat/Artifact.tsx
index f26b1ee..3ca2508 100644
--- a/app/components/chat/Artifact.tsx
+++ b/app/components/chat/Artifact.tsx
@@ -28,6 +28,7 @@ interface ArtifactProps {
 export const Artifact = memo(({ messageId }: ArtifactProps) => {
   const userToggledActions = useRef(false);
   const [showActions, setShowActions] = useState(false);
+  const [allActionFinished, setAllActionFinished] = useState(false);
 
   const artifacts = useStore(workbenchStore.artifacts);
   const artifact = artifacts[messageId];
@@ -47,6 +48,11 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
     if (actions.length && !showActions && !userToggledActions.current) {
       setShowActions(true);
     }
+
+    if (actions.length !== 0) {
+      const finished = !actions.find((action) => action.status !== 'complete');
+      setAllActionFinished(finished);
+    }
   }, [actions]);
 
   return (
@@ -62,7 +68,11 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
           {artifact.type == 'bundled' && (
             <>
               <div className="p-4">
-                <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
+                {allActionFinished ? (
+                  <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
+                ) : (
+                  <div className={'i-svg-spinners:90-ring-with-bg'} style={{ fontSize: '2rem' }}></div>
+                )}
               </div>
               <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
             </>