From 15bb63670a6ae0fc59133f37df35c489b4f38558 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Fri, 20 Jun 2025 17:19:54 +1000
Subject: [PATCH] Simplify chat UI to focus on main input with pastel gradient
 background

- Hide sidebar (conversations, model picker, MCP servers) while preserving components
- Hide navbar/title bar while preserving component
- Remove title text and description above input field
- Add pastel gradient background (pink-purple-indigo)
- Expand conversation thread to full width
- Create minimal, focused interface with only white input field visible
---
 examples/chat-ui/src/components/ChatApp.tsx   | 45 ++++++++++---------
 .../src/components/ConversationThread.tsx     | 31 +++++++------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index d07ca35..b1e65af 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -102,27 +102,32 @@ const ChatApp: React.FC<ChatAppProps> = () => {
   };
 
   return (
-    <div className="flex h-dvh w-screen overflow-clip bg-white">
+    <div className="flex h-dvh w-screen overflow-clip bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100">
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
-        <ChatSidebar
-        sidebarVisible={sidebarVisible}
-        setSidebarVisible={setSidebarVisible}
-        conversations={conversations}
-        conversationId={conversationId}
-        setConversationId={setConversationId}
-        deleteConversation={deleteConversation}
-        editConversationTitle={editConversationTitle}
-        startNewConversation={startNewConversation}
-        selectedModel={selectedModel}
-        onModelChange={handleModelChange}
-        apiKeyUpdateTrigger={apiKeyUpdateTrigger}
-          onMcpToolsUpdate={setMcpTools}
-          />
-        <div className="flex flex-col flex-grow h-full w-[calc(100%-16rem)] lg:w-[calc(100%-32rem)]">
-          <ChatNavbar
-            sidebarVisible={sidebarVisible}
-            setSidebarVisible={setSidebarVisible}
-          />
+        {/* Sidebar and Navbar components hidden but kept in codebase */}
+        {false && (
+          <>
+            <ChatSidebar
+              sidebarVisible={sidebarVisible}
+              setSidebarVisible={setSidebarVisible}
+              conversations={conversations}
+              conversationId={conversationId}
+              setConversationId={setConversationId}
+              deleteConversation={deleteConversation}
+              editConversationTitle={editConversationTitle}
+              startNewConversation={startNewConversation}
+              selectedModel={selectedModel}
+              onModelChange={handleModelChange}
+              apiKeyUpdateTrigger={apiKeyUpdateTrigger}
+              onMcpToolsUpdate={setMcpTools}
+            />
+            <ChatNavbar
+              sidebarVisible={sidebarVisible}
+              setSidebarVisible={setSidebarVisible}
+            />
+          </>
+        )}
+        <div className="flex flex-col flex-grow h-full w-full">
           <ConversationThread
             conversations={conversations}
             conversationId={conversationId}
diff --git a/examples/chat-ui/src/components/ConversationThread.tsx b/examples/chat-ui/src/components/ConversationThread.tsx
index e864358..82543cf 100644
--- a/examples/chat-ui/src/components/ConversationThread.tsx
+++ b/examples/chat-ui/src/components/ConversationThread.tsx
@@ -160,7 +160,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
   console.log({ currentConversation })
 
   return (
-    <div className={`flex flex-col h-[calc(100%-3rem)] w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
+    <div className={`flex flex-col h-full w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
       <div
         ref={messagesContainerRef}
         className={`
@@ -170,19 +170,24 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
         <div className="max-w-2xl mx-auto w-full px-4">
           {currentConversation.messages.length === 0 ? (
             <div className="text-center">
-              <h1 className="text-4xl font-semibold text-zinc-800">What do you want to know?</h1>
-              <div className="mt-4">
-                <h2 className="mt-2 text-md opacity-70">
-                  AI chat template built with React, Vite and Cloudflare Workers AI.
-                  <div className="mt-1 w-full">
-                    Find the source code on{' '}
-                    <a className="text-blue-700" href="https://github.com/thomasgauvin/ai-chat-template">
-                      GitHub
-                    </a>
-                    .
+              {/* Title and description text hidden but kept in codebase */}
+              {false && (
+                <>
+                  <h1 className="text-4xl font-semibold text-zinc-800">What do you want to know?</h1>
+                  <div className="mt-4">
+                    <h2 className="mt-2 text-md opacity-70">
+                      AI chat template built with React, Vite and Cloudflare Workers AI.
+                      <div className="mt-1 w-full">
+                        Find the source code on{' '}
+                        <a className="text-blue-700" href="https://github.com/thomasgauvin/ai-chat-template">
+                          GitHub
+                        </a>
+                        .
+                      </div>
+                    </h2>
                   </div>
-                </h2>
-              </div>
+                </>
+              )}
             </div>
           ) : (
             <div className="py-4 px-4 space-y-4">