From cf4329c40788d915538fe84d73046d9737548b7c Mon Sep 17 00:00:00 2001 From: NanaKay007 Date: Fri, 30 Jan 2026 21:39:36 -0800 Subject: [PATCH 1/3] done --- app/src/App.tsx | 16 +- app/src/components/Chat/ChatInterface.tsx | 203 +++++++++--------- .../components/Chat/ConversationSidebar.tsx | 2 +- app/src/components/Layout/Layout.tsx | 125 ++++++----- 4 files changed, 174 insertions(+), 172 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index 12197d8..5a0e0c3 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -4,7 +4,7 @@ import { Login } from './components/Auth/Login'; import { Layout } from './components/Layout/Layout'; import { CalendarList } from './components/Calendar/CalendarList'; import { CalendarDetail } from './components/Calendar/CalendarDetail'; -import { ChatInterface } from './components/Chat/ChatInterface'; + import { authService } from './services/authService'; /** @@ -111,20 +111,6 @@ function App() { ) } /> - -
- -
- - ) : ( - - ) - } - /> } /> diff --git a/app/src/components/Chat/ChatInterface.tsx b/app/src/components/Chat/ChatInterface.tsx index cd61fe8..010ab0b 100644 --- a/app/src/components/Chat/ChatInterface.tsx +++ b/app/src/components/Chat/ChatInterface.tsx @@ -20,6 +20,7 @@ export function ChatInterface() { const [selectedAction, setSelectedAction] = useState(null); const [isLoadingMessages, setIsLoadingMessages] = useState(false); const [sidebarRefreshTrigger, setSidebarRefreshTrigger] = useState(0); + const [showConversations, setShowConversations] = useState(false); const messagesEndRef = useRef(null); const [conversationId, setConversationId] = useState(undefined); @@ -40,6 +41,7 @@ export function ChatInterface() { }; const handleSelectConversation = async (selectedId: string) => { + setShowConversations(false); if (selectedId === conversationId) return; setIsLoadingMessages(true); @@ -72,6 +74,7 @@ export function ChatInterface() { setMessages([INITIAL_MESSAGE]); setPendingActions([]); setSelectedAction(null); + setShowConversations(false); chatService.clearHistory(); }; @@ -172,122 +175,124 @@ export function ChatInterface() { }; return ( -
- +
+ {/* Toolbar: history toggle + new conversation */} +
+ + +
-
-
-

Calendar Assistant

-

- Ask me to help manage your calendar -

+ {/* Conversations list overlay */} + {showConversations && ( +
+
+ )} -
- {isLoadingMessages && ( -
-
-
- )} + {/* Messages area */} +
+ {isLoadingMessages && ( +
+
+
+ )} - {messages.map((message) => ( + {messages.map((message) => ( +
-
{message.content}

+ -

{message.content}

- - {formatTime(message.timestamp)} - -
+ {formatTime(message.timestamp)} +
- ))} +
+ ))} - {isLoading && ( -
-
-
-
-
-
-
+ {isLoading && ( +
+
+
+
+
+
- )} - -
-
- - {pendingActions.length > 0 && ( -
-
- - - - {pendingActions.length} action{pendingActions.length !== 1 ? 's' : ''} awaiting approval -
)} -
-
- setInputValue(e.target.value)} - onKeyPress={handleKeyPress} - placeholder="Type your message..." - disabled={isLoading} - className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" - /> - +
+
+ + {pendingActions.length > 0 && ( +
+
+ + + + {pendingActions.length} action{pendingActions.length !== 1 ? 's' : ''} awaiting approval
+ )} + +
+
+ setInputValue(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="Type your message..." + disabled={isLoading} + className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" + /> + +
{selectedAction && ( diff --git a/app/src/components/Chat/ConversationSidebar.tsx b/app/src/components/Chat/ConversationSidebar.tsx index 75efa1c..2f5a35d 100644 --- a/app/src/components/Chat/ConversationSidebar.tsx +++ b/app/src/components/Chat/ConversationSidebar.tsx @@ -88,7 +88,7 @@ export function ConversationSidebar({ }; return ( -
+
- ))} + +
@@ -187,9 +170,37 @@ export function Layout({ children }: LayoutProps) {
-
- {children} -
+
+
+
+ {children} +
+
+ + {/* Collapsible chat panel */} +
+
+
+

Assistant

+ +
+
+ +
+
+
+
); } From edaef5632bba08fabb5a5c233e546a32ae3e9834 Mon Sep 17 00:00:00 2001 From: NanaKay007 Date: Fri, 30 Jan 2026 21:43:23 -0800 Subject: [PATCH 2/3] Make chat panel and calendar toolbar mobile-friendly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Chat panel renders as full-screen overlay on mobile, side panel on desktop - Nav bar labels collapse to icon-only on small screens - Calendar toolbar uses flex-wrap to prevent controls clipping - Tighter padding and spacing for small viewports 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../components/Calendar/CalendarDetail.tsx | 87 +++++++++---------- app/src/components/Layout/Layout.tsx | 61 ++++++------- 2 files changed, 75 insertions(+), 73 deletions(-) diff --git a/app/src/components/Calendar/CalendarDetail.tsx b/app/src/components/Calendar/CalendarDetail.tsx index 01c2879..41a1639 100644 --- a/app/src/components/Calendar/CalendarDetail.tsx +++ b/app/src/components/Calendar/CalendarDetail.tsx @@ -563,59 +563,58 @@ export function CalendarDetail() { return (
{/* ── Toolbar ── */} -
-
- {/* Back */} - +
+ {/* Back */} + - {/* Calendar dot + name */} -
-
- {calendar.name} -
+ {/* Calendar dot + name */} +
+
+ {calendar.name} +
- {/* Divider */} -
+ {/* Divider — hidden on very small screens */} +
- {/* Today button */} + {/* Today + Nav arrows */} +
+ + +
- {/* Nav arrows */} -
- - -
+ {/* Period label */} +

{headerLabel}

- {/* Period label */} -

{headerLabel}

-
+ {/* Spacer to push view switcher right */} +
{/* View switcher */}
@@ -623,7 +622,7 @@ export function CalendarDetail() {
@@ -172,34 +172,37 @@ export function Layout({ children }: LayoutProps) {
-
+
{children}
- {/* Collapsible chat panel */} -
-
-
-

Assistant

- -
-
- + {/* Collapsible chat panel — full-screen overlay on mobile, side panel on md+ */} + {showChat && ( + <> + {/* Backdrop on mobile */} +
setShowChat(false)} + /> +
+
+

Assistant

+ +
+
+ +
-
-
+ + )}
); From 62b9a0fe20431ee2a35416294b543eee1c01772d Mon Sep 17 00:00:00 2001 From: NanaKay007 Date: Fri, 30 Jan 2026 21:48:09 -0800 Subject: [PATCH 3/3] update prompt --- backend/src/agent/agent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/agent/agent.ts b/backend/src/agent/agent.ts index c9c3f94..5dd7b04 100644 --- a/backend/src/agent/agent.ts +++ b/backend/src/agent/agent.ts @@ -21,7 +21,7 @@ You can search for events by keyword using the search_events tool, and check ava When the user asks to view calendars or events, use the appropriate list tools. When the user asks to create, update, or delete events, use the corresponding tools. These mutating operations will require user approval before being executed. -Always confirm what you're about to do before taking action. Be concise and helpful.`; +Always confirm what you're about to do before taking action. Be concise and helpful. All times to be displayed to the user must be in their local time always unless they specify otherwise.`; export async function createCalendarAgent(accessToken: string) { const llm = createLLM();