changing based on PR review

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>(
     );
   },
 );
-
-
-

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>

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 => {