feat(ui): use Button in send bar

anse-app · May 26, 2023 · 745d645 · 745d645
1 parent 737ed7c
commit 745d645
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 39 deletions.
diff --git a/src/components/Send.tsx b/src/components/Send.tsx
@@ -7,6 +7,7 @@ import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { handlePrompt } from '@/logics/conversation'
 import { globalAbortController } from '@/stores/settings'
 import { useI18n, useMobileScreen } from '@/hooks'
+import Button from './ui/Button'
 
 export default () => {
   const { t } = useI18n()
@@ -58,28 +59,37 @@ export default () => {
       }}
     >
       <div class="flex-1 op-30 text-sm">{t('send.placeholder')}</div>
-      <div class="i-carbon-send op-50 text-xl" />
     </div>
   )
 
   const EditState = () => (
-    <div class="h-full relative">
-      <textarea
-        ref={inputRef!}
-        placeholder={t('send.placeholder')}
-        autocomplete="off"
-        onBlur={() => { isSendBoxFocus.set(false) }}
-        onInput={() => { setInputPrompt(inputRef.value) }}
-        onKeyDown={(e) => {
-          e.key === 'Enter' && !e.isComposing && !e.shiftKey && handleSend()
-        }}
-        class="h-full w-full absolute inset-0 py-4 px-[calc(max(1.5rem,(100%-48rem)/2))] scroll-pa-4 input-base"
-      />
-      <div
-        onClick={handleSend}
-        class={`absolute right-[calc(max(1.5rem,(100%-48rem)/2)-0.5rem)] bottom-3 bg-base-100 border border-base p-2 rounded-md hv-base ${inputPrompt() && 'bg-teal-600 dark:bg-teal-700 b-none hover:bg-teal-700 dark:hover:bg-teal-800 text-white'}`}
-      >
-        <div class="i-carbon-send op-80 dark:op-70 text-xl cursor-pointer" />
+    <div class="h-full flex flex-col">
+      <div class="flex-1 relative">
+        <textarea
+          ref={inputRef!}
+          placeholder={t('send.placeholder')}
+          autocomplete="off"
+          onBlur={() => { isSendBoxFocus.set(false) }}
+          onInput={() => { setInputPrompt(inputRef.value) }}
+          onKeyDown={(e) => {
+            e.key === 'Enter' && !e.isComposing && !e.shiftKey && handleSend()
+          }}
+          class="h-full w-full absolute inset-0 py-4 px-[calc(max(1.5rem,(100%-48rem)/2))] scroll-pa-4 input-base text-sm"
+        />
+      </div>
+      <div class="fi justify-between gap-2 h-14 px-[calc(max(1.5rem,(100%-48rem)/2)-0.5rem)] border-t border-base">
+        <div>
+          {/* <Button
+            icon="i-carbon-plug"
+            onClick={() => {}}
+          /> */}
+        </div>
+        <Button
+          icon="i-carbon-send"
+          onClick={handleSend}
+          variant={inputPrompt() ? 'primary' : 'normal'}
+          // prefix={t('send.button')}
+        />
       </div>
     </div>
   )
@@ -157,7 +167,7 @@ export default () => {
     else if (stateType() === 'loading')
       return 'px-6 h-14'
     else if (stateType() === 'editing')
-      return 'h-50'
+      return 'h-54'
     return ''
   }
 

diff --git a/src/components/main/ConversationEmpty.tsx b/src/components/main/ConversationEmpty.tsx
@@ -12,7 +12,7 @@ export default (props: Props) => {
   return (
     <div class="fi flex-col h-full px-6 py-8 overflow-auto">
       <Button
-        icon="i-carbon-settings-adjust"
+        icon="i-carbon-settings-adjust text-sm"
         onClick={() => showConversationEditModal.set(true)}
         size="sm"
         variant="ghost"

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -5,40 +5,46 @@ interface Props {
   icon?: string
   text?: string
   size?: 'sm' | 'md' | 'lg'
-  variant?: 'normal' | 'ghost'
+  variant?: 'normal' | 'primary' | 'ghost'
+  prefix?: JSXElement
   children?: JSXElement
   onClick: () => void
 }
 
 export default (props: Props) => {
-  const buttonSizeClass = {
-    sm: 'px-2 h-7.5 text-xs',
-    md: 'px-3 h-10 text-sm',
-    lg: 'px-3 h-10 text-sm',
-  }[props.size || 'md']
-  const buttonVariantClass = {
+  const content = props.text || props.children
+  const buttonSizeClass = () => ({
+    sm: content || props.prefix ? 'px-2 h-7.5 text-xs gap-1' : 'w-7.5 h-7.5 text-xs',
+    md: content || props.prefix ? 'px-3 h-10 text-sm gap-1.5' : 'w-10 h-10 text-sm',
+    lg: content || props.prefix ? 'px-3 h-10 text-sm gap-1.5' : 'w-10 h-10 text-sm',
+  }[props.size || 'md'])
+  const buttonVariantClass = () => ({
     normal: 'bg-base-100 border border-base hover:(bg-base-200 border-base-100)',
+    primary: 'bg-teal-600 dark:bg-teal-700 text-white border border-transparent hover:(bg-teal-700 dark:bg-teal-800)',
     ghost: 'bg-transparent border border-base hover:(bg-base-100 border-base-100)',
-  }[props.variant || 'normal']
-  const iconSizeClass = {
-    sm: 'text-xs',
-    md: 'text-sm',
-    lg: 'text-sm',
-  }[props.size || 'md']
+  }[props.variant || 'normal'])
+  const iconSizeClass = () => ({
+    sm: 'text-base',
+    md: 'text-lg',
+    lg: 'text-lg',
+  }[props.size || 'md'])
   return (
     <div
       class={[
-        'fi gap-1 rounded-md cursor-pointer transition-colors',
-        buttonVariantClass,
-        buttonSizeClass,
+        'fcc rounded-md cursor-pointer transition-colors',
+        buttonVariantClass(),
+        buttonSizeClass(),
       ].join(' ')}
       onClick={props.onClick}
     >
+      <Show when={props.prefix}>
+        <div>{props.prefix}</div>
+      </Show>
       <Show when={props.icon}>
-        <div class={`${iconSizeClass} ${props.icon}`} />
+        <div class={`${iconSizeClass()} ${props.icon}`} />
       </Show>
-      <Show when={props.text || props.children}>
-        <div>{props.text || props.children}</div>
+      <Show when={content}>
+        <div>{content}</div>
       </Show>
     </div>
   )

diff --git a/src/locale/lang/en.ts b/src/locale/lang/en.ts
@@ -34,6 +34,7 @@ export const en = {
     },
     send: {
       placeholder: 'Enter Something...',
+      button: 'Send',
     },
   },
 } as language
diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts
@@ -34,6 +34,7 @@ export const zhCN = {
     },
     send: {
       placeholder: '输入内容...',
+      button: '发送',
     },
   },
 } as language