feat: expand inputbar height

src/renderer/src/assets/styles/scrollbar.scss

@@ -10,6 +10,7 @@
 
 ::-webkit-scrollbar-thumb {
   background: var(--color-scrollbar-thumb);
+  border-radius: 5px;
   &:hover {
     background: var(--color-scrollbar-thumb-hover);
   }

src/renderer/src/i18n/index.ts

@@ -69,6 +69,8 @@ const resources = {
         'input.new_topic': 'New Topic',
         'input.topics': ' Topics ',
         'input.clear': 'Clear',
+        'input.expand': 'Expand',
+        'input.collapse': 'Collapse',
         'input.clear.title': 'Clear all messages?',
         'input.clear.content': 'Are you sure to clear all messages?',
         'input.placeholder': 'Type your message here...',
@@ -305,6 +307,8 @@ const resources = {
         'input.new_topic': '新话题',
         'input.topics': ' 话题 ',
         'input.clear': '清除',
+        'input.expand': '展开',
+        'input.collapse': '收起',
         'input.clear.title': '清除所有消息?',
         'input.clear.content': '确定要清除所有消息吗?',
         'input.placeholder': '在这里输入消息...',

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -1,6 +1,8 @@
 import {
   ClearOutlined,
   ControlOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
   HistoryOutlined,
   PauseCircleOutlined,
   PlusCircleOutlined,
@@ -20,7 +22,7 @@ import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 import { debounce, isEmpty } from 'lodash'
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -123,6 +125,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
     store.dispatch(setGenerating(false))
   }
 
+  const resizeTextArea = () => {
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+    if (textArea) {
+      textArea.style.height = 'auto'
+      textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px`
+    }
+  }
+
+  const onToggleExpended = () => {
+    const isExpended = !expended
+    setExpend(isExpended)
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+
+    if (textArea) {
+      if (isExpended) {
+        textArea.style.height = '70vh'
+      } else {
+        resizeTextArea()
+      }
+    }
+
+    textareaRef.current?.focus()
+  }
+
+  const onInput = () => !expended && resizeTextArea()
+
   // Command or Ctrl + N create new topic
   useEffect(() => {
     const onKeydown = (e) => {
@@ -166,17 +194,10 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         variant="borderless"
         rows={1}
         ref={textareaRef}
-        style={{ fontSize }}
+        styles={{ textarea: TextareaStyle }}
-        styles={{ textarea: { paddingLeft: 0, boxSizing: 'border-box', padding: '10px 15px 5px' } }}
         onFocus={() => setInputFocus(true)}
         onBlur={() => setInputFocus(false)}
-        onInput={() => {
+        onInput={onInput}
-          const textArea = textareaRef.current?.resizableTextArea?.textArea
-          if (textArea) {
-            textArea.style.height = 'auto'
-            textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px`
-          }
-        }}
       />
       <Toolbar>
         <ToolbarMenu>
@@ -209,24 +230,21 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
             </ToolbarButton>
           </Tooltip>
           <AttachmentButton images={images} setImages={setImages} ToolbarButton={ToolbarButton} />
+          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
+            <ToolbarButton type="text" onClick={onToggleExpended}>
+              {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+            </ToolbarButton>
+          </Tooltip>
           {showInputEstimatedTokens && (
             <TextCount>
               <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
-                <Tag
+                <StyledTag>
-                  style={{
-                    cursor: 'pointer',
-                    borderRadius: '6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: '2px 8px',
-                    borderWidth: 0.5
-                  }}>
                   <i className="iconfont icon-history" style={{ marginRight: '3px' }} />
                   {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT}
                   <Divider type="vertical" style={{ marginTop: 2, marginLeft: 5, marginRight: 5 }} />↑{inputTokenCount}
                   <span style={{ margin: '0 2px' }}>/</span>
                   {estimateTokenCount}
-                </Tag>
+                </StyledTag>
               </Tooltip>
             </TextCount>
           )}
@@ -246,6 +264,12 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   )
 }
 
+const TextareaStyle: CSSProperties = {
+  paddingLeft: 0,
+  padding: '10px 15px 8px',
+  transition: 'all 0.3s ease'
+}
+
 const Container = styled.div`
   border: 1px solid var(--color-border-soft);
   transition: all 0.3s ease;
@@ -285,12 +309,17 @@ const ToolbarMenu = styled.div`
 `
 
 const ToolbarButton = styled(Button)`
-  width: 32px;
+  width: 30px;
-  height: 32px;
+  height: 30px;
-  font-size: 18px;
+  font-size: 17px;
   border-radius: 50%;
   transition: all 0.3s ease;
   color: var(--color-icon);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
   &.anticon {
     transition: all 0.3s ease;
     color: var(--color-icon);
@@ -313,4 +342,13 @@ const TextCount = styled.div`
   user-select: none;
 `
 
+const StyledTag = styled(Tag)`
+  cursor: pointer;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-width: 0.5;
+`
+
 export default Inputbar