Merge pull request #217 from 11cafe/dev

Fix UI problems in chat textarea buttons

Author: Weixuanf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaaz",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "AI design agent local desktop app",
   "author": "weixuanfu",
   "main": "electron/main.js",

react/src/components/chat/ChatTextarea.tsx

@@ -14,7 +14,16 @@ import { ModelInfo, ToolInfo } from '@/api/model'
 import { useMutation } from '@tanstack/react-query'
 import { useDrop } from 'ahooks'
 import { produce } from 'immer'
-import { ArrowUp, Loader2, PlusIcon, Square, XIcon, RectangleVertical, ChevronDown, Hash } from 'lucide-react'
+import {
+  ArrowUp,
+  Loader2,
+  PlusIcon,
+  Square,
+  XIcon,
+  RectangleVertical,
+  ChevronDown,
+  Hash,
+} from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import Textarea, { TextAreaRef } from 'rc-textarea'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -407,7 +416,7 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
       />
 
       <div className="flex items-center justify-between gap-2 w-full">
-        <div className="flex items-center gap-2 max-w-[calc(100%-50px)]">
+        <div className="flex items-center gap-2 max-w-[calc(100%-50px)] flex-wrap">
           <input
             ref={imageInputRef}
             type="file"
@@ -418,7 +427,7 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
           />
           <Button
             variant="outline"
-            size="icon"
+            size="sm"
             onClick={() => imageInputRef.current?.click()}
           >
             <PlusIcon className="size-4" />
@@ -431,7 +440,8 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
             <DropdownMenuTrigger asChild>
               <Button
                 variant="outline"
-                className="h-9 px-3 flex items-center gap-2"
+                className="flex items-center gap-1"
+                size={'sm'}
               >
                 <RectangleVertical className="size-4" />
                 <span className="text-sm">{selectedAspectRatio}</span>
@@ -458,8 +468,9 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
           <div className="relative" ref={quantitySliderRef}>
             <Button
               variant="outline"
-              className="h-9 px-3 flex items-center gap-2"
+              className="flex items-center gap-1"
               onClick={() => setShowQuantitySlider(!showQuantitySlider)}
+              size={'sm'}
             >
               <Hash className="size-4" />
               <span className="text-sm">{quantity}</span>
@@ -470,16 +481,20 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
             <AnimatePresence>
               {showQuantitySlider && (
                 <motion.div
-                  className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg p-4 shadow-lg min-w-48"
+                  className="absolute bottom-full mb-2 left-0  bg-background border border-border rounded-lg p-4 shadow-lg min-w-48"
                   initial={{ opacity: 0, y: 10, scale: 0.95 }}
                   animate={{ opacity: 1, y: 0, scale: 1 }}
                   exit={{ opacity: 0, y: 10, scale: 0.95 }}
                   transition={{ duration: 0.15, ease: 'easeOut' }}
                 >
                   <div className="flex flex-col gap-3">
                     <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium">{t('chat:textarea.quantity')}</span>
-                      <span className="text-sm text-muted-foreground">{quantity}</span>
+                      <span className="text-sm font-medium">
+                        {t('chat:textarea.quantity', 'Image Quantity')}
+                      </span>
+                      <span className="text-sm text-muted-foreground">
+                        {quantity}
+                      </span>
                     </div>
                     <div className="flex items-center gap-3">
                       <span className="text-xs text-muted-foreground">1</span>
@@ -496,7 +511,9 @@ const ChatTextarea: React.FC<ChatTextareaProps> = ({
                                   [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full
                                   [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
                       />
-                      <span className="text-xs text-muted-foreground">{MAX_QUANTITY}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {MAX_QUANTITY}
+                      </span>
                     </div>
                   </div>
                   {/* Arrow pointing down */}

react/src/components/chat/ModelSelector.tsx

@@ -116,7 +116,7 @@ const ModelSelector: React.FC = () => {
           )
         }}
       >
-        <SelectTrigger className="w-fit max-w-[100px] bg-background">
+        <SelectTrigger className="w-fit max-w-[100px] bg-background" size="sm">
           <SelectValue placeholder="Theme" />
         </SelectTrigger>
         <SelectContent>
@@ -142,6 +142,7 @@ const ModelSelector: React.FC = () => {
       <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
         <DropdownMenuTrigger asChild>
           <Button
+            size={'sm'}
             variant="outline"
             className="w-fit max-w-[40%] bg-background justify-between overflow-hidden"
           >

react/src/components/chat/ModelSelectorV2.tsx

@@ -37,11 +37,13 @@ const SessionSelector: React.FC<SessionSelectorProps> = ({
           <SelectValue placeholder="Theme" />
         </SelectTrigger>
         <SelectContent>
-          {sessionList?.map((session) => (
-            <SelectItem key={session.id} value={session.id}>
-              {session.title}
-            </SelectItem>
-          ))}
+          {sessionList
+            ?.filter((session) => session.id && session.id.trim() !== '') // Fix error of A ‹Select.Item /> must have a value prop that is not an empty string.
+            ?.map((session) => (
+              <SelectItem key={session.id} value={session.id}>
+                {session.title}
+              </SelectItem>
+            ))}
         </SelectContent>
       </Select>
 

react/src/components/chat/SessionSelector.tsx

@@ -6,7 +6,7 @@
     "selectModel": "Please select a text model! Go to Settings to set your API keys if you haven't done so.",
     "selectTool": "Please go to settings to add image or video generation tools, or you won't be able to generate any images or videos!!",
     "enterPrompt": "Please enter a prompt",
-    "quantity": "Quantity"
+    "quantity": "Image Quantity"
   },
   "messages": {
     "imagePositioning": "Go to image",

react/src/i18n/locales/en/chat.json

@@ -6,7 +6,7 @@
     "selectModel": "请选择一个文本模型！如果您还没有设置 API 密钥，请前往设置页面进行配置。",
     "selectTool": "请选择一个图片模型！如果您还没有设置 API 密钥，请前往设置页面进行配置。",
     "enterPrompt": "请输入提示内容",
-    "quantity": "数量"
+    "quantity": "生成数量"
   },
   "messages": {
     "imagePositioning": "定位到图片",

react/src/i18n/locales/zh-CN/chat.json

@@ -4,7 +4,9 @@
 # Ensure stdout and stderr use utf-8 encoding to prevent emoji logs from crashing python server
 sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding="utf-8")
 sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding="utf-8")
+print('Importing websocket_router')
 from routers.websocket_router import *  # DO NOT DELETE THIS LINE, OTHERWISE, WEBSOCKET WILL NOT WORK
+print('Importing routers')
 from routers import config_router, image_router, root_router, workspace, canvas, ssl_test, chat_router, settings
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
@@ -14,13 +16,19 @@
 from starlette.types import Scope
 from starlette.responses import Response
 import socketio # type: ignore
+print('Importing websocket_state')
 from services.websocket_state import sio
+print('Importing websocket_service')
 from services.websocket_service import broadcast_init_done
+print('Importing config_service')
 from services.config_service import config_service
+print('Importing tool_service')
 from services.tool_service import tool_service
 
 async def initialize():
+    print('Initializing config_service')
     await config_service.initialize()
+    print('Initializing broadcast_init_done')
     await broadcast_init_done()
 
 root_dir = os.path.dirname(__file__)
@@ -34,9 +42,11 @@ async def lifespan(app: FastAPI):
     yield
     # onshutdown
 
+print('Creating FastAPI app')
 app = FastAPI(lifespan=lifespan)
 
 # Include routers
+print('Including routers')
 app.include_router(config_router.router)
 app.include_router(settings.router)
 app.include_router(root_router.router)
@@ -75,7 +85,7 @@ async def serve_react_app():
     response.headers["Expires"] = "0"
     return response
 
-
+print('Creating socketio app')
 socket_app = socketio.ASGIApp(sio, other_asgi_app=app, socketio_path='/socket.io')
 
 if __name__ == "__main__":