Add Query Function Page

frontend/app/components/query-section.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useChat } from "ai/react";
+import { ChatInput, ChatMessages } from "./ui/chat";
+
+export default function QuerySection() {
+    const {
+        messages,
+        input,
+        isLoading,
+        handleSubmit,
+        handleInputChange,
+        reload,
+        stop,
+    } = useChat({ api: process.env.NEXT_PUBLIC_QUERY_API });
+
+    return (
+        <div className="space-y-4 max-w-5xl w-full">
+            <ChatMessages
+                messages={messages}
+                isLoading={isLoading}
+                reload={reload}
+                stop={stop}
+            />
+            <ChatInput
+                input={input}
+                handleSubmit={handleSubmit}
+                handleInputChange={handleInputChange}
+                isLoading={isLoading}
+            />
+        </div>
+    );
+}

frontend/app/query/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
+import QuerySection from "@/app/components/query-section";
+
+export default function Query() {
+
+  return (
+    <Main>
+      <Header />
+      <QuerySection />
+    </Main>
+  );
+}