Merge pull request #12 from TensorBlock/image-generation-support

Image generation support

Author: Working-bot999

package-lock.json

@@ -16,13 +16,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ai-sdk/fireworks": "^0.2.5",
-    "@ai-sdk/google": "^1.2.5",
-    "@ai-sdk/openai": "^1.3.6",
-    "@ai-sdk/togetherai": "^0.2.5",
-    "@anthropic-ai/sdk": "^0.39.0",
+    "@ai-sdk/fireworks": "^0.2.13",
+    "@ai-sdk/google": "^1.2.13",
+    "@ai-sdk/openai": "^1.3.20",
+    "@ai-sdk/togetherai": "^0.2.13",
+    "@anthropic-ai/sdk": "^0.40.0",
     "@openrouter/ai-sdk-provider": "^0.4.5",
-    "ai": "^4.2.10",
+    "ai": "^4.3.10",
     "axios": "^1.8.4",
     "dotenv": "^16.4.7",
     "electron-builder": "26.0.12",

package.json

@@ -1,9 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { ChatPage } from './components/pages/ChatPage';
+import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
+import { TranslationPage } from './components/pages/TranslationPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
 function App() {
+  const [activePage, setActivePage] = useState('chat');
+  const [showSettings, setShowSettings] = useState(false);
 
   // Handle link clicks
   useEffect(() => {
@@ -22,11 +26,16 @@ function App() {
     };
   }, []);
 
+  const handlePageChange = (page: string) => {
+    setActivePage(page);
+  };
 
   return (
     <DatabaseInitializer>
-      <MainLayout>
-        <ChatPage/>
+      <MainLayout activePage={activePage} onChangePage={handlePageChange} showSettings={showSettings} setShowSettings={setShowSettings}>
+        {activePage === 'chat' && <ChatPage />}
+        {activePage === 'image' && <ImageGenerationPage />}
+        {activePage === 'translation' && <TranslationPage />}
       </MainLayout>
     </DatabaseInitializer>
   );

src/App.tsx

@@ -12,6 +12,7 @@ import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
 import FileUploadButton from './FileUploadButton';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
+import ImageGenerationButton from './ImageGenerationButton';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -319,7 +320,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   :<></>;
 
   return (
-    <div className="flex flex-col w-full h-full max-w-full">
+    <div className="flex flex-col w-full h-full">
       {/* Messages area */}
       <div className="flex-1 p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
@@ -527,11 +528,16 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           <div className='flex flex-row items-center h-full gap-2'>
             {/* File upload button */}
             {onSendMessageWithFiles && (
-                  <FileUploadButton 
-                    onFilesSelected={handleFilesSelected}
-                    disabled={isLoading || isCurrentlyStreaming}
-                  />
-                )}
+              <FileUploadButton
+                onFilesSelected={handleFilesSelected}
+                disabled={isLoading || isCurrentlyStreaming}
+              />
+            )}
+            
+            {/* Image generation button */}
+            <ImageGenerationButton 
+              disabled={isLoading || isCurrentlyStreaming}
+            />
           </div>
 
           {/* Web search element */}