@meistrari/chat-nuxt 3.2.0 → 3.3.0

package/README.md

@@ -196,7 +196,7 @@ import type {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `hideSidebar` | `boolean` | `false` | Hide conversation list sidebar |
-| `sidebar` | `ChatSidebarConfig` | `undefined` | Sidebar layout: `{ position?: 'left' \| 'right', width?: number, bottomHeight?: number }`. `position` picks the edge (default `'left'`); `width` is the sidebar width in pixels (default `240`); `bottomHeight` is the `sidebar-bottom` pane height as a percentage 0–100 of the conversation area (default `50`) |
+| `sidebar` | `ChatSidebarConfig` | `undefined` | Sidebar layout: `{ position?, width?, bottomHeight?, collapsible?, defaultCollapsed? }`. `position` (`'left'`\|`'right'`, default `'left'`) picks the edge; `width` is the sidebar width in pixels (default `240`); `bottomHeight` is the `sidebar-bottom` pane height as a percentage 0–100 of the conversation area (default `50`); `collapsible` (default `false`) renders a native collapse handle and animates the sidebar open/closed; `defaultCollapsed` (default `false`) starts it collapsed |
 | `hideSettings` | `boolean` | `false` | Hide workspace settings actions while keeping the chat header and content unchanged |
 | `conversationId` | `string \| null` | `null` | Controlled conversation (supports v-model) |
 | `initialConversationId` | `string \| null` | `null` | Open this conversation on mount |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -36,6 +36,16 @@ const emit = defineEmits(["update:conversationId"]);
 const sidebarPosition = computed(() => props.sidebar?.position ?? "left");
 const sidebarWidth = computed(() => props.sidebar?.width ?? 240);
 const sidebarBottomHeight = computed(() => Math.min(100, Math.max(0, props.sidebar?.bottomHeight ?? 50)));
+const sidebarCollapsible = computed(() => props.sidebar?.collapsible ?? false);
+const isSidebarCollapsed = ref(props.sidebar?.defaultCollapsed ?? false);
+const sidebarCollapsed = computed(() => sidebarCollapsible.value && isSidebarCollapsed.value);
+const sidebarToggleIcon = computed(() => {
+  const pointsRight = sidebarPosition.value === "right" ? !sidebarCollapsed.value : sidebarCollapsed.value;
+  return pointsRight ? "i-ph-caret-right" : "i-ph-caret-left";
+});
+function toggleSidebarCollapsed() {
+  isSidebarCollapsed.value = !isSidebarCollapsed.value;
+}
 const chatApi = useChatApi();
 const embedConfig = useEmbedConfig();
 const chatAction = useChatAction();
@@ -429,51 +439,77 @@ async function handleDelete() {
         <!-- Sidebar -->
         <div
             v-if="!hideSidebar && !isMobile"
-            h-full flex="~ col" flex-shrink-0
-            bg-neutral-50
-            :style="{ width: `${sidebarWidth}px` }"
-            :class="sidebarPosition === 'right' ? 'order-last border-l-0.5px border-l-neutral-200' : 'border-r-0.5px border-r-neutral-200'"
+            class="chat-sidebar"
+            :class="[
+  sidebarPosition === 'right' ? 'chat-sidebar--right order-last' : 'chat-sidebar--left',
+  sidebarCollapsible ? 'chat-sidebar--collapsible' : '',
+  sidebarCollapsed ? 'chat-sidebar--collapsed' : ''
+]"
+            :style="{ '--chat-sidebar-width': `${sidebarWidth}px` }"
+            h-full flex-shrink-0 relative
         >
-            <div px-12px pt-16px pb-8px flex gap-8px>
-                <button
-                    flex items-center justify-center gap-6px
-                    h-32px px-12px flex-1 min-w-0
-                    bg-white b=".5px neutral-300" rounded-10px
-                    hover:bg-neutral-50 transition-colors cursor-pointer
-                    @click="() => handleNewConversation()"
+            <div class="chat-sidebar__clip">
+                <div
+                    class="chat-sidebar__panel"
+                    :inert="sidebarCollapsed || void 0"
+                    h-full flex="~ col"
+                    bg-neutral-50
+                    :style="{ width: `${sidebarWidth}px` }"
+                    :class="sidebarPosition === 'right' ? 'border-l-0.5px border-l-neutral-200' : 'border-r-0.5px border-r-neutral-200'"
                 >
-                    <span i-ph-chat-circle text-12px text-gray-900 />
-                    <span text-14px font-semibold text-neutral-900 tracking="-.15px" leading-18px>
-                        Nova conversa
-                    </span>
-                </button>
-                <ChatConversationNewGroupButton />
-            </div>
+                    <div px-12px pt-16px pb-8px flex gap-8px>
+                        <button
+                            flex items-center justify-center gap-6px
+                            h-32px px-12px flex-1 min-w-0
+                            bg-white b=".5px neutral-300" rounded-10px
+                            hover:bg-neutral-50 transition-colors cursor-pointer
+                            @click="() => handleNewConversation()"
+                        >
+                            <span i-ph-chat-circle text-12px text-gray-900 />
+                            <span text-14px font-semibold text-neutral-900 tracking="-.15px" leading-18px>
+                                Nova conversa
+                            </span>
+                        </button>
+                        <ChatConversationNewGroupButton />
+                    </div>
 
-            <div
-                min-h-0 overflow-y-auto px-4px
-                :class="$slots['sidebar-bottom'] ? '' : 'flex-1'"
-                :style="$slots['sidebar-bottom'] ? { flexGrow: 100 - sidebarBottomHeight, flexBasis: 0 } : void 0"
-            >
-                <ChatConversationList
-                    :conversations="visibleConversations"
-                    :current-id="activeConversationId ?? void 0"
-                    :get-member-image="getMemberImage"
-                    :select-conversation="openConversation"
-                    :reset-conversation="handleNewConversation"
-                    :start-conversation="handleNewConversation"
-                    :loading="conversationsLoading"
-                />
+                    <div
+                        min-h-0 overflow-y-auto px-4px
+                        :class="$slots['sidebar-bottom'] ? '' : 'flex-1'"
+                        :style="$slots['sidebar-bottom'] ? { flexGrow: 100 - sidebarBottomHeight, flexBasis: 0 } : void 0"
+                    >
+                        <ChatConversationList
+                            :conversations="visibleConversations"
+                            :current-id="activeConversationId ?? void 0"
+                            :get-member-image="getMemberImage"
+                            :select-conversation="openConversation"
+                            :reset-conversation="handleNewConversation"
+                            :start-conversation="handleNewConversation"
+                            :loading="conversationsLoading"
+                        />
+                    </div>
+
+                    <div
+                        v-if="$slots['sidebar-bottom']"
+                        min-h-0 overflow-y-auto
+                        b-t=".5px neutral-200"
+                        :style="{ flexGrow: sidebarBottomHeight, flexBasis: 0 }"
+                    >
+                        <slot name="sidebar-bottom" />
+                    </div>
+                </div>
             </div>
 
-            <div
-                v-if="$slots['sidebar-bottom']"
-                min-h-0 overflow-y-auto
-                b-t=".5px neutral-200"
-                :style="{ flexGrow: sidebarBottomHeight, flexBasis: 0 }"
+            <button
+                v-if="sidebarCollapsible"
+                type="button"
+                class="chat-sidebar__toggle"
+                :aria-label="sidebarCollapsed ? 'Expandir conversas' : 'Recolher conversas'"
+                :aria-expanded="!sidebarCollapsed"
+                @click="toggleSidebarCollapsed"
             >
-                <slot name="sidebar-bottom" />
-            </div>
+                <span :class="sidebarToggleIcon" text-14px text-neutral-500 />
+            </button>
         </div>
 
         <!-- Main content -->
@@ -851,5 +887,5 @@ async function handleDelete() {
 </template>
 
 <style scoped>
-.loading-bar{animation:loading-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,transparent,#ea580b,#fb923c,#fdba74,transparent);background-size:200% 100%;height:4px;left:0;position:absolute;right:0;top:0;z-index:100}@keyframes loading-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
+.loading-bar{animation:loading-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,transparent,#ea580b,#fb923c,#fdba74,transparent);background-size:200% 100%;height:4px;left:0;position:absolute;right:0;top:0;z-index:100}@keyframes loading-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.chat-sidebar{width:var(--chat-sidebar-width)}.chat-sidebar__clip{display:flex;height:100%;width:100%}.chat-sidebar__panel{flex:none}.chat-sidebar--collapsible{min-width:0;transition:width .26s cubic-bezier(.2,.8,.2,1)}.chat-sidebar--collapsible .chat-sidebar__clip{overflow:hidden}.chat-sidebar--collapsible.chat-sidebar--right .chat-sidebar__clip{justify-content:flex-end}.chat-sidebar--collapsible .chat-sidebar__panel{transition:opacity .2s ease}.chat-sidebar--collapsed{width:0}.chat-sidebar--collapsed .chat-sidebar__panel{opacity:0}.chat-sidebar__toggle{align-items:center;background:#fff;border:.5px solid #e5e5e5;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;position:absolute;top:50%;transition:transform .26s cubic-bezier(.2,.8,.2,1),background-color .12s ease;width:20px;z-index:20}.chat-sidebar__toggle:hover{background:#fafafa}.chat-sidebar--right .chat-sidebar__toggle{left:0;transform:translate(-50%,-50%)}.chat-sidebar--right.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(-100%,-50%)}.chat-sidebar--left .chat-sidebar__toggle{right:0;transform:translate(50%,-50%)}.chat-sidebar--left.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(100%,-50%)}@media (prefers-reduced-motion:reduce){.chat-sidebar__clip,.chat-sidebar__panel,.chat-sidebar__toggle{transition:none}}
 </style>

package/dist/runtime/embed/types.d.ts

@@ -21,6 +21,13 @@ export type ChatSidebarConfig = {
      * Defaults to 50.
      */
     bottomHeight?: number;
+    /**
+     * Render a native collapse handle and animate the sidebar open/closed, so
+     * the host doesn't have to build its own toggle. Defaults to false.
+     */
+    collapsible?: boolean;
+    /** Start collapsed on first render when `collapsible` is set. Defaults to false. */
+    defaultCollapsed?: boolean;
 };
 export type ChatEmbedSharedProps = {
     /** Controlled conversation id. Use with `v-model:conversation-id` when the host owns active conversation state. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "exports": {
     ".": {