From 1a7cdcc57395ae146fa73c7dc06d25e6955c2a6b Mon Sep 17 00:00:00 2001
From: Alireza Akbarzadeh <Alireza.Akbarzadeh.dev@gmail.com>
Date: Sun, 2 Feb 2025 03:27:32 +0330
Subject: [PATCH] feat: create and  adviser chat app

---
 app/plan-advisor/page.tsx                  |  10 ++
 components/plan-advisor/chat-header.tsx    |  32 +++++
 components/plan-advisor/chat-input.tsx     | 138 +++++++++++++++++++++
 components/plan-advisor/chat-interface.tsx |  44 +++++++
 components/plan-advisor/chat-layout.tsx    |  36 ++++++
 components/plan-advisor/chat-messages.tsx  |  45 +++++++
 components/plan-advisor/chat-sidebar.tsx   |  54 ++++++++
 components/plan-advisor/types.ts           |   4 +
 components/ui/button.tsx                   |  34 +++--
 config/marketing.ts                        |   6 +-
 routes.ts                                  |   1 +
 11 files changed, 383 insertions(+), 21 deletions(-)
 create mode 100644 app/plan-advisor/page.tsx
 create mode 100644 components/plan-advisor/chat-header.tsx
 create mode 100644 components/plan-advisor/chat-input.tsx
 create mode 100644 components/plan-advisor/chat-interface.tsx
 create mode 100644 components/plan-advisor/chat-layout.tsx
 create mode 100644 components/plan-advisor/chat-messages.tsx
 create mode 100644 components/plan-advisor/chat-sidebar.tsx
 create mode 100644 components/plan-advisor/types.ts

diff --git a/app/plan-advisor/page.tsx b/app/plan-advisor/page.tsx
new file mode 100644
index 0000000..9d6c7b8
--- /dev/null
+++ b/app/plan-advisor/page.tsx
@@ -0,0 +1,10 @@
+import { ChatInterface } from '@/components/plan-advisor/chat-interface';
+import { ChatLayout } from '@/components/plan-advisor/chat-layout';
+
+export default function PlanAdvisorPage() {
+  return (
+    <div className="h-screen w-full overflow-hidden bg-black">
+      <ChatLayout />
+    </div>
+  );
+}
diff --git a/components/plan-advisor/chat-header.tsx b/components/plan-advisor/chat-header.tsx
new file mode 100644
index 0000000..abc0cd3
--- /dev/null
+++ b/components/plan-advisor/chat-header.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { Plus, Search, LightbulbIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function ChatHeader() {
+  return (
+    <div className="flex items-center gap-2 border-b border-gray-800 p-4">
+      <Button
+        variant="outline"
+        className="flex gap-2 rounded-full bg-[#262626] text-gray-300 hover:bg-[#363636] hover:text-white"
+      >
+        <Plus className="size-4" />
+        <span>New chat</span>
+      </Button>
+      <Button
+        variant="outline"
+        className="flex gap-2 rounded-full bg-[#262626] text-gray-300 hover:bg-[#363636] hover:text-white"
+      >
+        <Search className="size-4" />
+        <span>Search</span>
+      </Button>
+      <Button
+        variant="outline"
+        className="flex gap-2 rounded-full bg-[#262626] text-gray-300 hover:bg-[#363636] hover:text-white"
+      >
+        <LightbulbIcon className="size-4" />
+        <span>Reason</span>
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/plan-advisor/chat-input.tsx b/components/plan-advisor/chat-input.tsx
new file mode 100644
index 0000000..1437b5b
--- /dev/null
+++ b/components/plan-advisor/chat-input.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import { Send, Image, FileText, Mic, MoreHorizontal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+interface ChatInputProps {
+  input: string;
+  setInput: (value: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+export function ChatInput({ input, setInput, onSubmit }: ChatInputProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextareaHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  };
+
+  React.useEffect(() => {
+    adjustTextareaHeight();
+  }, [input]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit(e);
+    }
+  };
+
+  return (
+    <div className="border-t border-gray-800 p-4">
+      <form onSubmit={onSubmit} className="relative space-y-4">
+        <ChatInputActions />
+        <div className="relative">
+          <Textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => {
+              setInput(e.target.value);
+              adjustTextareaHeight();
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="Message ChatGPT..."
+            rows={1}
+            className="min-h-[52px] w-full resize-none rounded-2xl border-gray-700 bg-[#262626] pr-12 text-white placeholder:text-gray-400 focus:border-gray-600"
+            style={{
+              maxHeight: '200px',
+              overflow: 'auto',
+            }}
+          />
+          <Button
+            type="submit"
+            size="icon"
+            className="absolute bottom-1.5 right-1.5 size-8 rounded-xl bg-orange-600 p-2 hover:bg-orange-700 disabled:opacity-50"
+            disabled={!input.trim()}
+          >
+            <Send className="size-4" />
+          </Button>
+        </div>
+      </form>
+      <div className="mt-2 text-center text-xs text-gray-500">
+        Press Enter to send, Shift + Enter for new line
+      </div>
+    </div>
+  );
+}
+
+function ChatInputActions() {
+  return (
+    <div className="flex items-center gap-2 px-2">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="text-gray-400 hover:text-gray-300"
+            >
+              <Image className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Upload image</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="text-gray-400 hover:text-gray-300"
+            >
+              <FileText className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Upload file</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="text-gray-400 hover:text-gray-300"
+            >
+              <Mic className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Voice message</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="ml-auto text-gray-400 hover:text-gray-300"
+      >
+        <MoreHorizontal className="size-4" />
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/plan-advisor/chat-interface.tsx b/components/plan-advisor/chat-interface.tsx
new file mode 100644
index 0000000..a792307
--- /dev/null
+++ b/components/plan-advisor/chat-interface.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { ChatHeader } from './chat-header';
+import { ChatMessages } from './chat-messages';
+import { ChatInput } from './chat-input';
+import { Message } from './types';
+
+export function ChatInterface() {
+  const [messages, setMessages] = React.useState<Message[]>([
+    {
+      role: 'assistant',
+      content:
+        "Hello! I'm here to help you choose the perfect plan for your needs. What type of features are you looking for?",
+    },
+  ]);
+  const [input, setInput] = React.useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+
+    const newMessages = [
+      ...messages,
+      { role: 'user', content: input },
+      {
+        role: 'assistant',
+        content:
+          'Thank you for sharing. Let me analyze your needs and suggest the most suitable plan...',
+      },
+    ];
+
+    setMessages(newMessages as Message[]);
+    setInput('');
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <ChatHeader />
+      <ChatMessages messages={messages} />
+      <ChatInput input={input} setInput={setInput} onSubmit={handleSubmit} />
+    </div>
+  );
+}
diff --git a/components/plan-advisor/chat-layout.tsx b/components/plan-advisor/chat-layout.tsx
new file mode 100644
index 0000000..5f691cc
--- /dev/null
+++ b/components/plan-advisor/chat-layout.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import * as React from 'react';
+import { Menu } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ChatSidebar } from './chat-sidebar';
+import { ChatInterface } from './chat-interface';
+
+export function ChatLayout() {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  return (
+    <div className="relative flex h-screen bg-black">
+      <ChatSidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setIsSidebarOpen(false)}
+      />
+
+      <main className="flex flex-1 flex-col bg-[#1A1A1A]">
+        <div className="flex h-14 items-center border-b border-gray-800 px-4 md:hidden">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-white"
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          >
+            <Menu className="size-5" />
+          </Button>
+        </div>
+        <div className="flex-1 overflow-hidden">
+          <ChatInterface />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/components/plan-advisor/chat-messages.tsx b/components/plan-advisor/chat-messages.tsx
new file mode 100644
index 0000000..0f8f630
--- /dev/null
+++ b/components/plan-advisor/chat-messages.tsx
@@ -0,0 +1,45 @@
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { Message } from './types';
+
+interface ChatMessagesProps {
+  messages: Message[];
+}
+
+export function ChatMessages({ messages }: ChatMessagesProps) {
+  return (
+    <ScrollArea className="flex-1 p-4">
+      <div className="space-y-6">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className={`flex items-start gap-3 ${
+              message.role === 'user' ? 'justify-end' : 'justify-start'
+            }`}
+          >
+            {message.role === 'assistant' && (
+              <div className="flex size-8 items-center justify-center rounded-full bg-gray-800 text-white">
+                AI
+              </div>
+            )}
+            <div
+              className={cn(
+                'max-w-[80%] rounded-lg px-4 py-2',
+                message.role === 'user'
+                  ? 'bg-orange-600 text-white'
+                  : 'bg-gray-800 text-gray-100',
+              )}
+            >
+              {message.content}
+            </div>
+            {message.role === 'user' && (
+              <div className="flex size-8 items-center justify-center rounded-full bg-gray-700 text-white">
+                You
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
\ No newline at end of file
diff --git a/components/plan-advisor/chat-sidebar.tsx b/components/plan-advisor/chat-sidebar.tsx
new file mode 100644
index 0000000..f2271bf
--- /dev/null
+++ b/components/plan-advisor/chat-sidebar.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+
+interface ChatSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ChatSidebar({ isOpen, onClose }: ChatSidebarProps) {
+  const [conversations] = React.useState([
+    { id: 1, title: 'Previous consultation 1', date: '2024-02-20' },
+    { id: 2, title: 'Previous consultation 2', date: '2024-02-19' },
+  ]);
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-y-0 left-0 z-40 flex w-[260px] flex-col bg-black transition-transform duration-300 ease-in-out md:relative md:translate-x-0',
+        isOpen ? 'translate-x-0' : '-translate-x-full',
+      )}
+    >
+      <div className="flex h-14 items-center border-b border-gray-800 px-2">
+        <Button
+          variant="outline"
+          className="w-full justify-start space-x-2 border-gray-700 bg-transparent text-white hover:bg-gray-800"
+        >
+          <Plus className="size-4" />
+          <span>New Consultation</span>
+        </Button>
+      </div>
+      <ScrollArea className="flex-1 px-2 py-4">
+        <div className="space-y-1">
+          {conversations.map((chat) => (
+            <Button
+              key={chat.id}
+              variant="ghost"
+              className="w-full justify-start px-3 py-2 text-gray-300 hover:bg-gray-800"
+            >
+              <div className="flex flex-col items-start text-sm">
+                <span className="font-medium">{chat.title}</span>
+                <span className="text-xs text-gray-500">{chat.date}</span>
+              </div>
+            </Button>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/components/plan-advisor/types.ts b/components/plan-advisor/types.ts
new file mode 100644
index 0000000..2fb9e70
--- /dev/null
+++ b/components/plan-advisor/types.ts
@@ -0,0 +1,4 @@
+export interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
\ No newline at end of file
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b12cf7e..4227a4a 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -11,12 +11,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'underline-offset-4 hover:underline text-primary',
       },
@@ -24,6 +21,14 @@ const buttonVariants = cva(
         default: 'h-10 py-2 px-4',
         sm: 'h-9 px-3',
         lg: 'h-11 px-8',
+        icon: 'size-10',
+        'icon-sm': 'size-9',
+        'icon-lg': 'size-11',
+      },
+      iconSize: {
+        default: '[&>svg]:size-5',
+        sm: '[&>svg]:size-4',
+        lg: '[&>svg]:size-6',
       },
       rounded: {
         default: 'rounded-md',
@@ -38,6 +43,7 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
       rounded: 'default',
+      iconSize: 'default',
     },
   },
 );
@@ -49,23 +55,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      children,
-      disabled,
-      loading,
-      rounded,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ className, variant, size, children, disabled, loading, rounded, iconSize, ...props }, ref) => {
     return (
       <button
         disabled={loading || disabled}
-        className={cn(buttonVariants({ variant, size, rounded, className }))}
+        className={cn(buttonVariants({ variant, size, rounded, iconSize, className }))}
         ref={ref}
         {...props}
       >
diff --git a/config/marketing.ts b/config/marketing.ts
index d8a8e6a..d220cad 100644
--- a/config/marketing.ts
+++ b/config/marketing.ts
@@ -1,6 +1,6 @@
 import { MarketingConfig } from "types";
 
-export const marketingConfig: MarketingConfig = {
+export const marketingConfig = {
   mainNav: [
     {
       title: "Pricing",
@@ -22,5 +22,9 @@ export const marketingConfig: MarketingConfig = {
       title: "License",
       href: "/license",
     },
+    {
+      title: "Plan Advisor",
+      href: "/plan-advisor",
+    },
   ],
 };
diff --git a/routes.ts b/routes.ts
index 250007b..e272d47 100644
--- a/routes.ts
+++ b/routes.ts
@@ -9,6 +9,7 @@ export const publicRoutes = [
   "/docs",
   "/guides",
   "/pricing",
+  "/plan-advisor", // Adding the new route
 ];
 
 /**