Patient Chat Bot

src/app/(panels)/suite/patient/chat/page.tsx

@@ -1,10 +1,30 @@
 "use client"
 
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Message } from "@/components/panel-ui/patient/app-chat"
+import { Input } from "@/components/ui/input"
+
+import { Card, CardContent } from "@/components/ui/card"
+
 export default function Chat() {
     return (
         <div className="container mx-auto">
-            
+            <div className="grid gap-4">
+                <Card>
+                    <CardContent className="space-y-4 p-4">
+                            <div className="block items-center">
+                                <Message avatarUrl="/vercel.svg" message="Hello, how can I assist you today?" sender="Dr. Smith" />
+                                <Message avatarUrl="/vercel.svg" message="I have some questions about my medication." sender="You" />
+                            </div>
+                            <div className="flex items-center">
+                                <Input id="message" placeholder="Type your message here..." className="flex-grow mx-0 rounded-none" />
+                                <Button className="mx-0 rounded-none">Send</Button>
+                            </div>
+                    </CardContent>
+                </Card>
+            </div>
         </div>
     )
 }
-

src/components/panel-ui/patient/app-chat.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+// @ts-ignore
+export function Message({ avatarUrl, message, sender }) {
+    return (
+        <div className="flex items-start space-x-4 p-4">
+            <Image
+                src={avatarUrl}
+                alt={`${sender}'s avatar`}
+                className="w-12 h-12 rounded-full"
+                width={48}
+                height={48}
+            />
+            <div className="flex flex-col">
+                <span className="font-bold">{sender}</span>
+                <p className="dark:text-gray-200">{message}</p>
+            </div>
+        </div>
+    )
+}

src/components/panel-ui/patient/app-sidebar.tsx

@@ -22,7 +22,7 @@ export default function Sidebar() {
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarMenuButton asChild>
-							<Link href="/dashboard">
+							<Link href="/suite/patient/dashboard">
 								<Home className="mr-2 h-4 w-4" />
 								<span>Home</span>
 							</Link>
@@ -30,17 +30,17 @@ export default function Sidebar() {
 					</SidebarMenuItem>
 					<SidebarMenuItem>
 						<SidebarMenuButton asChild>
-							<Link href="/dashboard/users">
+							<Link href="/suite/patient/chat">
 								<Users className="mr-2 h-4 w-4" />
-								<span>Users</span>
+								<span>Chat</span>
 							</Link>
 						</SidebarMenuButton>
 					</SidebarMenuItem>
 					<SidebarMenuItem>
 						<SidebarMenuButton asChild>
-							<Link href="/dashboard/settings">
+							<Link href="/suite/patient/account">
 								<Settings className="mr-2 h-4 w-4" />
-								<span>Settings</span>
+								<span>Account</span>
 							</Link>
 						</SidebarMenuButton>
 					</SidebarMenuItem>

src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }