diff --git a/web/screens/Chat/ChatInput/index.tsx b/web/screens/Chat/ChatInput/index.tsx index b760ab44c..ee1ac9a41 100644 --- a/web/screens/Chat/ChatInput/index.tsx +++ b/web/screens/Chat/ChatInput/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { InferenceEvent, MessageStatus, events } from '@janhq/core' @@ -24,6 +24,8 @@ import { twMerge } from 'tailwind-merge' import { currentPromptAtom, fileUploadAtom } from '@/containers/Providers/Jotai' +import { FeatureToggleContext } from '@/context/FeatureToggle' + import { useActiveModel } from '@/hooks/useActiveModel' import { useClickOutside } from '@/hooks/useClickOutside' @@ -53,7 +55,8 @@ const ChatInput: React.FC = () => { const textareaRef = useRef(null) const fileInputRef = useRef(null) const imageInputRef = useRef(null) - const [ShowAttacmentMenus, setShowAttacmentMenus] = useState(false) + const [showAttacmentMenus, setShowAttacmentMenus] = useState(false) + const { experimentalFeature } = useContext(FeatureToggleContext) const onPromptChange = (e: React.ChangeEvent) => { setCurrentPrompt(e.target.value) @@ -147,50 +150,52 @@ const ChatInput: React.FC = () => { value={currentPrompt} onChange={onPromptChange} /> - - - - { - if ( - fileUpload.length > 0 || - (activeThread?.assistants[0].tools && - !activeThread?.assistants[0].tools[0]?.enabled) - ) { - e.stopPropagation() - } else { - setShowAttacmentMenus(!ShowAttacmentMenus) - } - }} - /> - - - {fileUpload.length > 0 || - (activeThread?.assistants[0].tools && - !activeThread?.assistants[0].tools[0]?.enabled && ( - - {fileUpload.length !== 0 && ( - - Currently, we only support 1 attachment at the same time - - )} - {activeThread?.assistants[0].tools && - activeThread?.assistants[0].tools[0]?.enabled === - false && ( + {experimentalFeature && ( + + + { + if ( + fileUpload.length > 0 || + (activeThread?.assistants[0].tools && + !activeThread?.assistants[0].tools[0]?.enabled) + ) { + e.stopPropagation() + } else { + setShowAttacmentMenus(!showAttacmentMenus) + } + }} + /> + + + {fileUpload.length > 0 || + (activeThread?.assistants[0].tools && + !activeThread?.assistants[0].tools[0]?.enabled && ( + + {fileUpload.length !== 0 && ( - Turn on Retrieval in Assistant Settings to use this - feature + Currently, we only support 1 attachment at the same + time )} - - - ))} - - + {activeThread?.assistants[0].tools && + activeThread?.assistants[0].tools[0]?.enabled === + false && ( + + Turn on Retrieval in Assistant Settings to use this + feature + + )} + + + ))} + + + )} - {ShowAttacmentMenus && ( + {showAttacmentMenus && (
{ const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom) const selectedModel = useAtomValue(selectedModelAtom) const { updateThreadMetadata } = useCreateNewThread() + const { experimentalFeature } = useContext(FeatureToggleContext) const modelEngineParams = toSettingParams(activeModelParams) const modelRuntimeParams = toRuntimeParams(activeModelParams) @@ -131,71 +134,74 @@ const Sidebar: React.FC = () => { }} />
- -
- {activeThread?.assistants[0]?.tools && - componentDataAssistantSetting.length > 0 && ( -
- { - if (activeThread) - updateThreadMetadata({ - ...activeThread, - assistants: [ - { - ...activeThread.assistants[0], - tools: [ - { - type: 'retrieval', - enabled: e, - settings: - (activeThread.assistants[0].tools && - activeThread.assistants[0].tools[0] - ?.settings) ?? - {}, - }, - ], - }, - ], - }) - }} - /> - } - > - {activeThread?.assistants[0]?.tools[0].enabled && ( -
-
- -
- -
-
- + {activeThread?.assistants[0]?.tools && + componentDataAssistantSetting.length > 0 && ( +
+ { + if (activeThread) + updateThreadMetadata({ + ...activeThread, + assistants: [ + { + ...activeThread.assistants[0], + tools: [ + { + type: 'retrieval', + enabled: e, + settings: + (activeThread.assistants[0].tools && + activeThread.assistants[0] + .tools[0]?.settings) ?? + {}, + }, + ], + }, + ], + }) + }} /> -
- )} - -
- )} -
+ } + > + {activeThread?.assistants[0]?.tools[0].enabled && ( +
+
+ +
+ +
+
+ +
+ )} + +
+ )} + + )} diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx index 887d9d035..e7cb82740 100644 --- a/web/screens/Chat/index.tsx +++ b/web/screens/Chat/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import React, { useEffect, useState } from 'react' +import React, { useContext, useEffect, useState } from 'react' import { useDropzone } from 'react-dropzone' @@ -17,6 +17,8 @@ import { showLeftSideBarAtom } from '@/containers/Providers/KeyListener' import { snackbar } from '@/containers/Toast' +import { FeatureToggleContext } from '@/context/FeatureToggle' + import { queuedMessageAtom, reloadModelAtom } from '@/hooks/useSendChatMessage' import ChatBody from '@/screens/Chat/ChatBody' @@ -59,6 +61,8 @@ const ChatScreen: React.FC = () => { const reloadModel = useAtomValue(reloadModelAtom) const [dragRejected, setDragRejected] = useState({ code: '' }) const setFileUpload = useSetAtom(fileUploadAtom) + const { experimentalFeature } = useContext(FeatureToggleContext) + const { getRootProps, isDragReject } = useDropzone({ noClick: true, multiple: false, @@ -67,6 +71,8 @@ const ChatScreen: React.FC = () => { }, onDragOver: (e) => { + // Retrieval file drag and drop is experimental feature + if (!experimentalFeature) return if ( e.dataTransfer.items.length === 1 && activeThread?.assistants[0].tools && @@ -84,6 +90,8 @@ const ChatScreen: React.FC = () => { }, onDragLeave: () => setDragOver(false), onDrop: (files, rejectFiles) => { + // Retrieval file drag and drop is experimental feature + if (!experimentalFeature) return if ( !files || files.length !== 1 ||