diff --git a/src/renderer/src/assets/styles/scrollbar.scss b/src/renderer/src/assets/styles/scrollbar.scss index 190fe369..413556ea 100644 --- a/src/renderer/src/assets/styles/scrollbar.scss +++ b/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); } diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index 6fb9aabb..ead15a5b 100644 --- a/src/renderer/src/i18n/index.ts +++ b/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': '在这里输入消息...', diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index 4da9f9a2..dc5e8143 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/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 = ({ 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 = ({ assistant, setActiveTopic }) => { variant="borderless" rows={1} ref={textareaRef} - style={{ fontSize }} - styles={{ textarea: { paddingLeft: 0, boxSizing: 'border-box', padding: '10px 15px 5px' } }} + styles={{ textarea: TextareaStyle }} onFocus={() => setInputFocus(true)} onBlur={() => setInputFocus(false)} - onInput={() => { - const textArea = textareaRef.current?.resizableTextArea?.textArea - if (textArea) { - textArea.style.height = 'auto' - textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px` - } - }} + onInput={onInput} /> @@ -209,24 +230,21 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { + + + {expended ? : } + + {showInputEstimatedTokens && ( - + {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} ↑{inputTokenCount} / {estimateTokenCount} - + )} @@ -246,6 +264,12 @@ const Inputbar: FC = ({ 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; - height: 32px; - font-size: 18px; + width: 30px; + height: 30px; + 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