introduce seperator based UI

mendableai · Jan 24, 2024 · fd43543 · fd43543
1 parent b3b8ff4
commit fd43543
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/components/chat/bubble.tsx b/src/components/chat/bubble.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { renderToString } from "react-dom/server";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Avatar } from "../ui/avatar";
 import { AiOutlineTool, AiOutlineWarning } from "react-icons/ai";
 import { CgSpinner } from "react-icons/cg";
 import { BsLightningCharge } from "react-icons/bs";
@@ -66,7 +66,6 @@ export default function Bubble({
           </div>
         </Avatar>
       )}
-
       <p className="leading-relaxed">
         <span className="block font-bold text-gray-700">
           {message.role === "user" ? "You" : "AI"}{" "}
@@ -79,21 +78,38 @@ export default function Bubble({
                     .replaceAll(
                       `<|loading_tools|>`,
                       renderToString(
-                        <CgSpinner className="animate-spin" size={20} />
+                        <div className="my-2">
+                          <CgSpinner className="animate-spin" size={20} />
+                        </div>
                       )
                     )
-                    .replaceAll(
-                      `<|tool_called|>`,
-                      renderToString(<AiOutlineTool size={20} />)
-                    )
                     .replaceAll(
                       `<|tool_error|>`,
                       renderToString(<AiOutlineWarning size={20} />)
                     )
                 : message.content
-                    .replaceAll(`<|loading_tools|>`, "")
-                    .replaceAll(`<|tool_called|>`, "")
-                    .replaceAll(`<|tool_error|>`, ""),
+                    .replaceAll(`<|tool_error|>`, "")
+                    .replaceAll(
+                      /\<\|tool_called[\s\S]*\$\$/g,
+                      renderToString(
+                        <>
+                          <div className="my-2 flex flex-row">
+                            {message.content.split("$$")[2] === "false" ? (
+                              <AiOutlineTool size={20} />
+                            ) : (
+                              <BsLightningCharge
+                                className="ms-mr-1 ms-fill-yellow-400"
+                                size={18}
+                              />
+                            )}
+                            <span className="ml-1">
+                              {message.content.split("$$")[1]}
+                            </span>
+                          </div>
+                        </>
+                      )
+                    )
+                    .replaceAll(`<|loading_tools|>`, ""),
             }}
           />
         )}

diff --git a/src/lib/mendable_stream.ts b/src/lib/mendable_stream.ts
@@ -11,13 +11,11 @@ function parseMendableStream(): (data: string) => string | void {
 
     // TODO: handle source and message_id to provide sources to the users
     // More info here: https://docs.mendable.ai/mendable-api/chat
-    if (chunk === "<|source|>" || chunk === "<|message_id|>") {
-      return;
-    }
+    if (chunk === "<|source|>" || chunk === "<|message_id|>") return;
 
-    if (chunk) {
-      return chunk;
-    }
+    if (chunk === "<|tool_called|>") return `<|tool_called|>$$${parsedData.metadata.name}$$${parsedData.metadata.is_action}$$`
+
+    if (chunk) return chunk;
   };
 }