wally-ui 1.13.1 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/package-lock.json

@@ -29,6 +29,7 @@
         "@angular/build": "^20.0.5",
         "@angular/cli": "^20.0.5",
         "@angular/compiler-cli": "^20.0.0",
+        "@tailwindcss/typography": "^0.5.19",
         "@types/express": "^5.0.1",
         "@types/jasmine": "~5.1.0",
         "@types/node": "^20.17.19",
@@ -4100,6 +4101,19 @@
         "tailwindcss": "4.1.13"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -5205,6 +5219,19 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -8824,6 +8851,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
@@ -10208,6 +10249,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

package/playground/showcase/package.json

@@ -42,6 +42,7 @@
     "@angular/build": "^20.0.5",
     "@angular/cli": "^20.0.5",
     "@angular/compiler-cli": "^20.0.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.17.19",

package/playground/showcase/src/app/app.routes.server.ts

@@ -33,6 +33,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/dropdown-menu',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/selection-popover',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'documentation/chat-sdk',
     renderMode: RenderMode.Prerender,

package/playground/showcase/src/app/components/ai/ai-chat/ai-chat.html

@@ -1,5 +1,10 @@
-<div class="w-full border bg-white/50 border-neutral-300 dark:bg-[#1b1b1b] dark:border-neutral-700 shadow-lg rounded-4xl p-1">
+
+<div class="mb-2">
+    <wally-ai-message (textSelected)="handleTextSelected($event)"></wally-ai-message>
+</div>
+<div
+    class="w-full border bg-white/50 border-neutral-300 dark:bg-[#1b1b1b] dark:border-neutral-700 shadow-lg rounded-4xl p-1">
     <div class="w-full">
-        <wally-ai-composer></wally-ai-composer>
+        <wally-ai-composer [textSelected]="textSelected()"></wally-ai-composer>
     </div>
 </div>

package/playground/showcase/src/app/components/ai/ai-chat/ai-chat.ts

@@ -1,17 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 
 import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
 import { AiComposer } from '../ai-composer/ai-composer';
+import { AiChatService } from '../ai-chat.service';
+import { AiMessage } from '../ai-message/ai-message';
 
 @Component({
   selector: 'wally-ai-chat',
   imports: [
     AiComposer,
     AiPromptInput,
+    AiMessage
+  ],
+  providers: [
+    AiChatService
   ],
   templateUrl: './ai-chat.html',
   styleUrl: './ai-chat.css'
 })
 export class AiChat {
+  textSelected = signal<string>('');
 
+  handleTextSelected(text: string): void {
+    console.log('📝 Texto selecionado:', text);
+    this.textSelected.set(text);
+  }
 }

package/playground/showcase/src/app/components/ai/ai-chat.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AiChatService } from './ai-chat.service';
+
+describe('AiChatService', () => {
+  let service: AiChatService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AiChatService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/ai/ai-chat.service.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AiChatService {
+  
+}

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.html

@@ -1,25 +1,31 @@
 <div class="w-full flex flex-col" role="region" aria-label="AI message composer">
     <!-- Selected Text Context -->
+    @if (textSelected()) {
     <div class="p-0.5">
         <div id="selected-context"
-            class="w-full flex items-center gap-1 justify-between border bg-neutral-100 border-neutral-300 dark:bg-[#121212] dark:border-neutral-700 rounded-t-3xl rounded-b-lg p-3"
+            class="w-full max-h-36 overflow-auto flex items-start gap-4 justify-between border bg-neutral-100 border-neutral-300 dark:bg-[#121212] dark:border-neutral-700 rounded-t-3xl rounded-b-lg px-3 py-4"
             role="status" aria-live="polite">
-            <div class="w-full flex gap-4 items-center">
+            <!-- Ícone Esquerda -->
+            <div class="flex items-center shrink-0">
                 <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                     class="size-5 text-[#0a0a0a] dark:text-white" aria-hidden="true">
                     <path
                         d="M12.5293 6.5293C12.7566 6.30203 13.1081 6.27383 13.3662 6.44434L13.4707 6.5293L17.4707 10.5293C17.7304 10.789 17.7304 11.211 17.4707 11.4707L13.4707 15.4707C13.211 15.7304 12.789 15.7304 12.5293 15.4707C12.2696 15.211 12.2696 14.789 12.5293 14.5293L15.3936 11.665H6C3.97588 11.665 2.33496 10.0241 2.33496 8V4.5C2.33496 4.13273 2.63273 3.83496 3 3.83496C3.36727 3.83496 3.66504 4.13273 3.66504 4.5V8C3.66504 9.28958 4.71042 10.335 6 10.335H15.3936L12.5293 7.4707L12.4443 7.36621C12.2738 7.10808 12.302 6.75657 12.5293 6.5293Z">
                     </path>
                 </svg>
+            </div>
 
-                <p class="text-sm text-[#0a0a0a] dark:text-white" id="context-label">
-                    "Ask about"
+            <!-- Texto Central -->
+            <div class="flex-1 flex items-center">
+                <p class="text-sm text-[#0a0a0a] dark:text-white line-clamp-2" id="context-label">
+                    "{{ textSelected() }}"
                 </p>
             </div>
 
-            <div>
+            <!-- Botão Direita -->
+            <div class="flex items-center h-5">
                 <wally-button [variant]="'ghost'" [rounded]="true" [ariaLabel]="'Clear selected context'">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                         stroke="currentColor" class="size-5" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                     </svg>
@@ -27,13 +33,14 @@
             </div>
         </div>
     </div>
+    }
 
     <div class="w-full px-4 pt-4">
         <wally-ai-prompt-input></wally-ai-prompt-input>
     </div>
 
     <!-- Action Buttons -->
-    <div class="w-full flex justify-between px-2 pb-2" role="toolbar" aria-label="Composer actions">
+    <div class="w-full flex items-center justify-between p-1" role="toolbar" aria-label="Composer actions">
         <div class="w-full flex items-center gap-1">
             <div class="size-10">
                 <wally-dropdown-menu>

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import { DropdownMenuSubTrigger } from '../../dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger';
 import { DropdownMenuSubContent } from '../../dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content';
@@ -35,6 +35,8 @@ import { Button } from '../../button/button';
   styleUrl: './ai-composer.css'
 })
 export class AiComposer {
+  textSelected = input<string>('');
+
   onItemClick(): void {
     console.log('Item clicked');
   }

package/playground/showcase/src/app/components/ai/ai-message/ai-message.html

@@ -0,0 +1,165 @@
+<wally-selection-popover (textSelected)="onAskAbout($event)">
+    <!-- Ações customizadas do popover -->
+    <div popoverActions class="flex gap-2">
+        <wally-button variant="ghost" (buttonClick)="askChat()">
+            <div class="flex items-center gap-2">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                    class="icon">
+                    <path
+                        d="M6.24992 11.0417C6.65578 11.0417 7.04227 10.9587 7.39339 10.809C7.05099 11.7065 6.35374 12.9827 5.29864 13.1333C4.84303 13.1985 4.52644 13.6206 4.59153 14.0762C4.65662 14.5318 5.07873 14.8484 5.53434 14.7832C7.66169 14.4794 8.93792 12.0592 9.30742 10.1591C9.50975 9.11833 9.48792 7.98412 9.04084 7.03938C8.53525 5.97097 7.43538 5.20335 6.23748 5.20834C4.63238 5.21504 3.33325 6.5183 3.33325 8.12498C3.33325 9.73583 4.63909 11.0417 6.24992 11.0417Z">
+                    </path>
+                    <path
+                        d="M13.4832 11.0417C13.889 11.0417 14.2755 10.9587 14.6267 10.809C14.2843 11.7065 13.587 12.9827 12.5319 13.1333C12.0763 13.1985 11.7597 13.6206 11.8248 14.0762C11.8899 14.5318 12.312 14.8484 12.7676 14.7832C14.8949 14.4794 16.1712 12.0592 16.5407 10.1591C16.743 9.11833 16.7212 7.98412 16.2741 7.03938C15.7685 5.97097 14.6687 5.20335 13.4708 5.20834C11.8656 5.21504 10.5665 6.5183 10.5665 8.12498C10.5665 9.73583 11.8724 11.0417 13.4832 11.0417Z">
+                    </path>
+                </svg>
+
+                <span class="text-base">
+                    Ask chat
+                </span>
+            </div>
+        </wally-button>
+    </div>
+
+    <article class="prose dark:prose-invert lg:prose-lg prose-neutral w-full break-words">
+        <h1>Garlic bread with cheese: What the science tells us</h1>
+        <h2>Garlic bread with cheese: What the science tells us</h2>
+        <p>
+            For years parents have espoused the health benefits of eating garlic bread with cheese to their children,
+            with
+            the
+            food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for
+            Halloween.
+        </p>
+        <p>
+            For years parents have espoused the health benefits of eating garlic bread with cheese to their children,
+            with
+            the
+            food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for
+            Halloween.
+        </p>
+        <p>
+            But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing
+            up
+            around
+            the country.
+        </p>
+
+        <div class="w-full flex gap-1">
+            <div class="size-10">
+                <wally-tooltip text="Copy to clipboard" [position]="'bottom'">
+                    <wally-button variant="ghost">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+                        </svg>
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div class="size-10">
+                <wally-tooltip text="Satisfactory answer" [position]="'bottom'">
+                    <wally-button variant="ghost">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
+                        </svg>
+
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div class="size-10">
+                <wally-tooltip text="Unsatisfactory answer" [position]="'bottom'">
+                    <wally-button variant="ghost">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
+                        </svg>
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div class="size-10">
+                <wally-tooltip text="Share" [position]="'bottom'">
+                    <wally-button variant="ghost">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                        </svg>
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div class="size-10">
+                <wally-tooltip text="Regenerate response" [position]="'bottom'">
+                    <wally-button variant="ghost">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+                        </svg>
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div class="size-10">
+                <wally-dropdown-menu>
+                    <wally-dropdown-menu-trigger>
+                        <wally-tooltip text="More options" [position]="'bottom'">
+                            <wally-button variant="ghost">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                                    stroke="currentColor" class="size-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                                </svg>
+                            </wally-button>
+                        </wally-tooltip>
+                    </wally-dropdown-menu-trigger>
+
+                    <wally-dropdown-menu-content>
+                        <wally-dropdown-menu-group>
+                            <wally-dropdown-menu-item>
+                                <div class="flex items-center gap-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="2" stroke="currentColor" class="size-5">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
+                                    </svg>
+
+                                    <span>
+                                        Read aloud
+                                    </span>
+                                </div>
+                            </wally-dropdown-menu-item>
+                        </wally-dropdown-menu-group>
+                    </wally-dropdown-menu-content>
+                </wally-dropdown-menu>
+            </div>
+
+            <div>
+                <wally-button variant="ghost" [rounded]="true">
+                    <div class="flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="size-5">
+                            <path fill="#FFC107"
+                                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
+                            <path fill="#FF3D00"
+                                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
+                            <path fill="#4CAF50"
+                                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
+                            <path fill="#1976D2"
+                                d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
+                        </svg>
+
+                        <span>
+                            Sources
+                        </span>
+                    </div>
+                </wally-button>
+            </div>
+        </div>
+    </article>
+</wally-selection-popover>

package/playground/showcase/src/app/components/ai/ai-message/ai-message.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AiMessage } from './ai-message';
+
+describe('AiMessage', () => {
+  let component: AiMessage;
+  let fixture: ComponentFixture<AiMessage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AiMessage]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AiMessage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/ai/ai-message/ai-message.ts

@@ -0,0 +1,51 @@
+import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
+
+import { Button } from '../../button/button';
+import { Tooltip } from '../../tooltip/tooltip';
+import { DropdownMenu } from '../../dropdown-menu/dropdown-menu';
+import { DropdownMenuContent } from '../../dropdown-menu/dropdown-menu-content/dropdown-menu-content';
+import { DropdownMenuTrigger } from '../../dropdown-menu/dropdown-menu-trigger/dropdown-menu-trigger';
+import { DropdownMenuItem } from '../../dropdown-menu/dropdown-menu-item/dropdown-menu-item';
+import { DropdownMenuGroup } from '../../dropdown-menu/dropdown-menu-group/dropdown-menu-group';
+import { SelectionPopover } from '../../selection-popover/selection-popover';
+
+type role = 'user' | 'assistant';
+
+@Component({
+  selector: 'wally-ai-message',
+  imports: [
+    Button,
+    Tooltip,
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    SelectionPopover
+  ],
+  templateUrl: './ai-message.html',
+  styleUrl: './ai-message.css'
+})
+export class AiMessage {
+  inputRole: InputSignal<role> = input<role>('user');
+
+  textSelected: OutputEmitterRef<string> = output<string>();
+
+  onAskAbout(text: string): void {
+    // console.log('📝 Texto selecionado:', text);
+    // console.log('📏 Tamanho do texto:', text.length);
+    this.textSelected.emit(text);
+    // Aqui você pode emitir um evento para o componente pai (ai-chat)
+    // ou chamar um serviço para adicionar a pergunta ao chat
+  }
+
+  askChat(): void {
+    // console.log('🤖 Botão "Ask chat" clicado');
+    // Este método agora é redundante - o texto é emitido via textSelected
+  }
+
+  copyText(): void {
+    // console.log('Copiando texto selecionado');
+    // Lógica para copiar o texto para a área de transferência
+  }
+}

package/playground/showcase/src/app/components/button/button.html

@@ -1,6 +1,6 @@
 <button [type]="type()" [disabled]="disabled() || loading()" [attr.aria-label]="ariaLabel() || null"
     [attr.aria-describedby]="ariaDescribedBy() || null" [attr.aria-pressed]="ariaPressed()" [attr.aria-busy]="loading()"
-    (click)="handleClick()" [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white active:scale-95 disabled:pointer-events-none p-2.5 disabled:active:scale-100 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()" [ngClass]="{
+    (click)="handleClick($event)" [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white active:scale-95 disabled:pointer-events-none p-2.5 disabled:active:scale-100 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()" [ngClass]="{
       'rounded-md': !rounded(),
       'rounded-full': rounded()
     }">

package/playground/showcase/src/app/components/button/button.ts

@@ -28,7 +28,7 @@ export class Button {
   ariaDescribedBy: InputSignal<string> = input<string>('');
   ariaPressed: InputSignal<boolean | undefined> = input<boolean | undefined>(undefined);
 
-  click: OutputEmitterRef<void> = output<void>();
+  buttonClick: OutputEmitterRef<void> = output<void>();
 
   // Computed classes based on variant
   variantClasses: Signal<string> = computed(() => {
@@ -44,7 +44,7 @@ export class Button {
     return variantMap[this.variant()] || variantMap.primary;
   });
 
-  handleClick(): void {
+  handleClick(event: MouseEvent): void {
     if (this.variant() === 'link' && this.href()) {
       if (this.href().startsWith('http://') || this.href().startsWith('https://')) {
         window.open(this.href(), '_blank');
@@ -53,6 +53,6 @@ export class Button {
       }
     }
 
-    this.click.emit();
+    this.buttonClick.emit();
   }
 }

package/playground/showcase/src/app/components/selection-popover/selection-popover.html

@@ -0,0 +1,27 @@
+<div class="relative">
+  <!-- Original content (where user will select text) -->
+  <ng-content></ng-content>
+
+  <!-- Floating popover -->
+  @if (isVisible()) {
+  <div #popover
+    class="fixed z-50 bg-white dark:bg-neutral-900 shadow-lg rounded-xl border border-neutral-300 dark:border-neutral-700 p-1 transition-opacity duration-150"
+    [class.opacity-0]="!isPositioned()"
+    [class.opacity-100]="isPositioned()"
+    [style.top.px]="adjustedPosition().top" [style.left.px]="adjustedPosition().left" role="dialog"
+    aria-label="Selection actions"
+    (click)="onPopoverClick()">
+
+    <!-- Customizable content via content projection (always rendered) -->
+    <div #customActionsSlot [class.hidden]="!hasCustomActionsSignal()">
+      <ng-content select="[popoverActions]"></ng-content>
+    </div>
+
+    <!-- Fallback: default button (hidden if custom actions exist) -->
+    <button [class.hidden]="hasCustomActionsSignal()"
+      class="px-3 py-2 text-[#0a0a0a] text-sm font-mono hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 rounded transition-colors cursor-pointer">
+      Default Action
+    </button>
+  </div>
+  }
+</div>

package/playground/showcase/src/app/components/selection-popover/selection-popover.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectionPopover } from './selection-popover';
+
+describe('SelectionPopover', () => {
+  let component: SelectionPopover;
+  let fixture: ComponentFixture<SelectionPopover>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectionPopover]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SelectionPopover);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});