iod/page-assist
10
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
Download Patch File Download Diff File Expand all files Collapse all files

112
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,23 +58,25 @@ export const PlaygroundMessage = (props: Props) => {
<Markdown message={props.message} />
</div>
{/* source if aviable */}
{props.images && props.images.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)
.map((image, index) => (
<Image
key={index}
src={image}
alt="Uploaded Image"
width={180}
className="rounded-md relative"
/>
))}
</div>
)}
{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)
.map((image, index) => (
<Image
key={index}
src={image}
alt="Uploaded Image"
width={180}
className="rounded-md relative"
/>
))}
</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,37 +89,51 @@ export const PlaygroundMessage = (props: Props) => {
))}
</div>
)}
{props.isBot && !props.isProcessing && (
<div className="flex space-x-2 gap-2">
{!props.hideCopy && (
<Tooltip title="Copy to clipboard">
<button
onClick={() => {
navigator.clipboard.writeText(props.message)
setIsBtnPressed(true)
setTimeout(() => {
setIsBtnPressed(false)
}, 2000)
}}
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">
{!isBtnPressed ? (
<ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
) : (
<CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
)}
</button>
</Tooltip>
)}
{!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
onClick={() => {
navigator.clipboard.writeText(props.message)
setIsBtnPressed(true)
setTimeout(() => {
setIsBtnPressed(false)
}, 2000)
}}
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">
{!isBtnPressed ? (
<ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
) : (
<CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
)}
</button>
</Tooltip>
)}
{/* {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" />
</button>
</Tooltip>
)} */}
{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">
<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>