refactor: message input components

Author: eeee0717

docs/migrateComponents.md

@@ -62,6 +62,7 @@
     "@aws-sdk/client-bedrock": "^3.840.0",
     "@aws-sdk/client-bedrock-runtime": "^3.840.0",
     "@aws-sdk/client-s3": "^3.840.0",
+    "@callstack/liquid-glass": "^0.6.1",
     "@cherrystudio/ai-core": "^1.0.9",
     "@cherrystudio/ai-sdk-provider": "^0.1.3",
     "@cherrystudio/openai": "^6.9.0",

package.json

@@ -53,7 +53,7 @@ export const LiquidGlassButton = ({
   return (
     <Button
       onPress={onPress}
-      className={cn('h-10 w-10 items-center justify-center rounded-full', className)}
+      className={cn('bg-secondary h-10 w-10 items-center justify-center rounded-full', className)}
       variant={variant}
       style={style}>
       {children}

src/componentsV2/base/LiquidGlassButton/index.tsx

@@ -12,12 +12,22 @@ interface SearchInputProps {
 
 export const SearchInput = ({ placeholder, onChangeText, value }: SearchInputProps) => {
   return (
-    <TextField>
+    <TextField className="bg-secondary rounded-3xl">
       <TextField.Input
         placeholder={placeholder}
         onChangeText={onChangeText}
         value={value}
-        className="h-10 w-full rounded-xl bg-transparent px-2 py-0 text-base">
+        className="h-10 w-full"
+        selectionColor="#2563eb"
+        colors={{
+          blurBackground: 'transparent',
+          focusBackground: 'transparent',
+          blurBorder: 'transparent',
+          focusBorder: 'transparent'
+        }}
+        style={{
+          fontSize: 18
+        }}>
         <TextField.InputStartContent>
           <Search size={20} className="text-foreground-secondary" />
         </TextField.InputStartContent>

src/componentsV2/base/SearchInput/index.tsx

@@ -9,6 +9,7 @@ import { ExpandButton } from './ExpandButton'
 
 const LINE_HEIGHT = 20
 const MAX_VISIBLE_LINES = 4
+const MAX_INPUT_HEIGHT = 96
 
 interface MessageTextFieldProps {
   text: string
@@ -19,20 +20,24 @@ interface MessageTextFieldProps {
 export const MessageTextField: React.FC<MessageTextFieldProps> = ({ text, setText, onExpand }) => {
   const { t } = useTranslation()
   const [showExpandButton, setShowExpandButton] = useState(false)
+  const [inputHeight, setInputHeight] = useState<number | undefined>(undefined)
 
   const handleContentSizeChange = (e: TextInputContentSizeChangeEvent) => {
     const { height } = e.nativeEvent.contentSize
     const lineCount = Math.ceil(height / LINE_HEIGHT)
     setShowExpandButton(lineCount > MAX_VISIBLE_LINES)
+    setInputHeight(height)
   }
 
+  const computedInputHeight = inputHeight === undefined ? undefined : Math.min(inputHeight, MAX_INPUT_HEIGHT)
+
   return (
     <>
       {/* hidden measurement input */}
       <View style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }} className="w-full">
-        <TextField className="w-full p-0">
+        <TextField className="w-full rounded-2xl p-0">
           <TextField.Input
-            className="text-foreground h-auto border-none p-0 text-base"
+            className="text-foreground h-auto"
             value={text}
             multiline
             onContentSizeChange={handleContentSizeChange}
@@ -42,21 +47,35 @@ export const MessageTextField: React.FC<MessageTextFieldProps> = ({ text, setTex
               blurBorder: 'transparent',
               focusBorder: 'transparent'
             }}
+            style={{
+              minHeight: 36,
+              fontSize: 20,
+              lineHeight: 26,
+              paddingVertical: 6
+            }}
           />
         </TextField>
       </View>
       {/* visible input */}
-      <View className="relative top-[5px]">
-        {showExpandButton && <ExpandButton onPress={onExpand} />}
-        <TextField className="w-full p-0">
+      <View className="relative">
+        <View className="right-2 top-2">{showExpandButton && <ExpandButton onPress={onExpand} />}</View>
+        <TextField className="w-full rounded-3xl p-0">
           <TextField.Input
-            className="text-foreground h-24 border-none p-0 text-base"
+            className="text-foreground h-auto"
             placeholder={t('inputs.placeholder')}
             value={text}
             onChangeText={setText}
             multiline
             numberOfLines={10}
             selectionColor="#2563eb"
+            style={{
+              height: computedInputHeight,
+              maxHeight: MAX_INPUT_HEIGHT,
+              minHeight: 36,
+              fontSize: 20,
+              lineHeight: 26,
+              paddingVertical: 6
+            }}
             colors={{
               blurBackground: 'transparent',
               focusBackground: 'transparent',

src/componentsV2/features/ChatScreen/MessageInput/MessageTextField.tsx

@@ -8,5 +8,11 @@ interface PauseButtonProps {
 }
 
 export const PauseButton: React.FC<PauseButtonProps> = ({ onPause }) => {
-  return <IconButton icon={<CirclePause size={24} className="text-error-base" />} onPress={onPause} />
+  return (
+    <IconButton
+      style={{ height: 36, width: 36, alignItems: 'center', justifyContent: 'center' }}
+      icon={<CirclePause size={32} className="text-red-600" />}
+      onPress={onPause}
+    />
+  )
 }

src/componentsV2/features/ChatScreen/MessageInput/PauseButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Keyboard } from 'react-native'
 
-import { IconButton } from '@/componentsV2/base/IconButton'
-import { AssetsIcon } from '@/componentsV2/icons'
+import { LiquidGlassButton } from '@/componentsV2/base/LiquidGlassButton'
+import { Plus } from '@/componentsV2/icons/LucideIcon'
 import type { Assistant, Model } from '@/types/assistant'
 import type { FileMetadata } from '@/types/file'
 
@@ -34,5 +34,9 @@ export const ToolButton: React.FC<AddAssetsButtonProps> = ({
     })
   }
 
-  return <IconButton icon={<AssetsIcon size={20} />} onPress={handlePress} />
+  return (
+    <LiquidGlassButton size={38} onPress={handlePress}>
+      <Plus size={24} />
+    </LiquidGlassButton>
+  )
 }