From 9e7348e623f753083564004aee4dcd0ea0d44bfb Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Thu, 8 Feb 2024 14:38:54 +0700 Subject: [PATCH] fix: RAG enhancements (#1965) * fix: rag enhancements * fix: remove auto generate prompt when user attach file * fix: remove auto generate promp attach file via dropzone * finalize RAG enhancements * customize title of action sidebar panel * remove useless import * fix miss align retrieval toggle with switch check --- uikit/src/input/styles.scss | 2 +- uikit/src/select/styles.scss | 2 +- web/containers/CardSidebar/index.tsx | 5 +- web/hooks/useCreateNewThread.ts | 16 +- web/hooks/usePath.ts | 2 + web/screens/Chat/ChatInput/index.tsx | 2 - web/screens/Chat/Sidebar/index.tsx | 237 +++++++++++++++++++-------- web/screens/Chat/index.tsx | 5 - 8 files changed, 194 insertions(+), 77 deletions(-) diff --git a/uikit/src/input/styles.scss b/uikit/src/input/styles.scss index 9990da8b4c..e649f494da 100644 --- a/uikit/src/input/styles.scss +++ b/uikit/src/input/styles.scss @@ -1,6 +1,6 @@ .input { @apply border-border placeholder:text-muted-foreground flex h-9 w-full rounded-lg border bg-transparent px-3 py-1 transition-colors; - @apply disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600; + @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600; @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1; @apply file:border-0 file:bg-transparent file:font-medium; } diff --git a/uikit/src/select/styles.scss b/uikit/src/select/styles.scss index bc5b6c0cc2..6f6cd5800b 100644 --- a/uikit/src/select/styles.scss +++ b/uikit/src/select/styles.scss @@ -1,6 +1,6 @@ .select { @apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed [&>span]:line-clamp-1; - @apply disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600; + @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600; @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1; &-caret { diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx index 38a8678d9e..cb99420876 100644 --- a/web/containers/CardSidebar/index.tsx +++ b/web/containers/CardSidebar/index.tsx @@ -156,7 +156,10 @@ export default function CardSidebar({ ) : ( <> - Opens {title}.json. + Opens{' '} + + {title === 'Tools' ? 'assistant' : title}.json. +  Changes affect all new threads. )} diff --git a/web/hooks/useCreateNewThread.ts b/web/hooks/useCreateNewThread.ts index 406bf8f740..6f64c40708 100644 --- a/web/hooks/useCreateNewThread.ts +++ b/web/hooks/useCreateNewThread.ts @@ -1,3 +1,5 @@ +import { useContext } from 'react' + import { Assistant, ConversationalExtension, @@ -6,13 +8,15 @@ import { ThreadAssistantInfo, ThreadState, Model, - MessageStatus, + AssistantTool, } from '@janhq/core' import { atom, useAtomValue, useSetAtom } from 'jotai' import { selectedModelAtom } from '@/containers/DropdownListSidebar' import { fileUploadAtom } from '@/containers/Providers/Jotai' +import { FeatureToggleContext } from '@/context/FeatureToggle' + import { generateThreadId } from '@/utils/thread' import useRecommendedModel from './useRecommendedModel' @@ -54,6 +58,7 @@ export const useCreateNewThread = () => { const setSelectedModel = useSetAtom(selectedModelAtom) const setThreadModelParams = useSetAtom(setThreadModelParamsAtom) const messages = useAtomValue(getCurrentChatMessagesAtom) + const { experimentalFeature } = useContext(FeatureToggleContext) const { recommendedModel, downloadedModels } = useRecommendedModel() @@ -72,11 +77,18 @@ export const useCreateNewThread = () => { return null } + // modify assistant tools when experimental on, retieval toggle enabled in default + const assistantTools: AssistantTool = { + type: 'retrieval', + enabled: true, + settings: assistant.tools && assistant.tools[0].settings, + } + const createdAt = Date.now() const assistantInfo: ThreadAssistantInfo = { assistant_id: assistant.id, assistant_name: assistant.name, - tools: assistant.tools, + tools: experimentalFeature ? [assistantTools] : assistant.tools, model: { id: defaultModel?.id ?? '*', settings: defaultModel?.settings ?? {}, diff --git a/web/hooks/usePath.ts b/web/hooks/usePath.ts index aea25bef11..35fb853b49 100644 --- a/web/hooks/usePath.ts +++ b/web/hooks/usePath.ts @@ -25,6 +25,7 @@ export const usePath = () => { if (!selectedModel) return filePath = await joinPath(['models', selectedModel.id]) break + case 'Tools': case 'Assistant': if (!assistantId) return filePath = await joinPath(['assistants', assistantId]) @@ -59,6 +60,7 @@ export const usePath = () => { filePath = await joinPath(['models', selectedModel.id, 'model.json']) break case 'Assistant': + case 'Tools': if (!assistantId) return filePath = await joinPath(['assistants', assistantId, 'assistant.json']) break diff --git a/web/screens/Chat/ChatInput/index.tsx b/web/screens/Chat/ChatInput/index.tsx index ee1ac9a410..b53c4d6511 100644 --- a/web/screens/Chat/ChatInput/index.tsx +++ b/web/screens/Chat/ChatInput/index.tsx @@ -112,14 +112,12 @@ const ChatInput: React.FC = () => { const file = event.target.files?.[0] if (!file) return setFileUpload([{ file: file, type: 'pdf' }]) - setCurrentPrompt('Summarize this for me') } const handleImageChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return setFileUpload([{ file: file, type: 'image' }]) - setCurrentPrompt('What do you see in this image?') } const renderPreview = (fileUpload: any) => { diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx index 8088501b9b..b2ab6dab5e 100644 --- a/web/screens/Chat/Sidebar/index.tsx +++ b/web/screens/Chat/Sidebar/index.tsx @@ -1,11 +1,20 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React, { useContext } from 'react' -import { InferenceEngine } from '@janhq/core' -import { Input, Textarea, Switch } from '@janhq/uikit' +import { + Input, + Textarea, + Switch, + Tooltip, + TooltipArrow, + TooltipContent, + TooltipPortal, + TooltipTrigger, +} from '@janhq/uikit' import { atom, useAtomValue } from 'jotai' +import { InfoIcon } from 'lucide-react' import { twMerge } from 'tailwind-merge' import LogoMark from '@/containers/Brand/Logo/Mark' @@ -134,76 +143,174 @@ const Sidebar: React.FC = () => { }} /> - {experimentalFeature && ( -
- {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 && ( -
-
+
+ + + {experimentalFeature && ( +
+ {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 && ( +
+
+
-
- -
+ + + + + + + + Embedding model is crucial for + understanding and processing the input + text effectively by converting text to + numerical representations. Align the model + choice with your task, evaluate its + performance, and consider factors like + resource availability. Experiment to find + the best fit for your specific use case. + + + + + +
+ +
+
-
- )} - +
+
+ + + + + + + + + Vector Database is crucial for efficient + storage and retrieval of embeddings. + Consider your specific task, available + resources, and language requirements. + Experiment to find the best fit for your + specific use case. + + + + + +
+ +
+ +
+
+ +
+ )}
- )} -
- )} + +
+ )}
- + )} +
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx index e3eedb6c1f..29f440cb69 100644 --- a/web/screens/Chat/index.tsx +++ b/web/screens/Chat/index.tsx @@ -110,11 +110,6 @@ const ChatScreen: React.FC = () => { const imageType = files[0]?.type.includes('image') setFileUpload([{ file: files[0], type: imageType ? 'image' : 'pdf' }]) setDragOver(false) - if (imageType) { - setCurrentPrompt('What do you see in this image?') - } else { - setCurrentPrompt('Summarize this for me') - } }, onDropRejected: (e) => { if (