Added basic llama index chat ui and corresponding pages

surfsense_web/components/chat_v2/ChatMain.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+    ChatCanvas,
+    ChatMessages,
+    ChatSection,
+    useChatUI,
+    ChatHandler,
+} from "@llamaindex/chat-ui";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+
+interface ChatMainProps {
+    handler: ChatHandler;
+    handleQuerySubmit: (input: string, handleSubmit: () => void) => void;
+}
+
+const ChatInput = (props: {
+    handleQuerySubmit: (input: string, handleSubmit: () => void) => void;
+}) => {
+    const { input, setInput, handleSubmit } = useChatUI();
+    const { handleQuerySubmit } = props;
+
+    const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!input.trim()) return;
+
+        handleQuerySubmit(input, handleSubmit);
+    };
+
+    return (
+        <form
+            className="flex flex-row items-center justify-between gap-2"
+            onSubmit={handleFormSubmit}
+        >
+            <Textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Type your message here..."
+                rows={4}
+                className="max-h-[150px] overflow-y-auto"
+            />
+
+            <Button type="submit">Send</Button>
+        </form>
+    );
+};
+
+export default function ChatMain({
+    handler,
+    handleQuerySubmit,
+}: ChatMainProps) {
+    return (
+        <ChatSection handler={handler} className="flex h-full">
+            <div className="flex flex-1 flex-col">
+                <ChatMessages className="flex-1">
+                    <ChatMessages.List className="p-4">
+                        {/* Custom message rendering */}
+                    </ChatMessages.List>
+                    <ChatMessages.Loading>
+                        <Loader2 className="animate-spin" />
+                    </ChatMessages.Loading>
+                </ChatMessages>
+
+                <div className="border-t p-4">
+                    <ChatInput handleQuerySubmit={handleQuerySubmit} />
+                </div>
+            </div>
+
+            <ChatCanvas className="w-1/2 border-l" />
+        </ChatSection>
+    );
+}

surfsense_web/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }