diff --git a/uikit/src/input/styles.scss b/uikit/src/input/styles.scss index 9990da8b4..e649f494d 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 bc5b6c0cc..6f6cd5800 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 38a8678d9..cb9942087 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 406bf8f74..6f64c4070 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 aea25bef1..35fb853b4 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 ee1ac9a41..b53c4d651 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 8088501b9..b2ab6dab5 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 e3eedb6c1..29f440cb6 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 (