[STYLE] Implement new chat tools UI (#1835)

* implement new chat tools ui + bump phosphor icons package for new icons * move TTS button below user image/fix styling * Show tools on hover update package deps * patch styles for desktop * fix more actions tooltip and disable hide/show on hover for mobile * z-index on mobile patch --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
2025-05-02 17:07:13 +00:00 · 2024-07-10 12:16:58 -07:00 · 2024-07-10 12:16:58 -07:00 · e7fe35bda9
commit e7fe35bda9
parent f6c61d0dd1
7 changed files with 140 additions and 88 deletions
--- 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",
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
+++ 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;
--- 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>
  );
 }
--- 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"
--- 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);
--- 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}
--- 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"