From 4e1cf154f940e7f4ab221ba00427f86a04c8a044 Mon Sep 17 00:00:00 2001
From: Tat Dat Duong <david@duong.cz>
Date: Tue, 4 Mar 2025 15:43:35 +0100
Subject: [PATCH] Make the logo larger

---
 src/components/icons/langgraph.tsx | 11 ++++++++++-
 src/components/thread/index.tsx    | 29 ++++++++++++-----------------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/icons/langgraph.tsx b/src/components/icons/langgraph.tsx
index 826927b..4bac592 100644
--- a/src/components/icons/langgraph.tsx
+++ b/src/components/icons/langgraph.tsx
@@ -1,4 +1,12 @@
-export function LangGraphLogoSVG({ width = 20, height = 20 }) {
+export function LangGraphLogoSVG({
+  className,
+  width,
+  height,
+}: {
+  width?: number;
+  height?: number;
+  className?: string;
+}) {
   return (
     <svg
       width={width}
@@ -6,6 +14,7 @@ export function LangGraphLogoSVG({ width = 20, height = 20 }) {
       viewBox="0 0 98 51"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         fillRule="evenodd"
diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index e301c49..d3368da 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -18,15 +18,6 @@ import { SquarePen } from "lucide-react";
 import { StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
-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>
-  );
-}
-
 function NewThread() {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
   if (!threadId) return null;
@@ -144,7 +135,11 @@ export function Thread() {
       >
         {chatStarted && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <Title />
+            <div className="flex gap-2 items-center">
+              <LangGraphLogoSVG width={32} height={32} />
+              <h1 className="text-xl font-medium">LangGraph Chat</h1>
+            </div>
+
             <NewThread />
 
             <div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" />
@@ -192,13 +187,13 @@ export function Thread() {
             }
             footer={
               <div className="sticky flex flex-col items-center gap-8 bottom-8 px-4">
-                {!chatStarted && <Title />}
-                <div
-                  className={cn(
-                    "bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl",
-                    // chatStarted && "fixed bottom-6 inset-x-0",
-                  )}
-                >
+                {!chatStarted && (
+                  <div className="flex gap-3 items-center">
+                    <LangGraphLogoSVG className="flex-shrink-0 h-8" />
+                    <h1 className="text-2xl font-medium">LangGraph Chat</h1>
+                  </div>
+                )}
+                <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl">
                   <form
                     onSubmit={handleSubmit}
                     className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"