Merge remote-tracking branch 'coleam00/main' into Import-folder

# Conflicts:
#	app/components/chat/BaseChat.tsx

app/components/chat/BaseChat.tsx

@@ -14,22 +14,15 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
-import { toast } from 'react-toastify';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/utils/types';
-import { ExportChatButton } from '~/components/chat/ExportChatButton';
+import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
+import { ImportButton } from '~/components/chat/chatExportAndImport/ImportButton';
+import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 
-const EXAMPLE_PROMPTS = [
-  { text: 'Build a todo app in React using Tailwind' },
-  { text: 'Build a simple blog using Astro' },
-  { text: 'Create a cookie consent form using Material UI' },
-  { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
-];
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const providerList = PROVIDER_LIST;
 
@@ -169,61 +162,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    const chatImportButton = !chatStarted && (
-      <div className="flex flex-col items-center justify-center flex-1 p-4">
-        <input
-          type="file"
-          id="chat-import"
-          className="hidden"
-          accept=".json"
-          onChange={async (e) => {
-            const file = e.target.files?.[0];
-
-            if (file && importChat) {
-              try {
-                const reader = new FileReader();
-
-                reader.onload = async (e) => {
-                  try {
-                    const content = JSON.parse(e.target?.result as string);
-                    await importChat(content.description || '', content.messages || []);
-                  } catch (error) {
-                    toast.error(`Invalid chat file format: ${error instanceof Error ? ': ' + error.message : ''}`);
-                  }
-                };
-
-                reader.onerror = () => {
-                  toast.error('Something went wrong');
-                };
-                reader.readAsText(file);
-              } catch (error) {
-                toast.error(error instanceof Error ? error.message : 'Failed to import chat');
-              }
-              e.target.value = ''; // Reset file input
-            }
-          }}
-        />
-        <div className="flex flex-col items-center gap-4 max-w-2xl text-center">
-          <div className="flex gap-2">
-            <button
-              onClick={() => {
-                const input = document.getElementById('chat-import');
-                input?.click();
-              }}
-              className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
-            >
-              <div className="i-ph:upload-simple" />
-              Import Chat
-            </button>
-            <ImportFolderButton
-              importChat={importChat}
-              className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
-            />
-          </div>
-        </div>
-      </div>
-    );
-
     const baseChat = (
       <div
         ref={ref}
@@ -373,27 +311,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
-            {chatImportButton}
-            {!chatStarted && (
-              <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
-                <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
-                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
-                    return (
-                      <button
-                        key={index}
-                        onClick={(event) => {
-                          sendMessage?.(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"
-                      >
-                        {examplePrompt.text}
-                        <div className="i-ph:arrow-bend-down-left" />
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
+            {!chatStarted && ImportButton(importChat)}
+            {!chatStarted && ExamplePrompts(sendMessage)}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>