From ab6e98aae2f9f2739bb88734425dc808fc5f82be Mon Sep 17 00:00:00 2001 From: jialin Date: Sun, 9 Mar 2025 21:24:42 +0800 Subject: [PATCH] chore: press enter to submit chat message --- src/components/audio-player/index.less | 1 + src/components/icon-font/index.tsx | 2 +- src/components/image-editor/index.less | 2 +- src/components/image-editor/index.tsx | 13 +++++---- src/config/hotkeys.ts | 6 +++- src/constants/external-links.ts | 4 ++- src/layouts/rightRender.tsx | 11 +++++-- src/locales/en-US/common.ts | 3 +- src/locales/ru-RU/common.ts | 3 +- src/locales/zh-CN/common.ts | 3 +- .../playground/components/audio-input.tsx | 2 +- .../components/ground-embedding.tsx | 25 +++++++--------- .../playground/components/ground-reranker.tsx | 25 +++++++--------- .../playground/components/ground-tts.tsx | 2 -- .../playground/components/image-edit.tsx | 1 + .../playground/components/message-input.tsx | 29 +++++++++---------- src/pages/playground/hooks/use-init-meta.ts | 9 +++--- 17 files changed, 76 insertions(+), 65 deletions(-) diff --git a/src/components/audio-player/index.less b/src/components/audio-player/index.less index b67baae4..111dd3be 100644 --- a/src/components/audio-player/index.less +++ b/src/components/audio-player/index.less @@ -75,6 +75,7 @@ } .file-name { + margin-bottom: 6px; line-height: 20px; height: 20px; display: flex; diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index fbbce0ef..3c9e572a 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons'; // import './iconfont/iconfont.js'; const IconFont = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_4613488_d7ffxju7lc6.js' + scriptUrl: '//at.alicdn.com/t/c/font_4613488_yikpvmcl8ag.js' }); export default IconFont; diff --git a/src/components/image-editor/index.less b/src/components/image-editor/index.less index 875eed40..60ff835f 100644 --- a/src/components/image-editor/index.less +++ b/src/components/image-editor/index.less @@ -18,7 +18,7 @@ } .overlay-canvas:hover { - cursor: 'none !important'; + cursor: none !important; } .upload-mask { diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index d6c1e971..b4041bb5 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -27,6 +27,7 @@ type Stroke = Point[]; type CanvasImageEditorProps = { ref?: any; + loading: boolean; imageSrc: string; disabled?: boolean; imguid: string | number; @@ -48,6 +49,7 @@ const COLOR = 'rgba(0, 0, 255, 0.3)'; const CanvasImageEditor: React.FC = forwardRef( ( { + loading, imageSrc, disabled: isDisabled, imageStatus, @@ -597,7 +599,7 @@ const CanvasImageEditor: React.FC = forwardRef( canvas!.height = img.height; // fit the image to the container - autoScale.current = autoScale.current || 1; + autoScale.current = 1; updateCanvasSize(); clearCanvas(); @@ -735,12 +737,10 @@ const CanvasImageEditor: React.FC = forwardRef( const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; - setCanvasTransformOrigin(event); - - updateZoom(scaleChange, mouseX, mouseY); - overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`; canvasRef.current!.style.transform = `scale(${autoScale.current})`; + setCanvasTransformOrigin(event); + updateZoom(scaleChange, mouseX, mouseY); }; const updateCursorPosOnZoom = (e: any) => { @@ -757,6 +757,7 @@ const CanvasImageEditor: React.FC = forwardRef( }; const handleFitView = () => { + resetCanvas(); autoScale.current = baseScale.current; translatePos.current = { x: 0, y: 0 }; setTransform(); @@ -908,7 +909,7 @@ const CanvasImageEditor: React.FC = forwardRef( onClick={handleFitView} size="middle" type="text" - disabled={isDisabled} + disabled={loading} > diff --git a/src/config/hotkeys.ts b/src/config/hotkeys.ts index 33d2040f..11b76ec3 100644 --- a/src/config/hotkeys.ts +++ b/src/config/hotkeys.ts @@ -6,7 +6,11 @@ const KeybindingsMap = { CLEAR: ['Alt+Ctrl+K', 'Alt+Meta+K'], RIGHT: ['Ctrl+RIGHT', 'Meta+RIGHT'], SAVE: ['Ctrl+S', 'Meta+S'], - SUBMIT: ['Ctrl+Enter', 'Meta+Enter'], + SUBMIT: ['Enter', 'Enter'], + ENTER: ['Enter', 'Enter'], + SHIFT: ['Shift', 'Shift'], + CTRL: ['Ctrl', 'Meta'], + OPTION: ['Alt', 'Option'], SAVEAS: ['Alt+Ctrl+S', 'Alt+Meta+S'], OPEN: ['Alt+Ctrl+O', 'Alt+Meta+O'], UNDO: ['Ctrl+Z', 'Meta+Z'], diff --git a/src/constants/external-links.ts b/src/constants/external-links.ts index 2f4629bb..19c85e9e 100644 --- a/src/constants/external-links.ts +++ b/src/constants/external-links.ts @@ -3,7 +3,9 @@ const externalLinks = { github: 'https://github.com/gpustack/gpustack', discord: 'https://discord.gg/VXYJzuaqwD', site: 'https://gpustack.ai/', - release: 'https://github.com/gpustack/gpustack/releases' + release: 'https://github.com/gpustack/gpustack/releases', + reportIssue: 'https://github.com/gpustack/gpustack/issues/new/choose', + faq: 'https://github.com/gpustack/gpustack/wiki/FAQ' }; export default externalLinks; diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx index 333521d7..ea08a31a 100644 --- a/src/layouts/rightRender.tsx +++ b/src/layouts/rightRender.tsx @@ -1,5 +1,6 @@ // @ts-nocheck import avatarImg from '@/assets/images/avatar.png'; +import IconFont from '@/components/icon-font'; import externalLinks from '@/constants/external-links'; import langConfigMap from '@/locales/lang-config-map'; import { @@ -79,8 +80,14 @@ export const getRightRenderContent = (opts: { { key: 'github', icon: , - label: 'GitHub', - url: externalLinks.github + label: intl.formatMessage({ id: 'common.issue.report' }), + url: externalLinks.reportIssue + }, + { + key: 'faq', + icon: , + label: intl.formatMessage({ id: 'common.button.faq' }), + url: externalLinks.faq }, { key: 'Discord', diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 7b07dff8..d9052f7a 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -228,5 +228,6 @@ export default { 'common.options.none': 'None', 'common.options.auto': 'Auto', 'common.search.empty': 'No matching results found.', - 'common.button.downloadLog': 'Download Log' + 'common.button.downloadLog': 'Download Log', + 'common.button.faq': 'FAQ' }; diff --git a/src/locales/ru-RU/common.ts b/src/locales/ru-RU/common.ts index 5d3e70b1..639884b3 100644 --- a/src/locales/ru-RU/common.ts +++ b/src/locales/ru-RU/common.ts @@ -226,5 +226,6 @@ export default { 'common.options.none': 'Нет', 'common.options.auto': 'Авто', 'common.search.empty': 'Ничего не найдено', - 'common.button.downloadLog': 'Скачать логи' + 'common.button.downloadLog': 'Скачать логи', + 'common.button.faq': 'TODO: Translate key "common.button.faq"' }; diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 0ee6396e..0c0a0075 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -221,5 +221,6 @@ export default { 'common.options.none': '无', 'common.options.auto': '自动', 'common.search.empty': '未找到匹配结果', - 'common.button.downloadLog': '下载日志' + 'common.button.downloadLog': '下载日志', + 'common.button.faq': '常见问题' }; diff --git a/src/pages/playground/components/audio-input.tsx b/src/pages/playground/components/audio-input.tsx index 921779a5..b789b47c 100644 --- a/src/pages/playground/components/audio-input.tsx +++ b/src/pages/playground/components/audio-input.tsx @@ -238,7 +238,7 @@ const AudioInput: React.FC = (props) => { const generateFileNameByTime = (type?: string) => { const format = getAudioFormat(type); - return `recording-${dayjs().format('YYYY-MM-DD-HH_mm_ss')}${format.suffix}`; + return `Recording-${dayjs().format('YYYY-MM-DD-HH_mm_ss')}${format.suffix}`; }; // start recording const StartRecording = async () => { diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index c5c105f9..4c9298fc 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/src/pages/playground/components/ground-embedding.tsx @@ -3,7 +3,6 @@ import ScatterChart from '@/components/echarts/scatter'; import HighlightCode from '@/components/highlight-code'; import IconFont from '@/components/icon-font'; import SealInputNumber from '@/components/seal-form/input-number'; -import HotKeys, { KeyMap } from '@/config/hotkeys'; import useOverlayScroller from '@/hooks/use-overlay-scroller'; import useRequestToken from '@/hooks/use-request-token'; import { @@ -29,7 +28,6 @@ import { useRef, useState } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; import { EMBEDDING_API, handleEmbedding } from '../apis'; import { LLM_METAKEYS } from '../hooks/config'; import { useInitLLmMeta } from '../hooks/use-init-meta'; @@ -447,17 +445,17 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { [] ); - useHotkeys( - HotKeys.SUBMIT, - (e: any) => { - e.preventDefault(); - handleSendMessage(); - }, - { - enabled: !loading, - preventDefault: true - } - ); + // useHotkeys( + // HotKeys.SUBMIT, + // (e: any) => { + // e.preventDefault(); + // handleSendMessage(); + // }, + // { + // enabled: !loading, + // preventDefault: true + // } + // ); useEffect(() => { if (scroller.current) { @@ -526,7 +524,6 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { - [{KeyMap.SUBMIT.textKeybinding}]{' '} {intl.formatMessage({ id: 'common.button.submit' })} } diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx index ea4f8209..0690fcc1 100644 --- a/src/pages/playground/components/ground-reranker.tsx +++ b/src/pages/playground/components/ground-reranker.tsx @@ -1,6 +1,5 @@ import AlertInfo from '@/components/alert-info'; import SealInputNumber from '@/components/seal-form/input-number'; -import HotKeys, { KeyMap } from '@/config/hotkeys'; import useOverlayScroller from '@/hooks/use-overlay-scroller'; import useRequestToken from '@/hooks/use-request-token'; import { @@ -23,7 +22,6 @@ import { useRef, useState } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; import { rerankerQuery } from '../apis'; import { ParamsSchema } from '../config/types'; import { LLM_METAKEYS } from '../hooks/config'; @@ -439,17 +437,17 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { } }, []); - useHotkeys( - HotKeys.SUBMIT, - (e: any) => { - e.preventDefault(); - handleSearch(queryValue); - }, - { - enabled: !loading, - preventDefault: true - } - ); + // useHotkeys( + // HotKeys.SUBMIT, + // (e: any) => { + // e.preventDefault(); + // handleSearch(queryValue); + // }, + // { + // enabled: !loading, + // preventDefault: true + // } + // ); useEffect(() => { if (scroller.current) { @@ -483,7 +481,6 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { - [{KeyMap.SUBMIT.textKeybinding}]{' '} {intl.formatMessage({ id: 'common.button.submit' })} } diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx index b08a9510..d7a0f2f5 100644 --- a/src/pages/playground/components/ground-tts.tsx +++ b/src/pages/playground/components/ground-tts.tsx @@ -5,7 +5,6 @@ import SealSelect from '@/components/seal-form/seal-select'; import SpeechContent from '@/components/speech-content'; import routeCachekey from '@/config/route-cachekey'; import useOverlayScroller from '@/hooks/use-overlay-scroller'; -import { SendOutlined } from '@ant-design/icons'; import { getLocale, useIntl, useSearchParams } from '@umijs/max'; import { Form, Spin } from 'antd'; import classNames from 'classnames'; @@ -392,7 +391,6 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { onInputChange={handleInputChange} clearAll={handleClear} shouldResetMessage={false} - submitIcon={} /> diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 627ed3a7..4d58cd07 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -314,6 +314,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { imguid={activeImgUid} imageStatus={imageStatus} imageSrc={image} + loading={loading} disabled={loading || !imageStatus.isOriginal} onSave={handleOnSave} clearUploadMask={handleClearUploadMask} diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx index 1a02488c..b90a5296 100644 --- a/src/pages/playground/components/message-input.tsx +++ b/src/pages/playground/components/message-input.tsx @@ -1,6 +1,6 @@ import IconFont from '@/components/icon-font'; import HotKeys, { KeyMap } from '@/config/hotkeys'; -import { ClearOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons'; +import { ClearOutlined, EnterOutlined, SwapOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Checkbox, Divider, Input, Tooltip } from 'antd'; import _ from 'lodash'; @@ -279,6 +279,16 @@ const MessageInput: React.FC = forwardRef( } }; + const handleOnKeydown = (e: any) => { + if (e.key === KeyMap.ENTER.keybinding) { + if (e.shiftKey) { + return; + } + e.preventDefault(); + handleSendMessage(); + } + }; + const handleDeleteLastImage = useCallback(() => { if (message.imgs && message.imgs?.length > 0) { const newImgList = [...(message.imgs || [])]; @@ -293,19 +303,6 @@ const MessageInput: React.FC = forwardRef( handleInputChange: handleInputChange })); - useHotkeys( - HotKeys.SUBMIT, - (e: any) => { - console.log('submit message', loading); - e.preventDefault(); - handleSendMessage(); - }, - { - enabled: !loading && !isDisabled, - enableOnFormTags: focused, - preventDefault: true - } - ); useHotkeys( HotKeys.ADD, (e: any) => { @@ -428,7 +425,7 @@ const MessageInput: React.FC = forwardRef( disabled={isDisabled} > {submitIcon ?? ( - + )} @@ -461,6 +458,7 @@ const MessageInput: React.FC = forwardRef( minRows: defaultSize.minRows, maxRows: defaultSize.maxRows }} + onKeyDown={handleOnKeydown} onChange={handleInputChange} value={message.content} size="large" @@ -476,6 +474,7 @@ const MessageInput: React.FC = forwardRef( minRows: defaultSize.minRows, maxRows: defaultSize.maxRows }} + onKeyDown={handleOnKeydown} onChange={handleInputChange} value={message.content} size="large" diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index 1afa342f..7c4dea11 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -69,10 +69,11 @@ export const useInitLLmMeta = ( const { initialize: innitializeParams } = useOverlayScroller(); const defaultModel = useMemo(() => { - return ( - searchParams.get('model') || - (isChat ? model ?? modelList?.[0]?.value : model) - ); + if (isChat) { + return searchParams.get('model') || model || modelList?.[0]?.value; + } + // use for multiple chat + return model; }, [model, modelList, isChat]); const extractLLMMeta = (meta: any) => { const towKeys = new Set(precisionTwoKeys);