Make the logo larger

This commit is contained in:
Tat Dat Duong
2025-03-04 15:43:35 +01:00
parent fcf16e11ca
commit 4e1cf154f9
2 changed files with 22 additions and 18 deletions

View File

@@ -1,4 +1,12 @@
export function LangGraphLogoSVG({ width = 20, height = 20 }) { export function LangGraphLogoSVG({
className,
width,
height,
}: {
width?: number;
height?: number;
className?: string;
}) {
return ( return (
<svg <svg
width={width} width={width}
@@ -6,6 +14,7 @@ export function LangGraphLogoSVG({ width = 20, height = 20 }) {
viewBox="0 0 98 51" viewBox="0 0 98 51"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<path <path
fillRule="evenodd" fillRule="evenodd"

View File

@@ -18,15 +18,6 @@ import { SquarePen } from "lucide-react";
import { StringParam, useQueryParam } from "use-query-params"; import { StringParam, useQueryParam } from "use-query-params";
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom"; 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() { function NewThread() {
const [threadId, setThreadId] = useQueryParam("threadId", StringParam); const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
if (!threadId) return null; if (!threadId) return null;
@@ -144,7 +135,11 @@ export function Thread() {
> >
{chatStarted && ( {chatStarted && (
<div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative"> <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 /> <NewThread />
<div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" /> <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={ footer={
<div className="sticky flex flex-col items-center gap-8 bottom-8 px-4"> <div className="sticky flex flex-col items-center gap-8 bottom-8 px-4">
{!chatStarted && <Title />} {!chatStarted && (
<div <div className="flex gap-3 items-center">
className={cn( <LangGraphLogoSVG className="flex-shrink-0 h-8" />
"bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl", <h1 className="text-2xl font-medium">LangGraph Chat</h1>
// chatStarted && "fixed bottom-6 inset-x-0", </div>
)} )}
> <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto" className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"