add title & logo

src/components/thread/index.tsx

@@ -12,6 +12,7 @@ import {
   DO_NOT_RENDER_ID_PREFIX,
   ensureToolCallsHaveResponses,
 } from "@/lib/ensure-tool-responses";
+import { LangGraphLogoSVG } from "../icons/langgraph";
 
 // const dummyMessages = [
 //   { type: "human", content: "Hi! What can you do?" },
@@ -30,6 +31,15 @@ import {
 //   },
 // ];
 
+function Title({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex gap-2 items-center", className)}>
+      <LangGraphLogoSVG width={32} height={32} />
+      <h1 className="text-xl font-medium">LangGraph Chat</h1>
+    </div>
+  );
+}
+
 export function Thread() {
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
@@ -89,14 +99,16 @@ export function Thread() {
       )}
     >
       <div className={cn("flex-1 px-4", chatStarted ? "pb-28" : "mt-64")}>
-        <h1
+        {!chatStarted && (
-          className={cn(
+          <div className="flex justify-center">
-            "text-2xl font-medium mb-12 text-center",
+            <Title className="mb-12" />
-            chatStarted && "hidden",
+          </div>
-          )}
+        )}
-        >
+        {chatStarted && (
-          Chat
+          <div className="hidden md:flex absolute top-4 right-4">
-        </h1>
+            <Title />
+          </div>
+        )}
 
         <div
           className={cn(