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",
"version": "1.0.25",
"version": "1.0.27",
"description": "Model Management Extension provides model exploration and seamless downloads",
"main": "dist/index.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
if (model)
updateModelParameter(
activeThread.id,
{
params: modelParams,
modelId: model.id,
engine: model.engine,
},
// Overwrite the existing model parameter
true
)
updateModelParameter(activeThread.id, {
params: modelParams,
modelId: model.id,
engine: model.engine,
})
}
},
[

13
web/hooks/useUpdateModelParameters.ts
View File

@ -37,8 +37,7 @@ export default function useUpdateModelParameters() {
const updateModelParameter = async (
threadId: string,
settings: UpdateModelParameter,
overwrite: boolean = false
settings: UpdateModelParameter
) => {
const thread = threads.find((thread) => thread.id === threadId)
if (!thread) {
@ -67,14 +66,8 @@ export default function useUpdateModelParameters() {
const runtimeParams = toRuntimeParams(updatedModelParams)
const settingParams = toSettingParams(updatedModelParams)
assistant.model.parameters = {
...(overwrite ? {} : assistant.model.parameters),
...runtimeParams,
}
assistant.model.settings = {
...(overwrite ? {} : assistant.model.settings),
...settingParams,
}
assistant.model.parameters = runtimeParams
assistant.model.settings = settingParams
if (selectedModel) {
assistant.model.id = settings.modelId ?? selectedModel?.id
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 [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
const [fileUpload, setFileUpload] = useAtom(fileUploadAtom)
const [showAttacmentMenus, setShowAttacmentMenus] = useState(false)
const textareaRef = useRef<HTMLTextAreaElement>(null)
const fileInputRef = useRef<HTMLInputElement>(null)
const imageInputRef = useRef<HTMLInputElement>(null)
const [showAttacmentMenus, setShowAttacmentMenus] = useState(false)
const experimentalFeature = useAtomValue(experimentalFeatureEnabledAtom)
const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
const threadStates = useAtomValue(threadStatesAtom)
@ -165,7 +165,8 @@ const ChatInput: React.FC = () => {
if (
fileUpload.length > 0 ||
(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()
} else {
@ -177,12 +178,13 @@ const ChatInput: React.FC = () => {
<TooltipPortal>
{fileUpload.length > 0 ||
(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">
{fileUpload.length !== 0 && (
<span>
Currently, we only support 1 attachment at the same
time
time.
</span>
)}
{activeThread?.assistants[0].tools &&
@ -190,7 +192,7 @@ const ChatInput: React.FC = () => {
false && (
<span>
Turn on Retrieval in Assistant Settings to use this
feature
feature.
</span>
)}
<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"
>
<ul>
<li
className={twMerge(
'flex w-full items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary',
activeThread?.assistants[0].model.settings.vision_model
? 'cursor-pointer'
: 'cursor-not-allowed opacity-50'
)}
onClick={() => {
if (activeThread?.assistants[0].model.settings.vision_model) {
imageInputRef.current?.click()
setShowAttacmentMenus(false)
}
}}
>
<ImageIcon size={16} />
<span className="font-medium">Image</span>
</li>
<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 &&
<Tooltip>
<TooltipTrigger asChild>
<li
className={twMerge(
'flex w-full items-center space-x-2 px-4 py-2 text-muted-foreground hover:bg-secondary',
activeThread?.assistants[0].model.settings.vision_model
? 'cursor-pointer'
: 'cursor-not-allowed opacity-50'
)}
onClick={() => {
if (
activeThread?.assistants[0].model.settings.vision_model
) {
imageInputRef.current?.click()
setShowAttacmentMenus(false)
}
}}
>
<ImageIcon size={16} />
<span className="font-medium">Image</span>
</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 ===
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>
false) && (
<TooltipContent side="top" className="max-w-[154px] px-3">
{activeThread?.assistants[0].model.settings.text_model ===
false ? (
<span>
This model does not support text-based retrieval.
</span>
) : (
<span>
Turn on Retrieval in Assistant Settings to use this
feature.
</span>
)}
<TooltipArrow />
</TooltipContent>
)}
</TooltipPortal>
</Tooltip>
</ul>
</div>
)}

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

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

2
web/utils/modelParam.ts
View File

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