Fix: Change the image page layout

Author: ShenKSPZ

src/components/chat/ChatMessageArea.tsx

@@ -321,7 +321,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   return (
     <div className="flex flex-col w-full h-full max-w-full">
       {/* Messages area */}
-      <div className="flex-1 p-4 space-y-4 overflow-y-auto">
+      <div className="p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
           if(message.role === 'system') return null;
 

src/components/layout/MainLayout.tsx

@@ -56,19 +56,19 @@ const MainLayout: React.FC<MainLayoutProps> = ({
         onOpenSettingsDialog={handleOpenSettingsDialog}
       />
 
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full h-full overflow-hidden">
         <Sidebar 
           activePage={activePage}
           onChangePage={handlePageChange}
           showSettings={showSettings}
           setShowSettings={setShowSettings}
         />
 
-        <div className="flex flex-col flex-1 w-[calc(100%-68px)] bg-main-background-color">
+        <div className="flex flex-col h-full w-[calc(100%-68px)] bg-main-background-color">
           {/* Main content */}
 
-          <div className='relative flex flex-col flex-1 w-full overflow-hidden major-area-border major-area-bg-color'>
-            <div className="flex-1 w-full overflow-auto">
+          <div className='relative flex flex-col w-full h-full overflow-hidden major-area-border major-area-bg-color'>
+            <div className="w-full h-full overflow-auto">
               {children}
             </div>
 

src/components/pages/ChatPage.tsx

@@ -372,7 +372,7 @@ export const ChatPage = () => {
     <div className="flex flex-col w-full h-full bg-white">
 
       {/* Main content with chat history and messages */}
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full overflow-hidden">
         <ChatHistoryList 
           conversations={conversations}
           folders={folders}
@@ -387,7 +387,7 @@ export const ChatPage = () => {
           onMoveConversation={handleMoveConversation}
         />
 
-        <div className="flex flex-col flex-1 w-full min-w-0 overflow-hidden">
+        <div className="flex flex-col w-full min-w-0 overflow-hidden">
           {isApiKeyMissing && (
             <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
               Please set your API key for the selected provider in the settings.

src/types/chat.ts

@@ -51,4 +51,17 @@ export interface ConversationFolder{
   createdAt: Date;
   updatedAt: Date;
   colorFlag: string;
-}
+}
+
+export interface ImageGenerationResult {
+  id: string;
+  prompt: string;
+  negativePrompt: string;
+  seed: string;
+  number: number;
+  status: string;
+  aspectRatio: string;
+  provider: string;
+  model: string;
+  images: MessageContent[];
+}

src/types/chatTypes.md

@@ -0,0 +1,40 @@
+- Message Content:
+
+    - Text:
+        - cotent: string text content
+        - dataJson: none
+
+    - File:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+    - Image:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+
+- File Data:
+
+    - file id: string file reference id
+    - file type: Document/Image/Audio/Others
+    - data: ArrayBuffer data
+
+
+- Image generation result:
+
+    - prompt: string prompt text
+    - negative prompt: string negative prompt text
+    - seed: string seed
+    - number: numbers of generation
+    - status: string none/success/error/running
+    - aspect ratio: string
+    - provider: string provider id
+    - model: string model id
+    - images: MessageContent[]
+

src/types/file.ts

@@ -0,0 +1,7 @@
+export interface File {
+  fileId: string;
+  name: string;
+  type: string;
+  size: number;
+  data: ArrayBuffer;
+}