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

fix: image upload button and drag event are not enabled (#2248)

Browse Source 
* fix: image upload button and drag event are not enabled

* fix: add tooltips for unsupported model
This commit is contained in:
Louis 2024-03-06 09:09:38 +07:00 committed by GitHub
parent e9e69425ca
commit 5ca3069fa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 102 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/model-extension/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@janhq/model-extension", "name": "@janhq/model-extension",
"version": "1.0.25", "version": "1.0.27",
"description": "Model Management Extension provides model exploration and seamless downloads", "description": "Model Management Extension provides model exploration and seamless downloads",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/module.js", "module": "dist/module.js",

15
web/containers/DropdownListSidebar/index.tsx
View File

@ -139,16 +139,11 @@ const DropdownListSidebar = ({
// Update model parameter to the thread file // Update model parameter to the thread file
if (model) if (model)
updateModelParameter( updateModelParameter(activeThread.id, {
activeThread.id, params: modelParams,
{ modelId: model.id,
params: modelParams, engine: model.engine,
modelId: model.id, })
engine: model.engine,
},
// Overwrite the existing model parameter
true
)
} }
}, },
[ [

13
web/hooks/useUpdateModelParameters.ts
View File

@ -37,8 +37,7 @@ export default function useUpdateModelParameters() {
const updateModelParameter = async ( const updateModelParameter = async (
threadId: string, threadId: string,
settings: UpdateModelParameter, settings: UpdateModelParameter
overwrite: boolean = false
) => { ) => {
const thread = threads.find((thread) => thread.id === threadId) const thread = threads.find((thread) => thread.id === threadId)
if (!thread) { if (!thread) {
@ -67,14 +66,8 @@ export default function useUpdateModelParameters() {
const runtimeParams = toRuntimeParams(updatedModelParams) const runtimeParams = toRuntimeParams(updatedModelParams)
const settingParams = toSettingParams(updatedModelParams) const settingParams = toSettingParams(updatedModelParams)
assistant.model.parameters = { assistant.model.parameters = runtimeParams
...(overwrite ? {} : assistant.model.parameters), assistant.model.settings = settingParams
...runtimeParams,
}
assistant.model.settings = {
...(overwrite ? {} : assistant.model.settings),
...settingParams,
}
if (selectedModel) { if (selectedModel) {
assistant.model.id = settings.modelId ?? selectedModel?.id assistant.model.id = settings.modelId ?? selectedModel?.id
assistant.model.engine = settings.engine ?? selectedModel?.engine assistant.model.engine = settings.engine ?? selectedModel?.engine

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

@ -53,10 +53,10 @@ const ChatInput: React.FC = () => {
const activeThreadId = useAtomValue(getActiveThreadIdAtom) const activeThreadId = useAtomValue(getActiveThreadIdAtom)
const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage) const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
const [fileUpload, setFileUpload] = useAtom(fileUploadAtom) const [fileUpload, setFileUpload] = useAtom(fileUploadAtom)
const [showAttacmentMenus, setShowAttacmentMenus] = useState(false)
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 experimentalFeature = useAtomValue(experimentalFeatureEnabledAtom) const experimentalFeature = useAtomValue(experimentalFeatureEnabledAtom)
const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom) const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
const threadStates = useAtomValue(threadStatesAtom) const threadStates = useAtomValue(threadStatesAtom)
@ -165,7 +165,8 @@ const ChatInput: React.FC = () => {
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 &&
!activeThread?.assistants[0].model.settings.vision_model)
) { ) {
e.stopPropagation() e.stopPropagation()
} else { } else {
@ -177,12 +178,13 @@ const ChatInput: React.FC = () => {
<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 &&
!activeThread?.assistants[0].model.settings.vision_model && (
<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> <span>
Currently, we only support 1 attachment at the same Currently, we only support 1 attachment at the same
time time.
</span> </span>
)} )}
{activeThread?.assistants[0].tools && {activeThread?.assistants[0].tools &&
@ -190,7 +192,7 @@ const ChatInput: React.FC = () => {
false && ( false && (
<span> <span>
Turn on Retrieval in Assistant Settings to use this Turn on Retrieval in Assistant Settings to use this
feature feature.
</span> </span>
)} )}
<TooltipArrow /> <TooltipArrow />
@ -206,46 +208,86 @@ const ChatInput: React.FC = () => {
className="absolute bottom-10 right-0 z-30 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow" className="absolute bottom-10 right-0 z-30 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow"
> >
<ul> <ul>
<li <Tooltip>
className={twMerge( <TooltipTrigger asChild>
'flex w-full items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary', <li
activeThread?.assistants[0].model.settings.vision_model className={twMerge(
? 'cursor-pointer' 'flex w-full items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary',
: 'cursor-not-allowed opacity-50' activeThread?.assistants[0].model.settings.vision_model
)} ? 'cursor-pointer'
onClick={() => { : 'cursor-not-allowed opacity-50'
if (activeThread?.assistants[0].model.settings.vision_model) { )}
imageInputRef.current?.click() onClick={() => {
setShowAttacmentMenus(false) if (
} activeThread?.assistants[0].model.settings.vision_model
}} ) {
> imageInputRef.current?.click()
<ImageIcon size={16} /> setShowAttacmentMenus(false)
<span className="font-medium">Image</span> }
</li> }}
<li >
className={twMerge( <ImageIcon size={16} />
'flex w-full cursor-pointer items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary', <span className="font-medium">Image</span>
activeThread?.assistants[0].model.settings.vision_model && </li>
</TooltipTrigger>
<TooltipPortal>
{!activeThread?.assistants[0].model.settings.vision_model && (
<TooltipContent side="top" className="max-w-[154px] px-3">
<span>This feature only supports multimodal models.</span>
<TooltipArrow />
</TooltipContent>
)}
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<li
className={twMerge(
'flex w-full cursor-pointer items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary',
activeThread?.assistants[0].model.settings.vision_model &&
activeThread?.assistants[0].model.settings
.text_model === false
? 'cursor-not-allowed opacity-50'
: 'cursor-pointer'
)}
onClick={() => {
if (
!activeThread?.assistants[0].model.settings
.vision_model ||
activeThread?.assistants[0].model.settings
.text_model !== false
) {
fileInputRef.current?.click()
setShowAttacmentMenus(false)
}
}}
>
<FileTextIcon size={16} />
<span className="font-medium">Document</span>
</li>
</TooltipTrigger>
<TooltipPortal>
{(!activeThread?.assistants[0].tools ||
!activeThread?.assistants[0].tools[0]?.enabled ||
activeThread?.assistants[0].model.settings.text_model === activeThread?.assistants[0].model.settings.text_model ===
false false) && (
? 'cursor-not-allowed opacity-50' <TooltipContent side="top" className="max-w-[154px] px-3">
: 'cursor-pointer' {activeThread?.assistants[0].model.settings.text_model ===
)} false ? (
onClick={() => { <span>
if ( This model does not support text-based retrieval.
!activeThread?.assistants[0].model.settings.vision_model || </span>
activeThread?.assistants[0].model.settings.text_model !== ) : (
false <span>
) { Turn on Retrieval in Assistant Settings to use this
fileInputRef.current?.click() feature.
setShowAttacmentMenus(false) </span>
} )}
}} <TooltipArrow />
> </TooltipContent>
<FileTextIcon size={16} /> )}
<span className="font-medium">Document</span> </TooltipPortal>
</li> </Tooltip>
</ul> </ul>
</div> </div>
)} )}

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

@ -90,8 +90,9 @@ const ChatScreen: React.FC = () => {
if (!experimentalFeature) return if (!experimentalFeature) return
if ( if (
e.dataTransfer.items.length === 1 && e.dataTransfer.items.length === 1 &&
activeThread?.assistants[0].tools && ((activeThread?.assistants[0].tools &&
activeThread?.assistants[0].tools[0]?.enabled activeThread?.assistants[0].tools[0]?.enabled) ||
activeThread?.assistants[0].model.settings.vision_model)
) { ) {
setDragOver(true) setDragOver(true)
} else if ( } else if (
@ -112,7 +113,8 @@ const ChatScreen: React.FC = () => {
files.length !== 1 || files.length !== 1 ||
rejectFiles.length !== 0 || rejectFiles.length !== 0 ||
(activeThread?.assistants[0].tools && (activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled) !activeThread?.assistants[0].tools[0]?.enabled &&
!activeThread?.assistants[0].model.settings.vision_model)
) )
return return
const imageType = files[0]?.type.includes('image') const imageType = files[0]?.type.includes('image')

2
web/utils/modelParam.ts
View File

@ -42,6 +42,8 @@ export const toSettingParams = (
prompt_template: undefined, prompt_template: undefined,
llama_model_path: undefined, llama_model_path: undefined,
mmproj: undefined, mmproj: undefined,
vision_model: undefined,
text_model: undefined,
} }
const settingParams: ModelSettingParams = {} const settingParams: ModelSettingParams = {}