UI setup

apps/rowboatx/app/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { AppSidebar } from "@/components/app-sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputTextarea,
+  PromptInputFooter,
+  PromptInputTools,
+  PromptInputButton,
+  PromptInputSubmit,
+  PromptInputAttachments,
+  PromptInputAttachment,
+  PromptInputActionMenu,
+  PromptInputActionMenuTrigger,
+  PromptInputActionMenuContent,
+  PromptInputActionAddAttachments,
+  PromptInputHeader,
+  type PromptInputMessage,
+} from "@/components/ai-elements/prompt-input";
+import { useState } from "react";
+import { GlobeIcon, MicIcon } from "lucide-react";
+
+export default function HomePage() {
+  const [text, setText] = useState<string>("");
+  const [useWebSearch, setUseWebSearch] = useState<boolean>(false);
+  const [useMicrophone, setUseMicrophone] = useState<boolean>(false);
+  const [status, setStatus] = useState<
+    "submitted" | "streaming" | "ready" | "error"
+  >("ready");
+
+  const handleSubmit = (message: PromptInputMessage) => {
+    const hasText = Boolean(message.text);
+    const hasAttachments = Boolean(message.files?.length);
+
+    if (!(hasText || hasAttachments)) {
+      return;
+    }
+
+    setStatus("submitted");
+    console.log("Message submitted:", message);
+    
+    // Reset after submission
+    setText("");
+    setTimeout(() => setStatus("ready"), 500);
+  };
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">RowboatX</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Chat</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+
+        <div className="relative flex size-full flex-col overflow-hidden">
+          {/* Blank canvas - main content area */}
+          <div className="flex-1 overflow-y-auto">
+            {/* Empty space for messages */}
+          </div>
+
+          {/* Input area - centered and narrower */}
+          <div className="flex justify-center w-full px-4 pb-4">
+            <div className="w-full max-w-3xl">
+              <PromptInput globalDrop multiple onSubmit={handleSubmit}>
+                <PromptInputHeader>
+                  <PromptInputAttachments>
+                    {(attachment) => <PromptInputAttachment data={attachment} />}
+                  </PromptInputAttachments>
+                </PromptInputHeader>
+                <PromptInputBody>
+                  <PromptInputTextarea
+                    onChange={(event) => setText(event.target.value)}
+                    value={text}
+                    placeholder="Ask me anything..."
+                  />
+                </PromptInputBody>
+                <PromptInputFooter>
+                  <PromptInputTools>
+                    <PromptInputActionMenu>
+                      <PromptInputActionMenuTrigger />
+                      <PromptInputActionMenuContent>
+                        <PromptInputActionAddAttachments />
+                      </PromptInputActionMenuContent>
+                    </PromptInputActionMenu>
+                    <PromptInputButton
+                      onClick={() => setUseMicrophone(!useMicrophone)}
+                      variant={useMicrophone ? "default" : "ghost"}
+                    >
+                      <MicIcon size={16} />
+                      <span className="sr-only">Microphone</span>
+                    </PromptInputButton>
+                    <PromptInputButton
+                      onClick={() => setUseWebSearch(!useWebSearch)}
+                      variant={useWebSearch ? "default" : "ghost"}
+                    >
+                      <GlobeIcon size={16} />
+                      <span>Search</span>
+                    </PromptInputButton>
+                  </PromptInputTools>
+                  <PromptInputSubmit
+                    disabled={!(text.trim() || status) || status === "streaming"}
+                    status={status}
+                  />
+                </PromptInputFooter>
+              </PromptInput>
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+