iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor message appending logic in useMessageOption hook

Browse Source
This commit is contained in:
n4ze3m 2024-03-14 23:43:58 +05:30
parent 00bd19374a
commit 5b04e55a03
3 changed files with 130 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Common/Playground/Message.tsx
View File

@ -2,7 +2,7 @@ import Markdown from "../../Common/Markdown"
import React from "react"
import { Image, Tooltip } from "antd"
import { WebSearch } from "./WebSearch"
import { CheckIcon, ClipboardIcon } from "lucide-react"
import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react"
type Props = {
message: string
@ -26,7 +26,7 @@ export const PlaygroundMessage = (props: Props) => {
return (
<div className="group w-full text-gray-800 dark:text-gray-100">
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
<div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
<div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
<div className="w-8 flex flex-col relative items-end">
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
@ -58,7 +58,9 @@ export const PlaygroundMessage = (props: Props) => {
<Markdown message={props.message} />
</div>
{/* source if aviable */}
{props.images && props.images.length > 0 && (
{props.images &&
props.images &&
props.images.filter((img) => img.length > 0).length > 0 && (
<div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
{props.images
.filter((image) => image.length > 0)
@ -74,7 +76,7 @@ export const PlaygroundMessage = (props: Props) => {
</div>
)}
{props.isBot && (
{props.isBot && props?.sources && props?.sources.length > 0 && (
<div className="mb-3 flex flex-wrap gap-2">
{props?.sources?.map((source, index) => (
<a
@ -87,8 +89,15 @@ export const PlaygroundMessage = (props: Props) => {
))}
</div>
)}
{props.isBot && !props.isProcessing && (
<div className="flex space-x-2 gap-2">
{!props.isProcessing && (
<div
className={`space-x-2 gap-2 mt-3 ${
props.currentMessageIndex !== props.totalMessages - 1
? "hidden group-hover:flex"
: "flex"
}`}>
{props.isBot && (
<>
{!props.hideCopy && (
<Tooltip title="Copy to clipboard">
<button
@ -109,15 +118,22 @@ export const PlaygroundMessage = (props: Props) => {
</Tooltip>
)}
{/* {props.currentMessageIndex === props.totalMessages - 1 && (
{props.currentMessageIndex === props.totalMessages - 1 && (
<Tooltip title="Regenerate">
<button
onClick={props.onRengerate}
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<ArrowPathIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
<RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
</button>
</Tooltip>
)}
</>
)}
<Tooltip title="Edit">
<button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
</button>
</Tooltip>
)} */}
</div>
)}
</div>

50
src/hooks/useMessageOption.tsx
View File

@ -148,7 +148,9 @@ export const useMessageOption = () => {
baseUrl: cleanUrl(url)
})
let newMessage: Message[] = [
let newMessage: Message[] = []
if (!isRegenerate) {
newMessage = [
...messages,
{
isBot: false,
@ -164,11 +166,19 @@ export const useMessageOption = () => {
sources: []
}
]
const appendingIndex = newMessage.length - 1
if (!isRegenerate) {
setMessages(newMessage)
} else {
newMessage = [
...messages,
{
isBot: true,
name: selectedModel,
message: "▋",
sources: []
}
]
}
setMessages(newMessage)
const appendingIndex = newMessage.length - 1
try {
setIsSearchingInternet(true)
@ -321,8 +331,6 @@ export const useMessageOption = () => {
setIsProcessing(false)
setStreaming(false)
} catch (e) {
e
if (e?.name === "AbortError") {
newMessage[appendingIndex].message = newMessage[
appendingIndex
@ -393,7 +401,9 @@ export const useMessageOption = () => {
baseUrl: cleanUrl(url)
})
let newMessage: Message[] = [
let newMessage: Message[] = []
if (!isRegenerate) {
newMessage = [
...messages,
{
isBot: false,
@ -409,11 +419,19 @@ export const useMessageOption = () => {
sources: []
}
]
const appendingIndex = newMessage.length - 1
if (!isRegenerate) {
setMessages(newMessage)
} else {
newMessage = [
...messages,
{
isBot: true,
name: selectedModel,
message: "▋",
sources: []
}
]
}
setMessages(newMessage)
const appendingIndex = newMessage.length - 1
try {
const prompt = await systemPromptForNonRagOption()
@ -624,8 +642,12 @@ export const useMessageOption = () => {
const regenerateLastMessage = async () => {
if (history.length > 0) {
const lastMessage = history[history.length - 2]
setHistory(history.slice(0, -1))
setMessages(messages.slice(0, -1))
let newHistory = history
let mewMessages = messages
newHistory.pop()
mewMessages.pop()
setHistory(newHistory)
setMessages(mewMessages)
await removeMessageUsingHistoryId(historyId)
if (lastMessage.role === "user") {
await onSubmit({

5
src/libs/db.ts
View File

@ -286,11 +286,10 @@ export const updateHistory = async (id: string, title: string) => {
}
export const removeMessageUsingHistoryId = async (history_id: string) => {
// remove the last message
const db = new PageAssitDatabase()
const chatHistory = await db.getChatHistory(history_id)
const newChatHistory = chatHistory.slice(0, -1)
await db.db.set({ [history_id]: newChatHistory })
chatHistory.shift()
await db.db.set({ [history_id]: chatHistory })
}