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

feat: move stop inference button into the send button

Browse Source
This commit is contained in:
Faisal Amir 2023-12-14 16:33:42 +07:00
parent ef85220910
commit 4f41dab9b5
4 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
extensions/inference-nitro-extension/src/index.ts
View File

@ -227,6 +227,11 @@ export default class JanInferenceNitroExtension implements InferenceExtension {
events.emit(EventName.OnMessageUpdate, message);
},
error: async (err) => {
if (instance.isCancelled) {
message.status = MessageStatus.Ready;
events.emit(EventName.OnMessageUpdate, message);
return;
}
const messageContent: ThreadContent = {
type: ContentType.Text,
text: {

5
extensions/inference-openai-extension/src/index.ts
View File

@ -217,6 +217,11 @@ export default class JanInferenceOpenAIExtension implements InferenceExtension {
events.emit(EventName.OnMessageUpdate, message);
},
error: async (err) => {
if (instance.isCancelled) {
message.status = MessageStatus.Ready;
events.emit(EventName.OnMessageUpdate, message);
return;
}
const messageContent: ThreadContent = {
type: ContentType.Text,
text: {

48
web/screens/Chat/MessageToolbar/index.tsx
View File

@ -1,14 +1,12 @@
import {
EventName,
MessageStatus,
ExtensionType,
ThreadMessage,
events,
ChatCompletionRole,
} from '@janhq/core'
import { ConversationalExtension, InferenceExtension } from '@janhq/core'
import { ConversationalExtension } from '@janhq/core'
import { useAtomValue, useSetAtom } from 'jotai'
import { RefreshCcw, Copy, Trash2Icon, StopCircle } from 'lucide-react'
import { RefreshCcw, Copy, Trash2Icon } from 'lucide-react'
import { twMerge } from 'tailwind-merge'
@ -29,17 +27,6 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
const messages = useAtomValue(getCurrentChatMessagesAtom)
const { resendChatMessage } = useSendChatMessage()
const onStopInferenceClick = async () => {
events.emit(EventName.OnInferenceStopped, {})
setTimeout(() => {
events.emit(EventName.OnMessageUpdate, {
...message,
status: MessageStatus.Ready,
})
}, 300)
}
const onDeleteClick = async () => {
deleteMessage(message.id ?? '')
if (thread) {
@ -60,26 +47,19 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
resendChatMessage(message)
}
if (message.status !== MessageStatus.Ready) return null
return (
<div className={twMerge('flex flex-row items-center')}>
<div className="flex overflow-hidden rounded-md border border-border bg-background/20">
{message.status === MessageStatus.Pending && (
{message.id === messages[messages.length - 1]?.id && (
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={onStopInferenceClick}
onClick={onRegenerateClick}
>
<StopCircle size={14} />
<RefreshCcw size={14} />
</div>
)}
{message.status !== MessageStatus.Pending &&
message.id === messages[messages.length - 1]?.id && (
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={onRegenerateClick}
>
<RefreshCcw size={14} />
</div>
)}
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => {
@ -91,14 +71,12 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
>
<Copy size={14} />
</div>
{message.status === MessageStatus.Ready && (
<div
className="cursor-pointer px-2 py-2 hover:bg-background/80"
onClick={onDeleteClick}
>
<Trash2Icon size={14} />
</div>
)}
<div
className="cursor-pointer px-2 py-2 hover:bg-background/80"
onClick={onDeleteClick}
>
<Trash2Icon size={14} />
</div>
</div>
</div>
)

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

@ -1,9 +1,11 @@
import { ChangeEvent, Fragment, KeyboardEvent, useEffect, useRef } from 'react'
import { EventName, MessageStatus, events } from '@janhq/core'
import { Button, Textarea } from '@janhq/uikit'
import { useAtom, useAtomValue } from 'jotai'
import { StopCircle } from 'lucide-react'
import { twMerge } from 'tailwind-merge'
import LogoMark from '@/containers/Brand/Logo/Mark'
@ -26,6 +28,7 @@ import ThreadList from '@/screens/Chat/ThreadList'
import Sidebar, { showRightSideBarAtom } from './Sidebar'
import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
import {
activeThreadAtom,
getActiveThreadIdAtom,
@ -40,6 +43,7 @@ const ChatScreen = () => {
const { activeModel, stateModel } = useActiveModel()
const { setMainViewState } = useMainViewState()
const messages = useAtomValue(getCurrentChatMessagesAtom)
const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
const activeThreadState = useAtomValue(activeThreadStateAtom)
@ -94,6 +98,10 @@ const ChatScreen = () => {
}
}
const onStopInferenceClick = async () => {
events.emit(EventName.OnInferenceStopped, {})
}
return (
<div className="flex h-full w-full">
<div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background dark:bg-background/50">
@ -159,14 +167,26 @@ const ChatScreen = () => {
onPromptChange(e)
}
/>
<Button
size="lg"
disabled={disabled || stateModel.loading || !activeThread}
themes={'primary'}
onClick={sendChatMessage}
>
Send
</Button>
{messages[messages.length - 1]?.status !== MessageStatus.Pending ? (
<Button
size="lg"
disabled={disabled || stateModel.loading || !activeThread}
themes="primary"
className="min-w-[100px]"
onClick={sendChatMessage}
>
Send
</Button>
) : (
<Button
size="lg"
themes="danger"
onClick={onStopInferenceClick}
className="min-w-[100px]"
>
<StopCircle size={24} />
</Button>
)}
</div>
</div>
</div>