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

Update convo state when user change model

Browse Source
This commit is contained in:
Faisal Amir 2023-11-09 12:33:08 +07:00
parent 59ea9b3639
commit ac1c7018d8
9 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
uikit/src/button/styles.scss
View File

@ -12,7 +12,7 @@
}
&-outline {
@apply border-input hover:bg-accent hover:text-accent-foreground border bg-transparent;
@apply border-input hover:bg-primary hover:text-primary-foreground border bg-transparent;
}
&-secondary {
@ -20,7 +20,7 @@
}
&-ghost {
@apply hover:bg-accent hover:text-accent-foreground;
@apply hover:bg-primary hover:text-primary-foreground;
}
&-sm {

2
uikit/src/command/styles.scss
View File

@ -25,7 +25,7 @@
}
&-list-item {
@apply text-foreground aria-selected:bg-accent relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none;
@apply text-foreground aria-selected:bg-primary relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none;
}
&-empty {

7
uikit/src/main.scss
View File

@ -27,7 +27,6 @@
}
}
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
@ -35,9 +34,6 @@
--muted: 60 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--danger: 346.8 77.2% 49.8%;
--danger-foreground: 355.7 100% 97.3%;
@ -77,9 +73,6 @@
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--danger: 346.8 77.2% 49.8%;
--danger-foreground: 355.7 100% 97.3%;

2
web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
View File

@ -73,7 +73,7 @@ export default function CommandListDownloadedModel() {
<div className="flex w-full items-center justify-between">
<span>{model.name}</span>
{activeModel && activeModel._id === model._id && (
<Badge>Active</Badge>
<Badge themes="secondary">Active</Badge>
)}
</div>
</CommandItem>

1
web/hooks/useGetConfiguredModels.ts
View File

@ -40,6 +40,7 @@ export function useGetConfiguredModels() {
// TODO allow user for filter
useEffect(() => {
fetchModels()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return { loading, models }

4
web/screens/Chat/HistoryList/index.tsx
View File

@ -1,7 +1,7 @@
import { useEffect } from 'react'
import { Conversation, Model } from '@janhq/core/lib/types'
import { Button } from '@janhq/uikit'
import { Badge, Button } from '@janhq/uikit'
import { motion as m } from 'framer-motion'
import { useAtomValue, useSetAtom } from 'jotai'
@ -64,7 +64,7 @@ export default function HistoryList() {
<div className="sticky top-0 z-20 flex flex-col border-b border-border bg-background px-4 py-3">
<Button
size="sm"
themes="outline"
themes="secondary"
onClick={handleClickConversation}
disabled={!activeModel}
>

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

@ -3,7 +3,7 @@ import { Fragment, useEffect } from 'react'
import { Model } from '@janhq/core/lib/types'
import { ScrollArea, Input, Button, Badge } from '@janhq/uikit'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { useAtom, useAtomValue } from 'jotai'
import { Trash2Icon } from 'lucide-react'
import { currentPromptAtom } from '@/containers/Providers/Jotai'
@ -17,6 +17,7 @@ import useDeleteConversation from '@/hooks/useDeleteConversation'
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
import useGetUserConversations from '@/hooks/useGetUserConversations'
import { useMainViewState } from '@/hooks/useMainViewState'
import useSendChatMessage from '@/hooks/useSendChatMessage'
@ -28,6 +29,7 @@ import HistoryList from '@/screens/Chat/HistoryList'
import {
currentConversationAtom,
getActiveConvoIdAtom,
userConversationsAtom,
waitingToSendMessage,
} from '@/helpers/atoms/Conversation.atom'
@ -40,7 +42,6 @@ const ChatScreen = () => {
const { activeModel, stateModel } = useActiveModel()
const { setMainViewState } = useMainViewState()
const isEnableChat = currentConvo && activeModel
const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
const currentConvoState = useAtomValue(currentConvoStateAtom)
const { sendChatMessage } = useSendChatMessage()
@ -49,6 +50,14 @@ const ChatScreen = () => {
const activeConversationId = useAtomValue(getActiveConvoIdAtom)
const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
const { requestCreateConvo } = useCreateConversation()
const { getUserConversations } = useGetUserConversations()
const conversations = useAtomValue(userConversationsAtom)
const isEnableChat = (currentConvo && activeModel) || conversations.length > 0
useEffect(() => {
getUserConversations()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const handleMessageChange = (value: string) => {
setCurrentPrompt(value)
@ -81,6 +90,8 @@ const ChatScreen = () => {
}
}
console.log(currentConvo)
return (
<div className="flex h-full">
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
@ -91,14 +102,34 @@ const ChatScreen = () => {
<div className="relative flex h-full w-full flex-col bg-muted/10">
<div className="flex h-full w-full flex-col justify-between">
{isEnableChat && (
<div className="h-[53px] flex-shrink-0 border-b border-border p-4">
<div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
<div className="flex items-center justify-between">
<span>{currentConvo?.name ?? ''}</span>
<Trash2Icon
size={16}
className="cursor-pointer text-muted-foreground"
onClick={() => deleteConvo()}
/>
{downloadedModels.find((x) => x.name === currentConvo?.name) ||
activeModel?._id === currentConvo?.modelId ? (
<Fragment>
{!stateModel.loading && (
<Trash2Icon
size={16}
className="cursor-pointer text-muted-foreground"
onClick={() => deleteConvo()}
/>
)}
</Fragment>
) : (
<div>
<Button
themes="secondary"
size="sm"
className="-mt-1"
onClick={() => {
setMainViewState(MainViewState.ExploreModels)
}}
>
Download Model
</Button>
</div>
)}
</div>
</div>
)}
@ -140,7 +171,11 @@ const ChatScreen = () => {
className="h-10"
onKeyDown={(e) => handleKeyDown(e)}
placeholder="Type your message ..."
disabled={!activeModel || stateModel.loading}
disabled={
!activeModel ||
stateModel.loading ||
activeModel._id !== currentConvo?.modelId
}
value={currentPrompt}
onChange={(e) => handleMessageChange(e.target.value)}
/>

2
web/screens/ExploreModels/ExploreModelList/index.tsx
View File

@ -10,7 +10,7 @@ export default function ExploreModelList(props: Props) {
const { models } = props
return (
<div className="relative h-full w-full flex-shrink-0">
{models?.map((item) => <ExploreModelItem key={item._id} model={item} />)}
{models?.map((item, i) => <ExploreModelItem key={i} model={item} />)}
</div>
)
}

3
web/screens/MyModels/index.tsx
View File

@ -113,7 +113,8 @@ const MyModelsScreen = () => {
<Button
themes="danger"
onClick={() =>
setTimeout(() => {
setTimeout(async () => {
await stopModel(model._id)
deleteModel(model)
}, 500)
}