Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions web/hooks/useSendChatMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,47 @@ export default function useSendChatMessage() {
const { startModel } = useActiveModel()
const [queuedMessage, setQueuedMessage] = useState(false)

const resendChatMessage = async () => {
if (!activeThread) {
console.error('No active thread')
return
}

updateThreadWaiting(activeThread.id, true)

const messages: ChatCompletionMessage[] = [
activeThread.assistants[0]?.instructions,
]
.map<ChatCompletionMessage>((instructions) => {
const systemMessage: ChatCompletionMessage = {
role: ChatCompletionRole.System,
content: instructions,
}
return systemMessage
})
.concat(
currentMessages.map<ChatCompletionMessage>((msg) => ({
role: msg.role,
content: msg.content[0]?.text.value ?? '',
}))
)

const messageRequest: MessageRequest = {
id: ulid(),
messages: messages,
threadId: activeThread.id,
}

const modelId = selectedModel?.id ?? activeThread.assistants[0].model.id

if (activeModel?.id !== modelId) {
setQueuedMessage(true)
await startModel(modelId)
setQueuedMessage(false)
}
events.emit(EventName.OnMessageSent, messageRequest)
}

const sendChatMessage = async () => {
if (!currentPrompt || currentPrompt.trim().length === 0) {
return
Expand Down Expand Up @@ -162,6 +203,7 @@ export default function useSendChatMessage() {

return {
sendChatMessage,
resendChatMessage,
queuedMessage,
}
}
52 changes: 19 additions & 33 deletions web/screens/Chat/MessageToolbar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import {
ChatCompletionMessage,
EventName,
MessageRequest,
MessageStatus,
ExtensionType,
ThreadMessage,
Expand All @@ -21,17 +19,15 @@ import {
getCurrentChatMessagesAtom,
} from '@/helpers/atoms/ChatMessage.atom'
import { activeThreadAtom } from '@/helpers/atoms/Conversation.atom'
import useSendChatMessage from '@/hooks/useSendChatMessage'

const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
const deleteMessage = useSetAtom(deleteMessageAtom)
const thread = useAtomValue(activeThreadAtom)
const messages = useAtomValue(getCurrentChatMessagesAtom)
// const threadStateAtom = useMemo(
// () => atom((get) => get(threadStatesAtom)[thread?.id ?? '']),
// [thread?.id]
// )
// const threadState = useAtomValue(threadStateAtom)
const stopInference = async () => {
const { resendChatMessage } = useSendChatMessage()

const onStopInferenceClick = async () => {
await extensionManager
.get<InferenceExtension>(ExtensionType.Inference)
?.stopInference()
Expand All @@ -43,13 +39,25 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
}, 300)
}

const onDeleteClick = async () => {
deleteMessage(message.id ?? '')
if (thread) {
await extensionManager
.get<ConversationalExtension>(ExtensionType.Conversational)
?.writeMessages(
thread.id,
messages.filter((msg) => msg.id !== message.id)
)
}
}

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 && (
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => stopInference()}
onClick={onStopInferenceClick}
>
<StopCircle size={14} />
</div>
Expand All @@ -58,20 +66,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
message.id === messages[messages.length - 1]?.id && (
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => {
const messageRequest: MessageRequest = {
id: message.id ?? '',
messages: messages.slice(0, -1).map((e) => {
const msg: ChatCompletionMessage = {
role: e.role,
content: e.content[0].text.value,
}
return msg
}),
threadId: message.thread_id ?? '',
}
events.emit(EventName.OnMessageSent, messageRequest)
}}
onClick={resendChatMessage}
>
<RefreshCcw size={14} />
</div>
Expand All @@ -89,16 +84,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
</div>
<div
className="cursor-pointer px-2 py-2 hover:bg-background/80"
onClick={async () => {
deleteMessage(message.id ?? '')
if (thread)
await extensionManager
.get<ConversationalExtension>(ExtensionType.Conversational)
?.writeMessages(
thread.id,
messages.filter((msg) => msg.id !== message.id)
)
}}
onClick={onDeleteClick}
>
<Trash2Icon size={14} />
</div>
Expand Down