feat: drop assistant ui, use custom chat ui

2025-03-03 12:31:27 -08:00
parent a75c710990
commit 3f3f50d5c5
20 changed files with 4553 additions and 2477 deletions
--- a/src/components/thread/messages/human.tsx
+++ b/src/components/thread/messages/human.tsx
@@ -0,0 +1,107 @@
+import { useStreamContext } from "@/providers/Stream";
+import { Message } from "@langchain/langgraph-sdk";
+import { useState } from "react";
+import { getContentString } from "../utils";
+import { cn } from "@/lib/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { BranchSwitcher, CommandBar } from "./shared";
+
+function EditableContent({
+  value,
+  setValue,
+  onSubmit,
+}: {
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit: () => void;
+}) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}
+
+export function HumanMessage({
+  message,
+  isLoading,
+}: {
+  message: Message;
+  isLoading: boolean;
+}) {
+  const thread = useStreamContext();
+  const meta = thread.getMessagesMetadata(message);
+  const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState("");
+  const contentString = getContentString(message.content);
+
+  const handleSubmitEdit = () => {
+    setIsEditing(false);
+    thread.submit(
+      {
+        messages: [
+          {
+            ...message,
+            content: value,
+          },
+        ],
+      },
+      {
+        checkpoint: parentCheckpoint,
+      },
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center ml-auto gap-2 px-4 py-2 group",
+        isEditing && "w-full max-w-xl",
+      )}
+    >
+      <div className={cn("flex flex-col gap-2", isEditing && "w-full")}>
+        {isEditing ? (
+          <EditableContent
+            value={value}
+            setValue={setValue}
+            onSubmit={handleSubmitEdit}
+          />
+        ) : (
+          <p>{contentString}</p>
+        )}
+        <div className="flex gap-2 items-center ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
+          <BranchSwitcher
+            branch={meta?.branch}
+            branchOptions={meta?.branchOptions}
+            onSelect={(branch) => thread.setBranch(branch)}
+            isLoading={isLoading}
+          />
+          <CommandBar
+            isLoading={isLoading}
+            content={contentString}
+            isEditing={isEditing}
+            setIsEditing={(c) => {
+              if (c) {
+                setValue(contentString);
+              }
+              setIsEditing(c);
+            }}
+            handleSubmitEdit={handleSubmitEdit}
+            isHumanMessage={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}