Skip to content

Commit

Permalink
chore: mark RAG as experimental feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@louis-jan
louis-jan committed Jan 31, 2024
1 parent 71fcaa3 commit ad842db
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 106 deletions.
89 changes: 47 additions & 42 deletions web/screens/Chat/ChatInput/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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'

Expand Down Expand Up @@ -53,7 +55,8 @@ const ChatInput: React.FC = () => {
const textareaRef = useRef<HTMLTextAreaElement>(null)
const fileInputRef = 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>) => {
setCurrentPrompt(e.target.value)
Expand Down Expand Up @@ -147,50 +150,52 @@ const ChatInput: React.FC = () => {
value={currentPrompt}
onChange={onPromptChange}
/>

<Tooltip>
<TooltipTrigger asChild>
<PaperclipIcon
size={20}
className="absolute bottom-2 right-4 cursor-pointer text-muted-foreground"
onClick={(e) => {
if (
fileUpload.length > 0 ||
(activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled)
) {
e.stopPropagation()
} else {
setShowAttacmentMenus(!ShowAttacmentMenus)
}
}}
/>
</TooltipTrigger>
<TooltipPortal>
{fileUpload.length > 0 ||
(activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled && (
<TooltipContent side="top" className="max-w-[154px] px-3">
{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 && (
{experimentalFeature && (
<Tooltip>
<TooltipTrigger asChild>
<PaperclipIcon
size={20}
className="absolute bottom-2 right-4 cursor-pointer text-muted-foreground"
onClick={(e) => {
if (
fileUpload.length > 0 ||
(activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled)
) {
e.stopPropagation()
} else {
setShowAttacmentMenus(!showAttacmentMenus)
}
}}
/>
</TooltipTrigger>
<TooltipPortal>
{fileUpload.length > 0 ||
(activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled && (
<TooltipContent side="top" className="max-w-[154px] px-3">
{fileUpload.length !== 0 && (
<span>
Turn on Retrieval in Assistant Settings to use this
feature
Currently, we only support 1 attachment at the same
time
</span>
)}
<TooltipArrow />
</TooltipContent>
))}
</TooltipPortal>
</Tooltip>
{activeThread?.assistants[0].tools &&
activeThread?.assistants[0].tools[0]?.enabled ===
false && (
<span>
Turn on Retrieval in Assistant Settings to use this
feature
</span>
)}
<TooltipArrow />
</TooltipContent>
))}
</TooltipPortal>
</Tooltip>
)}

{ShowAttacmentMenus && (
{showAttacmentMenus && (
<div
ref={refAttachmentMenus}
className="absolute bottom-10 right-0 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow"
Expand Down
132 changes: 69 additions & 63 deletions web/screens/Chat/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react'
import React, { useContext } from 'react'

import { InferenceEngine } from '@janhq/core'
import { Input, Textarea, Switch } from '@janhq/uikit'
Expand All @@ -15,6 +15,8 @@ import DropdownListSidebar, {
selectedModelAtom,
} from '@/containers/DropdownListSidebar'

import { FeatureToggleContext } from '@/context/FeatureToggle'

import { useCreateNewThread } from '@/hooks/useCreateNewThread'

import { getConfigurationsData } from '@/utils/componentSettings'
Expand All @@ -39,6 +41,7 @@ const Sidebar: React.FC = () => {
const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
const selectedModel = useAtomValue(selectedModelAtom)
const { updateThreadMetadata } = useCreateNewThread()
const { experimentalFeature } = useContext(FeatureToggleContext)

const modelEngineParams = toSettingParams(activeModelParams)
const modelRuntimeParams = toRuntimeParams(activeModelParams)
Expand Down Expand Up @@ -131,71 +134,74 @@ const Sidebar: React.FC = () => {
}}
/>
</div>

<div>
{activeThread?.assistants[0]?.tools &&
componentDataAssistantSetting.length > 0 && (
<div className="mt-2">
<CardSidebar
title="Retrieval"
asChild
rightAction={
<Switch
name="retrieval"
className="mr-2"
checked={activeThread?.assistants[0].tools[0].enabled}
onCheckedChange={(e) => {
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 && (
<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'}
{experimentalFeature && (
<div>
{activeThread?.assistants[0]?.tools &&
componentDataAssistantSetting.length > 0 && (
<div className="mt-2">
<CardSidebar
title="Retrieval"
asChild
rightAction={
<Switch
name="retrieval"
className="mr-2"
checked={
activeThread?.assistants[0].tools[0].enabled
}
onCheckedChange={(e) => {
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 && (
<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>
<AssistantSetting
componentData={componentDataAssistantSetting}
/>
</div>
)}
</CardSidebar>
</div>
)}
</div>
)}
</CardSidebar>
</div>
)}
</div>
)}
</div>
</CardSidebar>
<CardSidebar title="Model">
Expand Down
10 changes: 9 additions & 1 deletion web/screens/Chat/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -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 &&
Expand All @@ -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 ||
Expand Down

0 comments on commit ad842db

Please sign in to comment.