fix: make mobile assistant fullscreen

.changeset/mobile-assistant-fullscreen.md

@@ -0,0 +1,7 @@
+---
+"@silicajs/assistant": patch
+"@silicajs/core": patch
+"@silicajs/theme-amethyst": patch
+---
+
+Open the assistant fullscreen on mobile and close the mobile sidebar before showing it.

packages/assistant/src/ui/trigger.tsx

@@ -15,16 +15,23 @@ export type AssistantTriggerProps = {
   className?: string;
   label?: string;
   iconOnly?: boolean;
+  onOpen?: () => void;
 };
 
 export function AssistantTrigger({
   className,
   label = "Ask AI",
   iconOnly = false,
+  onOpen,
 }: AssistantTriggerProps) {
   const assistant = useAssistant();
   const setOpen = assistant?.setOpen;
 
+  const openAssistant = React.useCallback(() => {
+    onOpen?.();
+    assistant?.setOpen(true);
+  }, [assistant, onOpen]);
+
   React.useEffect(() => {
     if (!setOpen) return;
     const onKeyDown = (event: KeyboardEvent) => {
@@ -49,7 +56,7 @@ export function AssistantTrigger({
               type="button"
               variant="outline"
               size="icon-sm"
-              onClick={() => assistant.setOpen(true)}
+              onClick={openAssistant}
               className={className}
             >
               <SparklesIcon className="text-muted-foreground" />
@@ -70,7 +77,7 @@ export function AssistantTrigger({
       type="button"
       variant="outline"
       size="sm"
-      onClick={() => assistant.setOpen(true)}
+      onClick={openAssistant}
       className={className}
     >
       <SparklesIcon

packages/core/src/theme.ts

@@ -48,6 +48,7 @@ export type ThemeAssistantSlots = {
     className?: string;
     label?: string;
     iconOnly?: boolean;
+    onOpen?: () => void;
   }) => React.ReactNode;
   /**
    * The assistant chat window (conversation + composer). Fills its

packages/theme-amethyst/src/assistant-dock.tsx

@@ -47,7 +47,7 @@ export function AssistantDock({ panel, children }: AssistantDockProps) {
           <SheetContent
             side="right"
             showCloseButton={false}
-            className="inset-0 h-dvh w-full max-w-none border-0 p-0 sm:max-w-none"
+            className="inset-0 h-dvh !w-screen max-w-none border-0 p-0 sm:max-w-none"
           >
             <SheetHeader className="sr-only">
               <SheetTitle>AI assistant</SheetTitle>

packages/theme-amethyst/src/sidebar.tsx

@@ -20,6 +20,7 @@ import {
   SidebarGroupContent,
   SidebarHeader,
   SidebarRail,
+  useSidebar,
 } from "@silicajs/ui/components/sidebar";
 
 export type SidebarProps = {
@@ -33,6 +34,8 @@ export function Sidebar({
   config,
   assistant,
 }: SidebarProps) {
+  const { isMobile, setOpenMobile } = useSidebar();
+
   return (
     <ShadcnSidebar>
       <SidebarHeader className="gap-3 border-b border-sidebar-border">
@@ -48,7 +51,13 @@ export function Sidebar({
         <div className="flex items-center gap-2 px-1 pb-1">
           <SearchTrigger className="min-w-0 flex-1 justify-start" />
           {assistant ? (
-            <assistant.Trigger className="shrink-0" iconOnly />
+            <assistant.Trigger
+              className="shrink-0"
+              iconOnly
+              onOpen={() => {
+                if (isMobile) setOpenMobile(false);
+              }}
+            />
           ) : null}
         </div>
       </SidebarHeader>