From 8bd9d8f6ba3445c68d67ffa7386cccc2abd41ddd Mon Sep 17 00:00:00 2001 From: JzoNg Date: Thu, 19 Sep 2024 15:45:17 +0800 Subject: [PATCH] remove chat input --- .../debug/debug-with-multiple-model/index.tsx | 30 +- .../components/base/chat/chat/chat-input.tsx | 265 ------------------ web/app/components/base/chat/chat/index.tsx | 26 +- .../components/before-run-form/form-item.tsx | 2 - 4 files changed, 5 insertions(+), 318 deletions(-) delete mode 100644 web/app/components/base/chat/chat/chat-input.tsx diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx index 9957649c32..2b6d2fffcf 100644 --- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx +++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx @@ -12,19 +12,14 @@ import { } from './context' import type { DebugWithMultipleModelContextType } from './context' import { useEventEmitterContextContext } from '@/context/event-emitter' -import ChatInput from '@/app/components/base/chat/chat/chat-input' -// import ChatInputArea from '@/app/components/base/chat/chat/chat-input-area' +import ChatInputArea from '@/app/components/base/chat/chat/chat-input-area' import type { VisionFile } from '@/app/components/base/chat/types' import { useDebugConfigurationContext } from '@/context/debug-configuration' import { useFeatures } from '@/app/components/base/features/hooks' import { useStore as useAppStore } from '@/app/components/app/store' -import { Resolution, TransferMethod } from '@/types/app' const DebugWithMultipleModel = () => { - const { - mode, - // isShowVisionConfig, - } = useDebugConfigurationContext() + const { mode } = useDebugConfigurationContext() const speech2text = useFeatures(s => s.features.speech2text) const file = useFeatures(s => s.features.file) const { @@ -34,15 +29,6 @@ const DebugWithMultipleModel = () => { const { eventEmitter } = useEventEmitterContextContext() const isChatMode = mode === 'chat' || mode === 'agent-chat' - const visionConfig = useMemo(() => { - return { - enabled: file?.enabled || false, - detail: file?.image?.detail || Resolution.high, - number_limits: file?.number_limits || 3, - transfer_methods: file?.allowed_file_upload_methods || [TransferMethod.local_file, TransferMethod.remote_url], - } - }, [file]) - const handleSend = useCallback((message: string, files?: VisionFile[]) => { if (checkCanSend && !checkCanSend()) return @@ -139,22 +125,14 @@ const DebugWithMultipleModel = () => { {isChatMode && (
- - {/* */} + />
)} diff --git a/web/app/components/base/chat/chat/chat-input.tsx b/web/app/components/base/chat/chat/chat-input.tsx deleted file mode 100644 index d8f663002e..0000000000 --- a/web/app/components/base/chat/chat/chat-input.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import type { FC } from 'react' -import { - memo, - useRef, - useState, -} from 'react' -import { useContext } from 'use-context-selector' -import Recorder from 'js-audio-recorder' -import { useTranslation } from 'react-i18next' -import Textarea from 'rc-textarea' -import type { - EnableType, - OnSend, - VisionConfig, -} from '../types' -import { TransferMethod } from '../types' -import { useChatWithHistoryContext } from '../chat-with-history/context' -import type { Theme } from '../embedded-chatbot/theme/theme-context' -import { CssTransform } from '../embedded-chatbot/theme/utils' -import Tooltip from '@/app/components/base/tooltip' -import { ToastContext } from '@/app/components/base/toast' -import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' -import VoiceInput from '@/app/components/base/voice-input' -import { Microphone01 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' -import { Microphone01 as Microphone01Solid } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices' -import { XCircle } from '@/app/components/base/icons/src/vender/solid/general' -import { Send03 } from '@/app/components/base/icons/src/vender/solid/communication' -import ChatImageUploader from '@/app/components/base/image-uploader/chat-image-uploader' -import ImageList from '@/app/components/base/image-uploader/image-list' -import { - useClipboardUploader, - useDraggableUploader, - useImageFiles, -} from '@/app/components/base/image-uploader/hooks' -import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar' -import cn from '@/utils/classnames' - -type ChatInputProps = { - showFeatureBar?: boolean - showFileUpload?: boolean - featureBarDisabled?: boolean - onFeatureBarClick?: (state: boolean) => void - visionConfig?: VisionConfig - speechToTextConfig?: EnableType - onSend?: OnSend - theme?: Theme | null - noSpacing?: boolean -} -const ChatInput: FC = ({ - showFeatureBar, - showFileUpload, - featureBarDisabled, - onFeatureBarClick, - visionConfig, - speechToTextConfig, - onSend, - theme, - noSpacing, -}) => { - const { appData } = useChatWithHistoryContext() - const { t } = useTranslation() - const { notify } = useContext(ToastContext) - const [voiceInputShow, setVoiceInputShow] = useState(false) - const textAreaRef = useRef(null) - const { - files, - onUpload, - onRemove, - onReUpload, - onImageLinkLoadError, - onImageLinkLoadSuccess, - onClear, - } = useImageFiles() - const { onPaste } = useClipboardUploader({ onUpload, visionConfig, files }) - const { onDragEnter, onDragLeave, onDragOver, onDrop, isDragActive } = useDraggableUploader({ onUpload, files, visionConfig }) - const isUseInputMethod = useRef(false) - const [query, setQuery] = useState('') - const handleContentChange = (e: React.ChangeEvent) => { - const value = e.target.value - setQuery(value) - } - - const handleSend = () => { - if (onSend) { - if (files.find(item => item.type === TransferMethod.local_file && !item.fileId)) { - notify({ type: 'info', message: t('appDebug.errorMessage.waitForImgUpload') }) - return - } - if (!query || !query.trim()) { - notify({ type: 'info', message: t('appAnnotation.errorMessage.queryRequired') }) - return - } - onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({ - type: 'image', - transfer_method: fileItem.type, - url: fileItem.url, - upload_file_id: fileItem.fileId, - }))) - setQuery('') - onClear() - } - } - - const handleKeyUp = (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - e.preventDefault() - // prevent send message when using input method enter - if (!e.shiftKey && !isUseInputMethod.current) - handleSend() - } - } - - const handleKeyDown = (e: React.KeyboardEvent) => { - isUseInputMethod.current = e.nativeEvent.isComposing - if (e.key === 'Enter' && !e.shiftKey) { - setQuery(query.replace(/\n$/, '')) - e.preventDefault() - } - } - - const logError = (message: string) => { - notify({ type: 'error', message }) - } - const handleVoiceInputShow = () => { - (Recorder as any).getPermission().then(() => { - setVoiceInputShow(true) - }, () => { - logError(t('common.voiceInput.notAllow')) - }) - } - - const [isActiveIconFocused, setActiveIconFocused] = useState(false) - - const media = useBreakpoints() - const isMobile = media === MediaType.mobile - const sendIconThemeStyle = theme - ? { - color: (isActiveIconFocused || query || (query.trim() !== '')) ? theme.primaryColor : '#d1d5db', - } - : {} - const sendBtn = ( -
setActiveIconFocused(true)} - onMouseLeave={() => setActiveIconFocused(false)} - onClick={handleSend} - style={isActiveIconFocused ? CssTransform(theme?.chatBubbleColorStyle ?? '') : {}} - > - -
- ) - - return ( - <> -
-
- { - visionConfig?.enabled && ( - <> -
- = visionConfig.number_limits} - /> -
-
-
- -
- - ) - } -