From 33f4ab7b42aa4040587e395b9cfe3575c2d8a2f2 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Fri, 10 Nov 2023 17:12:57 +0800
Subject: [PATCH] fix copy render msg

---
 src/chatgpt.ts  |   8 ++++
 src/global.css  |   2 +-
 src/message.tsx | 120 ++++++++++++++++++++++++++++++------------------
 3 files changed, 85 insertions(+), 45 deletions(-)

diff --git a/src/chatgpt.ts b/src/chatgpt.ts
index 6704c46..748476a 100644
--- a/src/chatgpt.ts
+++ b/src/chatgpt.ts
@@ -47,6 +47,14 @@ export interface StreamingResponseChunk {
 }
 export const getMessageText = (message: Message): string => {
   if (typeof message.content === "string") {
+    // function call message
+    if (message.tool_calls) {
+      return message.tool_calls
+        .map((tc) => {
+          return `Tool Call ID: ${tc.id}\nType: ${tc.type}\nFunction: ${tc.function.name}\nArguments: ${tc.function.arguments}}`;
+        })
+        .join("\n");
+    }
     return message.content;
   }
   return message.content
diff --git a/src/global.css b/src/global.css
index f67213a..c951762 100644
--- a/src/global.css
+++ b/src/global.css
@@ -28,6 +28,6 @@ body::-webkit-scrollbar {
   display: none;
 }
 
-p.message-content {
+.message-content {
   white-space: pre-wrap;
 }
diff --git a/src/message.tsx b/src/message.tsx
index b7f8f1e..94c2a4b 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -245,14 +245,18 @@ export default function Message(props: Props) {
     </span>
   );
 
-  const CopyIcon = () => {
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setShowCopiedHint(true);
+    setTimeout(() => setShowCopiedHint(false), 1000);
+  };
+
+  const CopyIcon = ({ textToCopy }: { textToCopy: string }) => {
     return (
       <>
         <button
           onClick={() => {
-            navigator.clipboard.writeText(getMessageText(chat));
-            setShowCopiedHint(true);
-            setTimeout(() => setShowCopiedHint(false), 1000);
+            copyToClipboard(textToCopy);
           }}
         >
           📋
@@ -288,59 +292,87 @@ export default function Message(props: Props) {
                 : "bg-green-400"
             } ${chat.hide ? "opacity-50" : ""}`}
           >
-            {chat.tool_calls && chat.hide ? (
-              <div className="message-content">Tool Call</div>
+            {chat.hide ? (
+              getMessageText(chat).split("\n")[0].slice(0, 18) + "... (deleted)"
+            ) : typeof chat.content !== "string" ? (
+              chat.content.map((mdt) =>
+                mdt.type === "text" ? (
+                  chat.hide ? (
+                    mdt.text?.split("\n")[0].slice(0, 16) + "... (deleted)"
+                  ) : renderMarkdown ? (
+                    // @ts-ignore
+                    <Markdown markdown={mdt.text} />
+                  ) : (
+                    mdt.text
+                  )
+                ) : (
+                  <img
+                    className="cursor-pointer max-w-xs max-h-32 p-1"
+                    src={mdt.image_url?.url}
+                    onClick={() => {
+                      window.open(mdt.image_url?.url, "_blank");
+                    }}
+                  />
+                )
+              )
+            ) : renderMarkdown ? (
+              // @ts-ignore
+              <Markdown markdown={getMessageText(chat)} />
             ) : (
+              <div className="message-content">
+                {
+                  // only show when content is string or list of message
+                  chat.content && getMessageText(chat)
+                }
+              </div>
+            )}
+            {chat.tool_calls && (
               <div className="message-content">
                 <div>
                   {chat.tool_calls?.map((tool_call) => (
                     <>
                       <hr className="my-1" />
                       <div className="bg-blue-300 dark:bg-blue-800 p-1 rounded">
-                        <strong>Tool Call ID: {tool_call?.id}</strong>
+                        <strong>
+                          Tool Call ID:{" "}
+                          <span
+                            className="p-1 m-1 rounded cursor-pointer hover:opacity-50 hover:underline"
+                            onClick={() =>
+                              copyToClipboard(String(tool_call.id))
+                            }
+                          >
+                            {tool_call?.id}
+                          </span>
+                        </strong>
                         <p>Type: {tool_call?.type}</p>
-                        <p>Function: {tool_call.function.name}</p>
-                        <p>Arguments: {tool_call.function.arguments}</p>
+                        <p>
+                          Function:
+                          <span
+                            className="p-1 m-1 rounded cursor-pointer hover:opacity-50 hover:underline"
+                            onClick={() =>
+                              copyToClipboard(tool_call.function.name)
+                            }
+                          >
+                            {tool_call.function.name}
+                          </span>
+                        </p>
+                        <p>
+                          Arguments:
+                          <span
+                            className="p-1 m-1 rounded cursor-pointer hover:opacity-50 hover:underline"
+                            onClick={() =>
+                              copyToClipboard(tool_call.function.arguments)
+                            }
+                          >
+                            {tool_call.function.arguments}
+                          </span>
+                        </p>
                       </div>
                     </>
                   ))}
                 </div>
               </div>
             )}
-            <p className={renderMarkdown ? "" : "message-content"}>
-              {typeof chat.content !== "string" ? (
-                // render for multiple messages
-                chat.content.map((mdt) =>
-                  mdt.type === "text" ? (
-                    chat.hide ? (
-                      mdt.text?.split("\n")[0].slice(0, 16) + "... (deleted)"
-                    ) : renderMarkdown ? (
-                      // @ts-ignore
-                      <Markdown markdown={mdt.text} />
-                    ) : (
-                      mdt.text
-                    )
-                  ) : (
-                    <img
-                      className="cursor-pointer max-w-xs max-h-32 p-1"
-                      src={mdt.image_url?.url}
-                      onClick={() => {
-                        window.open(mdt.image_url?.url, "_blank");
-                      }}
-                    />
-                  )
-                )
-              ) : // render for single message
-              chat.hide ? (
-                getMessageText(chat).split("\n")[0].slice(0, 16) +
-                "... (deleted)"
-              ) : renderMarkdown ? (
-                // @ts-ignore
-                <Markdown markdown={getMessageText(chat)} />
-              ) : (
-                getMessageText(chat)
-              )}
-            </p>
             <hr className="mt-2" />
             <div className="w-full flex justify-between">
               <DeleteIcon />
@@ -352,7 +384,7 @@ export default function Message(props: Props) {
                   setChatStore={setChatStore}
                 />
               )}
-              <CopyIcon />
+              <CopyIcon textToCopy={getMessageText(chat)} />
             </div>
           </div>
           {showEdit && (