From 2277f7f493270cd2c05cc7374caf14a648f61e2e Mon Sep 17 00:00:00 2001
From: CSCITech <cscitech@cscitech.top>
Date: Sat, 4 Jul 2026 16:18:54 +0800
Subject: [PATCH] v1.0.4-preview.1

---
 .../src/components/ai-elements/prompt-input.tsx       |  5 ++++-
 web/default/src/components/model-group-selector.tsx   |  4 +++-
 web/default/src/components/ui/input-group.tsx         |  2 +-
 .../playground/components/playground-input.tsx        | 11 ++++++-----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/default/src/components/ai-elements/prompt-input.tsx b/web/default/src/components/ai-elements/prompt-input.tsx
index 508c0be..6862565 100644
--- a/web/default/src/components/ai-elements/prompt-input.tsx
+++ b/web/default/src/components/ai-elements/prompt-input.tsx
@@ -888,7 +888,10 @@ export const PromptInputTextarea = ({
 
   return (
     <InputGroupTextarea
-      className={cn('field-sizing-content max-h-48 min-h-16', className)}
+      className={cn(
+        'field-sizing-content max-h-48 min-h-16 min-w-0 max-w-full [overflow-wrap:anywhere]',
+        className
+      )}
       name='message'
       onCompositionEnd={() => setIsComposing(false)}
       onCompositionStart={() => setIsComposing(true)}
diff --git a/web/default/src/components/model-group-selector.tsx b/web/default/src/components/model-group-selector.tsx
index 851c5d7..fb87e1e 100644
--- a/web/default/src/components/model-group-selector.tsx
+++ b/web/default/src/components/model-group-selector.tsx
@@ -92,6 +92,7 @@ const ModelTriggerButton = React.forwardRef<
       'flex h-8 items-center gap-2 border px-3 font-medium',
       'justify-center p-0 sm:w-auto sm:justify-start sm:px-3',
       'w-8',
+      'min-w-0 sm:max-w-48 md:max-w-64',
       'bg-background text-foreground',
       'hover:bg-accent transition-colors',
       'focus:!ring-0 focus:!outline-none',
@@ -128,6 +129,7 @@ const GroupTriggerButton = React.forwardRef<
       'flex h-8 items-center gap-2 border px-3 font-medium',
       'justify-center p-0 sm:w-auto sm:justify-start sm:px-3',
       'w-8',
+      'min-w-0 sm:max-w-40 md:max-w-52',
       'bg-background text-foreground',
       'hover:bg-accent transition-colors',
       'focus:!ring-0 focus:!outline-none',
@@ -569,7 +571,7 @@ export const ModelGroupSelector: React.FC<ModelGroupSelectorProps> = ({
   disabled = false,
 }) => {
   return (
-    <div className={cn('flex items-center gap-2', className)}>
+    <div className={cn('flex min-w-0 items-center gap-2', className)}>
       <GroupSelector
         selectedGroup={selectedGroup}
         groups={groups}
diff --git a/web/default/src/components/ui/input-group.tsx b/web/default/src/components/ui/input-group.tsx
index 3f01c5d..5283a91 100644
--- a/web/default/src/components/ui/input-group.tsx
+++ b/web/default/src/components/ui/input-group.tsx
@@ -156,7 +156,7 @@ function InputGroupTextarea({
     <Textarea
       data-slot='input-group-control'
       className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+        'min-w-0 max-w-full flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
         className
       )}
       {...props}
diff --git a/web/default/src/features/playground/components/playground-input.tsx b/web/default/src/features/playground/components/playground-input.tsx
index fd930da..656a74c 100644
--- a/web/default/src/features/playground/components/playground-input.tsx
+++ b/web/default/src/features/playground/components/playground-input.tsx
@@ -141,8 +141,8 @@ export function PlaygroundInput({
           value={text}
         />
 
-        <PromptInputFooter className='p-2.5'>
-          <PromptInputTools>
+        <PromptInputFooter className='flex-wrap p-2.5'>
+          <PromptInputTools className='min-w-0 flex-wrap'>
             <DropdownMenu>
               <DropdownMenuTrigger
                 render={
@@ -222,8 +222,9 @@ export function PlaygroundInput({
             </TooltipProvider>
           </PromptInputTools>
 
-          <div className='flex items-center gap-1.5 md:gap-2'>
+          <div className='ml-auto flex min-w-0 items-center gap-1.5 md:gap-2'>
             <ModelGroupSelector
+              className='min-w-0'
               selectedModel={modelValue}
               models={models}
               onModelChange={onModelChange}
@@ -235,7 +236,7 @@ export function PlaygroundInput({
 
             {isGenerating && onStop ? (
               <PromptInputButton
-                className='text-foreground font-medium'
+                className='text-foreground shrink-0 font-medium'
                 onClick={onStop}
                 variant='secondary'
               >
@@ -245,7 +246,7 @@ export function PlaygroundInput({
               </PromptInputButton>
             ) : (
               <PromptInputButton
-                className='text-foreground font-medium'
+                className='text-foreground shrink-0 font-medium'
                 disabled={disabled || isSubmitDisabled || !text.trim()}
                 type='submit'
                 variant='secondary'