Skip to content

Feat: Added mobile support for chat #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gaokevin1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feat: Added mobile support for chat #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/overview/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
40 changes: 27 additions & 13 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -1803,7 +1817,7 @@ export default function Home() {
</div>
</div>

{sidebarOpen && (
{sidebarOpen && !isMobile && (
<div
className={`${
showPromptExplanation && hasActivePrompt
Expand Down
26 changes: 18 additions & 8 deletions components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down