refactor: Migrate chat UI from assistant-ui to new ai-chat components and restructure the main page.

Author: arnaudpfu

apps/mobile/components/ai-chat/markdown-text.tsx

@@ -29,9 +29,6 @@ const MarkdownTextImpl = () => {
         className="aui-md"
         renderers={defaultComponents as unknown as Partial<RenderersMap>}
       />
-      {/* <MessagePartPrimitive.BeforeStream>
-        <ShimmerText text="Typing ..." />
-      </MessagePartPrimitive.BeforeStream> */}
     </>
   );
 };

apps/nextjs-example/app/assistant.tsx

@@ -1,5 +1,58 @@
-import { Assistant } from "./assistant";
+"use client";
 
-export default function Home() {
-  return <Assistant />;
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { ThreadListSidebar } from "@/components/ai-chat/threadlist-sidebar";
+
+import { AiProvider } from "@creatorem/ai-react/ai-provider";
+import { Thread } from "@/components/ai-chat/thread";
+
+export default function Chat() {
+  return (
+    <AiProvider>
+      <SidebarProvider>
+        <div className="flex h-dvh w-full pr-0.5">
+          <ThreadListSidebar />
+          <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 font-medium border-b px-4">
+              <SidebarTrigger />
+              <Separator orientation="vertical" className="mr-2 h-4" />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink
+                      href="https://www.assistant-ui.com/docs/getting-started"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Build Your Own ChatGPT UX
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Starter Template</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </header>
+            <div className="flex-1 overflow-hidden">
+              <Thread />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </AiProvider>
+  );
 }