diff --git a/frontend/package.json b/frontend/package.json
index e3e27f2b4282a26b96e935f31b5f110f85c8a0ab..3aa23b20cbd6c425251b63adb69d8fcfe56a74dd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
"dependencies": {
"@metamask/jazzicon": "^2.0.0",
"@microsoft/fetch-event-source": "^2.0.1",
- "@phosphor-icons/react": "^2.0.13",
+ "@phosphor-icons/react": "^2.1.7",
"@tremor/react": "^3.15.1",
"dompurify": "^3.0.8",
"file-saver": "^2.0.5",
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..df575bb0c8aadc524de4d17002c9853bae92d534
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Trash, DotsThreeVertical, TreeView } from "@phosphor-icons/react";
+import { Tooltip } from "react-tooltip";
+
+function ActionMenu({ chatId, forkThread, isEditing, role }) {
+ const [open, setOpen] = useState(false);
+ const menuRef = useRef(null);
+
+ const toggleMenu = () => setOpen(!open);
+
+ const handleFork = () => {
+ forkThread(chatId);
+ setOpen(false);
+ };
+
+ const handleDelete = () => {
+ window.dispatchEvent(
+ new CustomEvent("delete-message", { detail: { chatId } })
+ );
+ setOpen(false);
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (menuRef.current && !menuRef.current.contains(event.target)) {
+ setOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
+ if (isEditing || role === "user") return null;
+
+ return (
+ <div className="mt-2 -ml-0.5 relative" ref={menuRef}>
+ <Tooltip
+ id="action-menu"
+ place="top"
+ delayShow={300}
+ className="tooltip !text-xs"
+ />
+ <button
+ onClick={toggleMenu}
+ className="border-none text-zinc-300 hover:text-zinc-100 transition-colors duration-200"
+ data-tooltip-id="action-menu"
+ data-tooltip-content="More actions"
+ aria-label="More actions"
+ >
+ <DotsThreeVertical size={24} weight="bold" />
+ </button>
+ {open && (
+ <div className="absolute -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-[#41454B] bg-opacity-100 flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
+ <button
+ onClick={handleFork}
+ className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+ >
+ <TreeView size={18} />
+ <span className="text-sm">Fork</span>
+ </button>
+ <button
+ onClick={handleDelete}
+ className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+ >
+ <Trash size={18} />
+ <span className="text-sm">Delete</span>
+ </button>
+ </div>
+ )}
+ </div>
+ );
+}
+
+export default ActionMenu;
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx
index 262fdb3e7b9c327e8a854b1c278298a545d8e7e5..1e9518e70c9ff18ead1e0767eda8ba2c8e8d03bf 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { Trash } from "@phosphor-icons/react";
-import { Tooltip } from "react-tooltip";
import Workspace from "@/models/workspace";
+
const DELETE_EVENT = "delete-message";
export function useWatchDeleteMessage({ chatId = null, role = "user" }) {
@@ -46,22 +46,13 @@ export function DeleteMessage({ chatId, isEditing, role }) {
}
return (
- <div className="mt-3 relative">
- <button
- onClick={emitDeleteEvent}
- data-tooltip-id={`delete-message-${chatId}`}
- data-tooltip-content="Delete message"
- className="border-none text-zinc-300"
- aria-label="Delete"
- >
- <Trash size={18} className="mb-1" />
- </button>
- <Tooltip
- id={`delete-message-${chatId}`}
- place="bottom"
- delayShow={300}
- className="tooltip !text-xs"
- />
- </div>
+ <button
+ onClick={emitDeleteEvent}
+ className="border-none flex items-center gap-x-1 w-full"
+ role="menuitem"
+ >
+ <Trash size={21} weight="fill" />
+ <p>Delete</p>
+ </button>
);
}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index f9346b26ab349f2f6b1cd1c6458deabb20522c0b..34a77dea8239afa6ee1fac77797a5898a0d13f7a 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -2,6 +2,7 @@ import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
import { Pencil } from "@phosphor-icons/react";
import { useState, useEffect, useRef } from "react";
import { Tooltip } from "react-tooltip";
+
const EDIT_EVENT = "toggle-message-edit";
export function useEditMessage({ chatId, role }) {
@@ -40,8 +41,8 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
return (
<div
className={`mt-3 relative ${
- role === "user" && !isEditing ? "opacity-0" : ""
- } group-hover:opacity-100 transition-all duration-300`}
+ role === "user" && !isEditing ? "" : "!opacity-100"
+ }`}
>
<button
onClick={handleEditClick}
@@ -52,7 +53,7 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
className="border-none text-zinc-300"
aria-label={`Edit ${role === "user" ? "Prompt" : "Response"}`}
>
- <Pencil size={18} className="mb-1" />
+ <Pencil size={21} className="mb-1" />
</button>
<Tooltip
id="edit-input-text"
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
index 19bd0e17b1f403ae09c886a627aafc4a9703351f..e383b4a0359a0d80c7f14c19f2d69befb8df5176 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -1,18 +1,10 @@
import React, { memo, useState } from "react";
import useCopyText from "@/hooks/useCopyText";
-import {
- Check,
- ThumbsUp,
- ThumbsDown,
- ArrowsClockwise,
- Copy,
- GitMerge,
-} from "@phosphor-icons/react";
+import { Check, ThumbsUp, ArrowsClockwise, Copy } from "@phosphor-icons/react";
import { Tooltip } from "react-tooltip";
import Workspace from "@/models/workspace";
-import TTSMessage from "./TTSButton";
import { EditMessageAction } from "./EditMessage";
-import { DeleteMessage } from "./DeleteMessage";
+import ActionMenu from "./ActionMenu";
const Actions = ({
message,
@@ -35,34 +27,38 @@ const Actions = ({
return (
<div className="flex w-full justify-between items-center">
- <div className="flex justify-start items-center gap-x-4 group">
+ <div className="flex justify-start items-center gap-x-[8px]">
<CopyMessage message={message} />
- <ForkThread
- chatId={chatId}
- forkThread={forkThread}
- isEditing={isEditing}
- role={role}
- />
- <EditMessageAction chatId={chatId} role={role} isEditing={isEditing} />
- {isLastMessage && !isEditing && (
- <RegenerateMessage
- regenerateMessage={regenerateMessage}
- slug={slug}
+ <div className="md:group-hover:opacity-100 transition-all duration-300 md:opacity-0 flex justify-start items-center gap-x-[8px]">
+ <EditMessageAction
chatId={chatId}
+ role={role}
+ isEditing={isEditing}
/>
- )}
- <DeleteMessage chatId={chatId} role={role} isEditing={isEditing} />
- {chatId && role !== "user" && !isEditing && (
- <FeedbackButton
- isSelected={selectedFeedback === true}
- handleFeedback={() => handleFeedback(true)}
- tooltipId={`${chatId}-thumbs-up`}
- tooltipContent="Good response"
- IconComponent={ThumbsUp}
+ {isLastMessage && !isEditing && (
+ <RegenerateMessage
+ regenerateMessage={regenerateMessage}
+ slug={slug}
+ chatId={chatId}
+ />
+ )}
+ {chatId && role !== "user" && !isEditing && (
+ <FeedbackButton
+ isSelected={selectedFeedback === true}
+ handleFeedback={() => handleFeedback(true)}
+ tooltipId={`${chatId}-thumbs-up`}
+ tooltipContent="Good response"
+ IconComponent={ThumbsUp}
+ />
+ )}
+ <ActionMenu
+ chatId={chatId}
+ forkThread={forkThread}
+ isEditing={isEditing}
+ role={role}
/>
- )}
+ </div>
</div>
- <TTSMessage slug={slug} chatId={chatId} message={message} />
</div>
);
};
@@ -84,7 +80,7 @@ function FeedbackButton({
aria-label={tooltipContent}
>
<IconComponent
- size={18}
+ size={20}
className="mb-1"
weight={isSelected ? "fill" : "regular"}
/>
@@ -113,9 +109,9 @@ function CopyMessage({ message }) {
aria-label="Copy"
>
{copied ? (
- <Check size={18} className="mb-1" />
+ <Check size={20} className="mb-1" />
) : (
- <Copy size={18} className="mb-1" />
+ <Copy size={20} className="mb-1" />
)}
</button>
<Tooltip
@@ -140,7 +136,7 @@ function RegenerateMessage({ regenerateMessage, chatId }) {
className="border-none text-zinc-300"
aria-label="Regenerate"
>
- <ArrowsClockwise size={18} className="mb-1" weight="fill" />
+ <ArrowsClockwise size={20} className="mb-1" weight="fill" />
</button>
<Tooltip
id="regenerate-assistant-text"
@@ -151,27 +147,5 @@ function RegenerateMessage({ regenerateMessage, chatId }) {
</div>
);
}
-function ForkThread({ chatId, forkThread, isEditing, role }) {
- if (!chatId || isEditing || role === "user") return null;
- return (
- <div className="mt-3 relative">
- <button
- onClick={() => forkThread(chatId)}
- data-tooltip-id="fork-thread"
- data-tooltip-content="Fork chat to new thread"
- className="border-none text-zinc-300"
- aria-label="Fork"
- >
- <GitMerge size={18} className="mb-1" weight="fill" />
- </button>
- <Tooltip
- id="fork-thread"
- place="bottom"
- delayShow={300}
- className="tooltip !text-xs"
- />
- </div>
- );
-}
export default memo(Actions);
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index 7aa04bdd59e3d8a2058d877a5a59344be6036d16..7446b166cf566186174e34f6cdd487ba45abb61d 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -10,6 +10,7 @@ import { v4 } from "uuid";
import createDOMPurify from "dompurify";
import { EditMessageForm, useEditMessage } from "./Actions/EditMessage";
import { useWatchDeleteMessage } from "./Actions/DeleteMessage";
+import TTSMessage from "./Actions/TTSButton";
const DOMPurify = createDOMPurify(window);
const HistoricalMessage = ({
@@ -76,7 +77,16 @@ const HistoricalMessage = ({
>
<div className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}>
<div className="flex gap-x-5">
- <ProfileImage role={role} workspace={workspace} />
+ <div className="flex flex-col items-center">
+ <ProfileImage role={role} workspace={workspace} />
+ <div className="mt-1 -mb-10">
+ <TTSMessage
+ slug={workspace?.slug}
+ chatId={chatId}
+ message={message}
+ />
+ </div>
+ </div>
{isEditing ? (
<EditMessageForm
role={role}
@@ -94,8 +104,7 @@ const HistoricalMessage = ({
/>
)}
</div>
- <div className="flex gap-x-5">
- <div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden" />
+ <div className="flex gap-x-5 ml-14">
<Actions
message={message}
feedbackScore={feedbackScore}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 348541b8a716b58682580195b24aa8121badad08..8f4648a48045d612c0e27f19617813e95a4d21e3 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -528,10 +528,10 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
-"@phosphor-icons/react@^2.0.13":
- version "2.0.14"
- resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.0.14.tgz#3c8977cc81cc376d0c6afda46882eb5dc9b8b54d"
- integrity sha512-VaZ7/JEQ7dW+Up23l7t6lqJ3dPJupM03916Pat+ZOLX1vex9OeX9t8RZLJWt0oVrdc/GcrAyRD5FESDeP+M4tQ==
+"@phosphor-icons/react@^2.1.7":
+ version "2.1.7"
+ resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.1.7.tgz#b11a4b25849b7e3849970b688d9fe91e5d4fd8d7"
+ integrity sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==
"@pkgr/utils@^2.3.1":
version "2.4.2"