wally-ui 1.11.1 → 1.12.0

package/dist/cli.js

@@ -41,6 +41,13 @@ program
     .command('add <component>')
     .description('Add a new component')
     .action(async (component) => {
+    // Block AI components (coming soon in Chat SDK)
+    if (component.startsWith('ai-')) {
+        console.log(chalk_1.default.yellowBright(`\n AI components (${component}) are part of the Chat SDK (coming soon).`));
+        console.log(chalk_1.default.blueBright('These components will be available via: ') + chalk_1.default.cyan('npx wally-ui add chat-sdk'));
+        console.log(chalk_1.default.gray('Visit https://wally-ui.com/documentation/chat-sdk for more info.\n'));
+        return;
+    }
     // Check if Angular project
     if (!fs_extra_1.default.existsSync('angular.json')) {
         console.log(chalk_1.default.redBright('Not an Angular project. Run this in Angular project root.'));

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.11.1",
+  "version": "1.12.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"
@@ -35,7 +35,9 @@
     "design-system",
     "tailwind",
     "angular-tailwind",
-    "typescript"
+    "typescript",
+    "chatbot",
+    "chatbot-sdk"
   ],
   "engines": {
     "node": ">=20.0.0"

package/playground/showcase/public/sitemap.xml

@@ -52,4 +52,36 @@
         <priority>0.8</priority>
     </url>
 
+    <!-- Breadcrumb Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/breadcrumb</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Tooltip Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/tooltip</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Chat SDK Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/chat-sdk</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.9</priority>
+    </url>
+
+    <!-- MCP Server Documentation -->
+    <url>
+        <loc>https://wally-ui.com/mcp</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
 </urlset>

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

@@ -25,6 +25,14 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/carousel',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/tooltip',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/chat-sdk',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'components',
     renderMode: RenderMode.Prerender,

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

@@ -0,0 +1,5 @@
+<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>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
+import { AiComposer } from '../ai-composer/ai-composer';
+
+@Component({
+  selector: 'wally-ai-chat',
+  imports: [
+    AiComposer,
+    AiPromptInput,
+  ],
+  templateUrl: './ai-chat.html',
+  styleUrl: './ai-chat.css'
+})
+export class AiChat {
+
+}

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

@@ -0,0 +1,69 @@
+<div class="w-full flex flex-col" role="region" aria-label="AI message composer">
+    <!-- Selected Text Context -->
+    <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"
+            role="status"
+            aria-live="polite">
+            <div class="w-full flex gap-4 items-center">
+                <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>
+
+                <p class="text-sm text-[#0a0a0a] dark:text-white" id="context-label">
+                    "Ask about"
+                </p>
+            </div>
+
+            <div>
+                <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"
+                        stroke="currentColor" class="size-5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                    </svg>
+                </wally-button>
+            </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="size-10">
+            <wally-tooltip [text]="'Add files and more'" position="bottom">
+                <wally-button
+                    [variant]="'ghost'"
+                    [rounded]="true"
+                    [ariaLabel]="'Add attachment or insert content'">
+                    <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="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                </wally-button>
+            </wally-tooltip>
+        </div>
+
+        <div class="size-10">
+            <wally-button
+                [variant]="'primary'"
+                [rounded]="true"
+                [ariaLabel]="'Send message'">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                    stroke="currentColor" class="size-5" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
+                </svg>
+            </wally-button>
+        </div>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
+import { Button } from '../../button/button';
+import { Tooltip } from '../../tooltip/tooltip';
+
+@Component({
+  selector: 'wally-ai-composer',
+  imports: [
+    AiPromptInput,
+    Tooltip,
+    Button
+  ],
+  templateUrl: './ai-composer.html',
+  styleUrl: './ai-composer.css'
+})
+export class AiComposer {
+
+}

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.html

@@ -0,0 +1,10 @@
+<textarea #textarea id="ai-prompt-input" class="w-full h-auto max-h-60 text-sm placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500 resize-none focus:outline-none focus:ring-0 overflow-y-auto [&::-webkit-scrollbar]:w-2
+      [&::-webkit-scrollbar-track]:bg-transparent
+      [&::-webkit-scrollbar-thumb]:bg-neutral-300
+      [&::-webkit-scrollbar-thumb]:rounded-full
+      dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700" name="ai-prompt" rows="1" placeholder="Ask something"
+    aria-label="AI prompt input" aria-describedby="ai-prompt-description" autocomplete="off" autocorrect="off"
+    aria-multiline="true" autocapitalize="sentences" spellcheck="true" (input)="onInput()"></textarea>
+<span id="ai-prompt-description" class="sr-only">
+    Enter your message or prompt for the AI assistant. Press Enter to send, Shift+Enter for new line.
+</span>

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

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

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.ts

@@ -0,0 +1,25 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'wally-ai-prompt-input',
+  imports: [],
+  templateUrl: './ai-prompt-input.html',
+  styleUrl: './ai-prompt-input.css'
+})
+export class AiPromptInput implements AfterViewInit {
+  @ViewChild('textarea') textarea!: ElementRef<HTMLTextAreaElement>;
+
+  ngAfterViewInit(): void {
+    this.adjustHeight();
+  }
+
+  public onInput(): void {
+    this.adjustHeight();
+  }
+
+  private adjustHeight(): void {
+    const element = this.textarea.nativeElement;
+    element.style.height = 'auto';
+    element.style.height = `${element.scrollHeight}px`;
+  }
+}

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

@@ -1,7 +1,11 @@
 <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 disabled:pointer-events-none p-2.5 rounded-md transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()">
+    [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white disabled:pointer-events-none p-2.5 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()"
+    [ngClass]="{
+      'rounded-md': !rounded(),
+      'rounded-full': rounded()
+    }">
 
     @if (showNotification()) {
     <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">

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

@@ -21,6 +21,7 @@ export class Button {
   showNotification: InputSignal<boolean> = input<boolean>(false);
   variant: InputSignal<ButtonVariant> = input<ButtonVariant>('primary');
   href: InputSignal<string> = input<string>('');
+  rounded: InputSignal<boolean> = input<boolean>(false);
 
   // Accessibility properties
   ariaLabel: InputSignal<string> = input<string>('');

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

@@ -1,36 +1,4 @@
 <div class="w-full h-full flex flex-col items-center gap-4 p-2">
-    <div class="w-full h-full flex items-center gap-3">
-        <div>
-            <button type="button"
-                class="group hidden sm:block bg-neutral-100 hover:bg-neutral-200 border-2 border-neutral-200 hover:border-neutral-300 dark:bg-[#1b1b1b] dark:hover:bg-[#1d1d1d] dark:border-neutral-700 hover:dark:border-neutral-600 p-2 rounded-full cursor-pointer transition-all duration-500 ease-in-out"
-                aria-label="Go to previous slide">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                    stroke="currentColor"
-                    class="size-5 text-neutral-500 dark:text-neutral-300 group-hover:dark:text-white transition-all duration-500 ease-in-out">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-                </svg>
-            </button>
-        </div>
-
-        <div #carouselContainer class="w-full h-full flex gap-2">
-            <ng-content></ng-content>
-        </div>
-
-        <div>
-            <button type="button"
-                class="group hidden sm:block bg-neutral-100 hover:bg-neutral-200 border-2 border-neutral-200 hover:border-neutral-300 dark:bg-[#1b1b1b] dark:hover:bg-[#1d1d1d] dark:border-neutral-700 hover:dark:border-neutral-600 p-2 rounded-full cursor-pointer transition-all duration-500 ease-in-out"
-                aria-label="Go to next slide">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                    stroke="currentColor"
-                    class="size-5 text-neutral-500 dark:text-neutral-300 group-hover:dark:text-white transition-all duration-500 ease-in-out">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
-                </svg>
-            </button>
-        </div>
-    </div>
-</div>
-
-<!-- <div class="w-full h-full flex flex-col items-center gap-4 p-2">
     <div class="w-full h-full flex items-center gap-3">
         <div>
             <button type="button"
@@ -75,4 +43,4 @@
         }
     </div>
     }
-</div> -->
+</div>