Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: mark RAG as experimental feature

Browse Source
This commit is contained in:
Louis 2024-01-31 23:53:30 +07:00
parent 71fcaa30f9
commit ad842dbc70
3 changed files with 127 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
web/screens/Chat/ChatInput/index.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* 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' import { InferenceEvent, MessageStatus, events } from '@janhq/core'
@ -24,6 +24,8 @@ import { twMerge } from 'tailwind-merge'
import { currentPromptAtom, fileUploadAtom } from '@/containers/Providers/Jotai' import { currentPromptAtom, fileUploadAtom } from '@/containers/Providers/Jotai'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import { useActiveModel } from '@/hooks/useActiveModel' import { useActiveModel } from '@/hooks/useActiveModel'
import { useClickOutside } from '@/hooks/useClickOutside' import { useClickOutside } from '@/hooks/useClickOutside'
@ -53,7 +55,8 @@ const ChatInput: React.FC = () => {
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
const fileInputRef = useRef<HTMLInputElement>(null) const fileInputRef = useRef<HTMLInputElement>(null)
const imageInputRef = useRef<HTMLInputElement>(null) const imageInputRef = useRef<HTMLInputElement>(null)
const [ShowAttacmentMenus, setShowAttacmentMenus] = useState(false) const [showAttacmentMenus, setShowAttacmentMenus] = useState(false)
const { experimentalFeature } = useContext(FeatureToggleContext)
const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setCurrentPrompt(e.target.value) setCurrentPrompt(e.target.value)
@ -147,50 +150,52 @@ const ChatInput: React.FC = () => {
value={currentPrompt} value={currentPrompt}
onChange={onPromptChange} onChange={onPromptChange}
/> />
{experimentalFeature && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<PaperclipIcon <PaperclipIcon
size={20} size={20}
className="absolute bottom-2 right-4 cursor-pointer text-muted-foreground" className="absolute bottom-2 right-4 cursor-pointer text-muted-foreground"
onClick={(e) => { onClick={(e) => {
if ( if (
fileUpload.length > 0 || fileUpload.length > 0 ||
(activeThread?.assistants[0].tools && (activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled) !activeThread?.assistants[0].tools[0]?.enabled)
) { ) {
e.stopPropagation() e.stopPropagation()
} else { } else {
setShowAttacmentMenus(!ShowAttacmentMenus) setShowAttacmentMenus(!showAttacmentMenus)
} }
}} }}
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal> <TooltipPortal>
{fileUpload.length > 0 || {fileUpload.length > 0 ||
(activeThread?.assistants[0].tools && (activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled && ( !activeThread?.assistants[0].tools[0]?.enabled && (
<TooltipContent side="top" className="max-w-[154px] px-3"> <TooltipContent side="top" className="max-w-[154px] px-3">
{fileUpload.length !== 0 && ( {fileUpload.length !== 0 && (
<span>
Currently, we only support 1 attachment at the same time
</span>
)}
{activeThread?.assistants[0].tools &&
activeThread?.assistants[0].tools[0]?.enabled ===
false && (
<span> <span>
Turn on Retrieval in Assistant Settings to use this Currently, we only support 1 attachment at the same
feature time
</span> </span>
)} )}
<TooltipArrow /> {activeThread?.assistants[0].tools &&
</TooltipContent> activeThread?.assistants[0].tools[0]?.enabled ===
))} false && (
</TooltipPortal> <span>
</Tooltip> Turn on Retrieval in Assistant Settings to use this
feature
</span>
)}
<TooltipArrow />
</TooltipContent>
))}
</TooltipPortal>
</Tooltip>
)}
{ShowAttacmentMenus && ( {showAttacmentMenus && (
<div <div
ref={refAttachmentMenus} ref={refAttachmentMenus}
className="absolute bottom-10 right-0 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow" className="absolute bottom-10 right-0 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow"

136
web/screens/Chat/Sidebar/index.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react' import React, { useContext } from 'react'
import { InferenceEngine } from '@janhq/core' import { InferenceEngine } from '@janhq/core'
import { Input, Textarea, Switch } from '@janhq/uikit' import { Input, Textarea, Switch } from '@janhq/uikit'
@ -15,6 +15,8 @@ import DropdownListSidebar, {
selectedModelAtom, selectedModelAtom,
} from '@/containers/DropdownListSidebar' } from '@/containers/DropdownListSidebar'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import { useCreateNewThread } from '@/hooks/useCreateNewThread' import { useCreateNewThread } from '@/hooks/useCreateNewThread'
import { getConfigurationsData } from '@/utils/componentSettings' import { getConfigurationsData } from '@/utils/componentSettings'
@ -39,6 +41,7 @@ const Sidebar: React.FC = () => {
const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom) const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
const selectedModel = useAtomValue(selectedModelAtom) const selectedModel = useAtomValue(selectedModelAtom)
const { updateThreadMetadata } = useCreateNewThread() const { updateThreadMetadata } = useCreateNewThread()
const { experimentalFeature } = useContext(FeatureToggleContext)
const modelEngineParams = toSettingParams(activeModelParams) const modelEngineParams = toSettingParams(activeModelParams)
const modelRuntimeParams = toRuntimeParams(activeModelParams) const modelRuntimeParams = toRuntimeParams(activeModelParams)
@ -131,71 +134,74 @@ const Sidebar: React.FC = () => {
}} }}
/> />
</div> </div>
{experimentalFeature && (
<div> <div>
{activeThread?.assistants[0]?.tools && {activeThread?.assistants[0]?.tools &&
componentDataAssistantSetting.length > 0 && ( componentDataAssistantSetting.length > 0 && (
<div className="mt-2"> <div className="mt-2">
<CardSidebar <CardSidebar
title="Retrieval" title="Retrieval"
asChild asChild
rightAction={ rightAction={
<Switch <Switch
name="retrieval" name="retrieval"
className="mr-2" className="mr-2"
checked={activeThread?.assistants[0].tools[0].enabled} checked={
onCheckedChange={(e) => { activeThread?.assistants[0].tools[0].enabled
if (activeThread) }
updateThreadMetadata({ onCheckedChange={(e) => {
...activeThread, if (activeThread)
assistants: [ updateThreadMetadata({
{ ...activeThread,
...activeThread.assistants[0], assistants: [
tools: [ {
{ ...activeThread.assistants[0],
type: 'retrieval', tools: [
enabled: e, {
settings: type: 'retrieval',
(activeThread.assistants[0].tools && enabled: e,
activeThread.assistants[0].tools[0] settings:
?.settings) ?? (activeThread.assistants[0].tools &&
{}, activeThread.assistants[0]
}, .tools[0]?.settings) ??
], {},
}, },
], ],
}) },
}} ],
/> })
} }}
>
{activeThread?.assistants[0]?.tools[0].enabled && (
<div className="px-2 py-4">
<div className="mb-4">
<label
id="tool-title"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Embedding Engine
</label>
<div className="flex items-center justify-between">
<label className="font-medium text-zinc-500 dark:text-gray-300">
{selectedModel?.engine ===
InferenceEngine.openai
? 'OpenAI'
: 'Nitro'}
</label>
</div>
</div>
<AssistantSetting
componentData={componentDataAssistantSetting}
/> />
</div> }
)} >
</CardSidebar> {activeThread?.assistants[0]?.tools[0].enabled && (
</div> <div className="px-2 py-4">
)} <div className="mb-4">
</div> <label
id="tool-title"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Embedding Engine
</label>
<div className="flex items-center justify-between">
<label className="font-medium text-zinc-500 dark:text-gray-300">
{selectedModel?.engine ===
InferenceEngine.openai
? 'OpenAI'
: 'Nitro'}
</label>
</div>
</div>
<AssistantSetting
componentData={componentDataAssistantSetting}
/>
</div>
)}
</CardSidebar>
</div>
)}
</div>
)}
</div> </div>
</CardSidebar> </CardSidebar>
<CardSidebar title="Model"> <CardSidebar title="Model">

10
web/screens/Chat/index.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import React, { useEffect, useState } from 'react' import React, { useContext, useEffect, useState } from 'react'
import { useDropzone } from 'react-dropzone' import { useDropzone } from 'react-dropzone'
@ -17,6 +17,8 @@ import { showLeftSideBarAtom } from '@/containers/Providers/KeyListener'
import { snackbar } from '@/containers/Toast' import { snackbar } from '@/containers/Toast'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import { queuedMessageAtom, reloadModelAtom } from '@/hooks/useSendChatMessage' import { queuedMessageAtom, reloadModelAtom } from '@/hooks/useSendChatMessage'
import ChatBody from '@/screens/Chat/ChatBody' import ChatBody from '@/screens/Chat/ChatBody'
@ -59,6 +61,8 @@ const ChatScreen: React.FC = () => {
const reloadModel = useAtomValue(reloadModelAtom) const reloadModel = useAtomValue(reloadModelAtom)
const [dragRejected, setDragRejected] = useState({ code: '' }) const [dragRejected, setDragRejected] = useState({ code: '' })
const setFileUpload = useSetAtom(fileUploadAtom) const setFileUpload = useSetAtom(fileUploadAtom)
const { experimentalFeature } = useContext(FeatureToggleContext)
const { getRootProps, isDragReject } = useDropzone({ const { getRootProps, isDragReject } = useDropzone({
noClick: true, noClick: true,
multiple: false, multiple: false,
@ -67,6 +71,8 @@ const ChatScreen: React.FC = () => {
}, },
onDragOver: (e) => { onDragOver: (e) => {
// Retrieval file drag and drop is experimental feature
if (!experimentalFeature) return
if ( if (
e.dataTransfer.items.length === 1 && e.dataTransfer.items.length === 1 &&
activeThread?.assistants[0].tools && activeThread?.assistants[0].tools &&
@ -84,6 +90,8 @@ const ChatScreen: React.FC = () => {
}, },
onDragLeave: () => setDragOver(false), onDragLeave: () => setDragOver(false),
onDrop: (files, rejectFiles) => { onDrop: (files, rejectFiles) => {
// Retrieval file drag and drop is experimental feature
if (!experimentalFeature) return
if ( if (
!files || !files ||
files.length !== 1 || files.length !== 1 ||