From 7a937ce51b5e64e2f610005c6d819a8f9a3a037a Mon Sep 17 00:00:00 2001
From: Kevin J Gao <32936811+gaokevin1@users.noreply.github.com>
Date: Wed, 23 Apr 2025 09:22:57 -0700
Subject: [PATCH] added mobile support for chat

---
 app/overview/page.tsx |  2 +-
 app/page.tsx          | 40 +++++++++++++++++++++++++++-------------
 components/chat.tsx   | 26 ++++++++++++++++++--------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/app/overview/page.tsx b/app/overview/page.tsx
index 6bab9f8..8e73390 100644
--- a/app/overview/page.tsx
+++ b/app/overview/page.tsx
@@ -661,7 +661,7 @@ export default function LandingPage() {
             </h2>
             <div className="h-1 w-20 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full mt-2 mb-4"></div>
             <p className="text-lg text-muted-foreground max-w-2xl">
-              Transform your application into a OAuth provider that other
+              Transform your application into an OAuth provider that other
               platforms can seamlessly integrate with, with Descope Inbound
               Apps.
             </p>
diff --git a/app/page.tsx b/app/page.tsx
index 95a0d2a..5b60c73 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -48,6 +48,7 @@ import { SidebarHistory } from "@/components/sidebar-history";
 import AnimatedBeamComponent from "@/components/animated-beam";
 import Link from "next/link";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { useMobile } from "@/hooks/use-mobile";
 
 type PromptType =
   | "crm-lookup"
@@ -458,9 +459,26 @@ function ChatParamsHandler({
 
 export default function Home() {
   const { isAuthenticated, isLoading } = useAuth();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-  const [historySidebarOpen, setHistorySidebarOpen] = useState(true);
-  const historySidebarRef = useRef<{ fetchChatHistory: () => void }>(null);
+  const { timezone } = useTimezone();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const historySidebarRef = useRef<{
+    fetchChatHistory: (showLoading?: boolean) => void;
+  }>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useMobile();
+
+  // Chat state
+  const [historySidebarOpen, setHistorySidebarOpen] = useState(!isMobile);
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  // Make sure sidebars stay closed on mobile after resize
+  useEffect(() => {
+    setHistorySidebarOpen(!isMobile);
+    setSidebarOpen(!isMobile);
+  }, [isMobile]);
+
   const [showProfileScreen, setShowProfileScreen] = useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [hasActivePrompt, setHasActivePrompt] = useState(false);
@@ -497,15 +515,9 @@ export default function Home() {
     useState<string>(DEFAULT_CHAT_MODEL);
   const [showGoogleMeetPrompt, setShowGoogleMeetPrompt] = useState(false);
 
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
   const [isHandlingChatChange, setIsHandlingChatChange] = useState(false);
   const [chatRedirectAttempts, setChatRedirectAttempts] = useState(0);
 
-  // Get timezone information from the context
-  const { timezone } = useTimezone();
-
   const {
     messages,
     input,
@@ -1403,8 +1415,6 @@ export default function Home() {
     setChatRedirectAttempts(0);
   }, []);
 
-  const router = useRouter();
-
   // Save chat after new messages are received
   useEffect(() => {
     // Only save if we have messages and a current chat ID
@@ -1645,7 +1655,11 @@ export default function Home() {
                 >
                   {messages.length === 0 && !isHandlingChatChange ? (
                     <div className="h-full flex flex-col items-center justify-center p-8 max-w-5xl mx-auto w-full">
-                      <h2 className="text-2xl font-bold mb-2">
+                      <h2
+                        className={`text-2xl font-bold mb-2 ${
+                          isMobile ? "text-center" : ""
+                        }`}
+                      >
                         Welcome to CRM Assistant
                       </h2>
                       <p className="text-muted-foreground mb-8 max-w-lg text-center">
@@ -1803,7 +1817,7 @@ export default function Home() {
                 </div>
               </div>
 
-              {sidebarOpen && (
+              {sidebarOpen && !isMobile && (
                 <div
                   className={`${
                     showPromptExplanation && hasActivePrompt
diff --git a/components/chat.tsx b/components/chat.tsx
index 98167b1..0ff10a3 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -17,6 +17,9 @@ import { OAuthProvider } from "@/lib/tools/base";
 import { connectToOAuthProvider, handleOAuthPopup } from "@/lib/oauth-utils";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import ReactMarkdown from "react-markdown";
+import { cn } from "@/lib/utils";
+import { useMobile } from "@/hooks/use-mobile";
 
 // Define message types
 interface UIElement {
@@ -67,10 +70,13 @@ export default function Chat({
   const [input, setInput] = useState(initialPrompt);
   const [isLoading, setIsLoading] = useState(false);
   const [promptStartTime, setPromptStartTime] = useState<number | null>(null);
-  const [usageCount, setUsageCount] = useState<number>(0);
-  const [usageLimit, setUsageLimit] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
   const [messagesWithActions, setMessagesWithActions] = useState<string[]>([]);
+  const [usage, setUsage] = useState<{
+    messageCount: number;
+    monthlyLimit: number;
+  } | null>(null);
+  const isMobile = useMobile();
 
   const {
     messages: chatMessages,
@@ -232,10 +238,6 @@ export default function Chat({
 
   const { toast } = useToast();
   const { user } = useAuth();
-  const [usage, setUsage] = useState<{
-    messageCount: number;
-    monthlyLimit: number;
-  } | null>(null);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -1139,7 +1141,11 @@ export default function Chat({
                 </svg>
               </div>
 
-              <h1 className="text-3xl font-bold mb-2 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
+              <h1
+                className={`text-3xl font-bold mb-2 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent ${
+                  isMobile ? "text-center" : ""
+                }`}
+              >
                 CRM Assistant
               </h1>
               <p className="text-muted-foreground text-center max-w-md mb-8 text-lg">
@@ -1373,7 +1379,11 @@ export default function Chat({
                 </svg>
               </div>
 
-              <h1 className="text-3xl font-bold mb-2 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
+              <h1
+                className={`text-3xl font-bold mb-2 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent ${
+                  isMobile ? "text-center" : ""
+                }`}
+              >
                 CRM Assistant
               </h1>
               <p className="text-muted-foreground text-center max-w-md mb-8 text-lg">