@mcp-elements/angular 0.1.0

package/src/index.ts

@@ -0,0 +1,86 @@
+// CSS-only components
+export { SnxButtonComponent } from './button.component'
+export { SnxBadgeComponent } from './badge.component'
+export {
+  SnxCardComponent,
+  SnxCardHeaderComponent,
+  SnxCardTitleComponent,
+  SnxCardDescriptionComponent,
+  SnxCardContentComponent,
+  SnxCardFooterComponent,
+} from './card.component'
+export { SnxInputComponent } from './input.component'
+export { SnxTextareaComponent } from './textarea.component'
+export { SnxAvatarComponent } from './avatar.component'
+export { SnxSeparatorComponent } from './separator.component'
+export { SnxSkeletonComponent } from './skeleton.component'
+
+// Interactive components
+export { SnxDialogComponent } from './dialog.component'
+export {
+  SnxTabsComponent,
+  SnxTabsListComponent,
+  SnxTabsTriggerComponent,
+  SnxTabsContentComponent,
+} from './tabs.component'
+export {
+  SnxAccordionComponent,
+  SnxAccordionItemComponent,
+  SnxAccordionTriggerComponent,
+  SnxAccordionContentComponent,
+} from './accordion.component'
+export { SnxSelectComponent } from './select.component'
+export { SnxTooltipDirective } from './tooltip.directive'
+export { SnxPopoverComponent } from './popover.component'
+
+// New components
+export { SnxToasterComponent, SnxToastService } from './toast.component'
+export { SnxDrawerComponent, SnxDrawerHeaderComponent, SnxDrawerFooterComponent, SnxDrawerTitleComponent, SnxDrawerDescriptionComponent, SnxDrawerBodyComponent } from './drawer.component'
+export { SnxDropdownMenuComponent } from './dropdown-menu.component'
+export { SnxSwitchComponent } from './switch.component'
+export { SnxProgressComponent } from './progress.component'
+export { SnxLoaderComponent } from './loader.component'
+export { SnxChipComponent, SnxChipsComponent } from './chips.component'
+export { SnxPasswordInputComponent } from './password-input.component'
+export { SnxCounterComponent } from './counter.component'
+export { SnxAlertComponent, SnxAlertTitleComponent, SnxAlertDescriptionComponent } from './alert.component'
+
+// AI components
+export {
+  SnxPromptInputComponent,
+  SnxPromptInputTextareaComponent,
+  SnxPromptInputFooterComponent,
+  SnxPromptInputActionsComponent,
+  SnxPromptInputCharCountComponent,
+  SnxPromptInputAttachmentsComponent,
+  SnxPromptInputAttachmentComponent,
+} from './prompt-input.component'
+export {
+  SnxChatBubbleComponent,
+  SnxChatBubbleAvatarComponent,
+  SnxChatBubbleContentComponent,
+  SnxChatBubbleTimestampComponent,
+  SnxChatBubbleTypingComponent,
+} from './chat-bubble.component'
+export { SnxAiBadgeComponent } from './ai-badge.component'
+export { SnxSuggestionChipsComponent, SnxSuggestionChipComponent } from './suggestion-chips.component'
+export { SnxSourceCardsComponent, SnxSourceCardComponent } from './source-card.component'
+export {
+  SnxStreamingTextComponent,
+  SnxStreamingTextFadeInComponent,
+  SnxStreamingTextWordComponent,
+  SnxStreamingTextLineComponent,
+  SnxStreamingTextSkeletonComponent,
+  SnxStreamingTextSkeletonLineComponent,
+} from './streaming-text.component'
+export {
+  SnxFeedbackComponent,
+  SnxFeedbackButtonComponent,
+  SnxFeedbackSeparatorComponent,
+  SnxFeedbackFormComponent,
+  SnxFeedbackInputComponent,
+  SnxFeedbackSubmitComponent,
+} from './feedback.component'
+
+// MCP components
+export * from './mcp'

package/src/input.component.ts

@@ -0,0 +1,46 @@
+import { Component, input, computed, output, forwardRef } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  selector: 'mcpe-input',
+  standalone: true,
+  template: `
+    <input
+      [class]="classes()"
+      [type]="type()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [value]="value()"
+      (input)="onInput($event)"
+      (blur)="onTouched()"
+    />
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SnxInputComponent),
+      multi: true,
+    },
+  ],
+})
+export class SnxInputComponent implements ControlValueAccessor {
+  type = input<string>('text')
+  placeholder = input('')
+  disabled = input(false)
+  value = input('')
+  class = input('')
+
+  classes = computed(() => ['mcpe-input', this.class()].filter(Boolean).join(' '))
+
+  private onChange: (value: string) => void = () => {}
+  onTouched: () => void = () => {}
+
+  onInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.onChange(value)
+  }
+
+  writeValue(value: string): void {}
+  registerOnChange(fn: (value: string) => void): void { this.onChange = fn }
+  registerOnTouched(fn: () => void): void { this.onTouched = fn }
+}

package/src/loader.component.ts

@@ -0,0 +1,12 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-loader',
+  standalone: true,
+  template: `<div [class]="classes()" role="status" aria-label="Loading"><span class="sr-only">Loading...</span></div>`,
+})
+export class SnxLoaderComponent {
+  size = input<'sm' | 'md' | 'lg' | 'xl'>('md')
+  variant = input<'primary' | 'muted'>('primary')
+  classes = computed(() => `mcpe-loader mcpe-loader-${this.size()} mcpe-loader-${this.variant()}`)
+}

package/src/mcp/index.ts

@@ -0,0 +1,9 @@
+export { McpeMcpServerStatusComponent } from './mcp-server-status.component'
+export type { McpConnectionStatus } from './mcp-server-status.component'
+export { McpeMcpToolCallComponent } from './mcp-tool-call.component'
+export { McpeMcpToolFormComponent } from './mcp-tool-form.component'
+export { McpeMcpConsentDialogComponent } from './mcp-consent-dialog.component'
+export { McpeMcpScopeInspectorComponent } from './mcp-scope-inspector.component'
+export { McpeMcpResourceBrowserComponent } from './mcp-resource-browser.component'
+export type { McpResource } from './mcp-resource-browser.component'
+export { McpeMcpAppFrameComponent } from './mcp-app-frame.component'

package/src/mcp/mcp-app-frame.component.ts

@@ -0,0 +1,60 @@
+import { Component, input, output, effect, computed, ElementRef, viewChild, OnDestroy } from '@angular/core'
+import { cn, createAppBridge } from '@mcp-elements/core'
+import type { AppMessageEnvelope } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-mcp-app-frame',
+  standalone: true,
+  template: `
+    <div [class]="classes()">
+      <iframe
+        #frame
+        [src]="src()"
+        [sandbox]="sandbox()"
+        [style.height.px]="height()"
+        title="MCP App"
+        aria-label="MCP App frame"
+        style="display:block;width:100%;border:none"
+      ></iframe>
+    </div>
+  `,
+})
+export class McpeMcpAppFrameComponent implements OnDestroy {
+  src = input.required<string>()
+  height = input(480)
+  sandbox = input('allow-scripts allow-same-origin')
+  class = input('')
+  onMessage = output<AppMessageEnvelope>()
+
+  frame = viewChild<ElementRef<HTMLIFrameElement>>('frame')
+
+  private _unsub: (() => void) | undefined
+  private _removeListener: (() => void) | undefined
+
+  constructor() {
+    effect(() => {
+      this._cleanup()
+      const bridge = createAppBridge({
+        postMessage: (env: AppMessageEnvelope) => {
+          this.frame()?.nativeElement?.contentWindow?.postMessage(env, '*')
+        },
+      })
+      const unsub = bridge.onMessage((env: AppMessageEnvelope) => this.onMessage.emit(env))
+      const handler = (e: MessageEvent) => bridge.receive(e.data)
+      window.addEventListener('message', handler)
+      this._unsub = unsub
+      this._removeListener = () => window.removeEventListener('message', handler)
+    })
+  }
+
+  private _cleanup() {
+    this._unsub?.()
+    this._removeListener?.()
+    this._unsub = undefined
+    this._removeListener = undefined
+  }
+
+  ngOnDestroy() { this._cleanup() }
+
+  classes = computed(() => cn('mcpe-mcp-app-frame', this.class()))
+}

package/src/mcp/mcp-consent-dialog.component.ts

@@ -0,0 +1,63 @@
+import { Component, input, output, computed } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { parseScopes } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-mcp-consent-dialog',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (open()) {
+      <div class="mcpe-dialog-overlay" (click)="deny()"></div>
+      <div class="mcpe-dialog-content" role="dialog" aria-modal="true" [attr.aria-label]="'Allow ' + serverName() + '?'">
+        <!-- Server info -->
+        <div class="mcpe-mcp-consent-dialog-server">
+          <div class="mcpe-mcp-consent-dialog-icon" aria-hidden="true">
+            @if (serverIcon()) {
+              <img [src]="serverIcon()" alt="" class="h-full w-full object-cover" />
+            } @else {
+              {{ serverName()[0]?.toUpperCase() ?? '?' }}
+            }
+          </div>
+          <div>
+            <p class="mcpe-mcp-consent-dialog-server-name">{{ serverName() }}</p>
+            <p class="mcpe-mcp-consent-dialog-server-meta">is requesting access to</p>
+          </div>
+        </div>
+        <!-- Scopes -->
+        <div class="mcpe-mcp-consent-dialog-scopes" role="list" aria-label="Requested permissions">
+          @for (s of parsedScopes(); track s.raw) {
+            <div class="mcpe-mcp-consent-dialog-scope-item" role="listitem">
+              <div class="flex-1 min-w-0">
+                <p class="mcpe-mcp-consent-dialog-scope-resource">{{ s.resource }}</p>
+                <div class="mcpe-mcp-consent-dialog-scope-perms">
+                  @for (p of s.permissions; track p) {
+                    <span class="mcpe-mcp-consent-dialog-scope-perm">{{ p }}</span>
+                  }
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+        <!-- Actions -->
+        <div class="mcpe-mcp-consent-dialog-actions">
+          <button class="mcpe-btn mcpe-btn-outline flex-1" (click)="deny()">Deny</button>
+          <button class="mcpe-btn mcpe-btn-primary flex-1" (click)="approve()">Allow</button>
+        </div>
+      </div>
+    }
+  `,
+})
+export class McpeMcpConsentDialogComponent {
+  open = input.required<boolean>()
+  serverName = input.required<string>()
+  serverIcon = input<string>()
+  scopes = input<string[]>([])
+  onApprove = output<void>()
+  onDeny = output<void>()
+
+  parsedScopes = computed(() => parseScopes(this.scopes().join(' ')))
+
+  approve() { this.onApprove.emit() }
+  deny() { this.onDeny.emit() }
+}

package/src/mcp/mcp-resource-browser.component.ts

@@ -0,0 +1,86 @@
+import { Component, input, output, computed } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { cn } from '@mcp-elements/core'
+
+export interface McpResource {
+  uri: string
+  name: string
+  mimeType?: string
+  description?: string
+}
+
+function mimeTypeLabel(mimeType?: string): string {
+  if (!mimeType) return 'res'
+  if (mimeType.includes('json')) return 'json'
+  if (mimeType.includes('text')) return 'txt'
+  if (mimeType.includes('image')) return 'img'
+  if (mimeType.includes('pdf')) return 'pdf'
+  return mimeType.split('/')[1]?.slice(0, 4) ?? 'res'
+}
+
+@Component({
+  selector: 'mcpe-mcp-resource-browser',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (loading()) {
+      <div [class]="classes()">
+        @for (n of skeletonItems; track n) {
+          <div class="flex items-center gap-3 px-3 py-2.5">
+            <div class="h-8 w-8 rounded-md animate-pulse bg-muted"></div>
+            <div class="h-4 flex-1 rounded animate-pulse bg-muted"></div>
+          </div>
+        }
+      </div>
+    } @else if (resources().length === 0) {
+      <div [class]="classes()">
+        <p class="mcpe-mcp-resource-browser-empty">No resources available</p>
+      </div>
+    } @else {
+      <div [class]="classes()" role="list">
+        @for (r of resources(); track r.uri) {
+          <button
+            type="button"
+            role="listitem"
+            [class]="itemClass(r.uri)"
+            [attr.aria-selected]="selectedUri() === r.uri"
+            [attr.aria-label]="r.name"
+            (click)="select(r)"
+          >
+            <span class="mcpe-mcp-resource-browser-icon" aria-hidden="true">{{ mimeLabel(r.mimeType) }}</span>
+            <span class="mcpe-mcp-resource-browser-name">{{ r.name }}</span>
+            @if (r.mimeType) {
+              <span class="mcpe-mcp-resource-browser-type">{{ r.mimeType.split('/')[0] }}</span>
+            }
+          </button>
+        }
+      </div>
+    }
+  `,
+})
+export class McpeMcpResourceBrowserComponent {
+  resources = input<McpResource[]>([])
+  selectedUri = input<string>()
+  loading = input(false)
+  class = input('')
+  onSelect = output<McpResource>()
+
+  readonly skeletonItems = [1, 2, 3, 4]
+
+  classes = computed(() => cn('mcpe-mcp-resource-browser', this.class()))
+
+  itemClass(uri: string): string {
+    return cn(
+      'mcpe-mcp-resource-browser-item w-full text-left',
+      this.selectedUri() === uri ? 'mcpe-mcp-resource-browser-item-selected' : ''
+    )
+  }
+
+  mimeLabel(mimeType?: string): string {
+    return mimeTypeLabel(mimeType)
+  }
+
+  select(r: McpResource) {
+    this.onSelect.emit(r)
+  }
+}

package/src/mcp/mcp-scope-inspector.component.ts

@@ -0,0 +1,81 @@
+import { Component, input, signal, computed } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { cn, parseScopes } from '@mcp-elements/core'
+import type { ScopeDescriptor } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-mcp-scope-inspector',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div [class]="classes()" role="list">
+      @for (s of parsedScopes(); track s.raw) {
+        <div class="mcpe-mcp-scope-inspector-item" role="listitem">
+          <button
+            type="button"
+            class="mcpe-mcp-scope-inspector-trigger"
+            [attr.aria-expanded]="isOpen(s.raw)"
+            (click)="toggle(s.raw)"
+          >
+            <div class="flex items-center gap-3">
+              <span class="mcpe-mcp-scope-inspector-resource">{{ s.resource }}</span>
+              <div class="mcpe-mcp-scope-inspector-perms">
+                @for (p of s.permissions; track p) {
+                  <span class="mcpe-mcp-scope-inspector-perm">{{ p }}</span>
+                }
+              </div>
+            </div>
+            <svg
+              [class]="chevronClass(s.raw)"
+              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="m6 9 6 6 6-6"/>
+            </svg>
+          </button>
+          @if (isOpen(s.raw) && getDescription(s)) {
+            <div role="region" class="mcpe-mcp-scope-inspector-body">
+              {{ getDescription(s) }}
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+})
+export class McpeMcpScopeInspectorComponent {
+  scopes = input<string | ScopeDescriptor[]>('')
+  descriptions = input<Record<string, string>>({})
+  class = input('')
+
+  openKeys = signal<Set<string>>(new Set())
+
+  parsedScopes = computed((): ScopeDescriptor[] => {
+    const s = this.scopes()
+    return typeof s === 'string' ? parseScopes(s) : s
+  })
+
+  classes = computed(() => cn('mcpe-mcp-scope-inspector', this.class()))
+
+  toggle(key: string) {
+    this.openKeys.update((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }
+
+  isOpen(key: string): boolean {
+    return this.openKeys().has(key)
+  }
+
+  chevronClass(key: string): string {
+    return cn('mcpe-mcp-scope-inspector-chevron', this.isOpen(key) ? 'mcpe-mcp-scope-inspector-chevron-open' : '')
+  }
+
+  getDescription(s: ScopeDescriptor): string | undefined {
+    const d = this.descriptions()
+    return d[s.raw] ?? d[s.resource] ?? s.description
+  }
+}

package/src/mcp/mcp-server-status.component.ts

@@ -0,0 +1,44 @@
+import { Component, input, computed } from '@angular/core'
+import { cn } from '@mcp-elements/core'
+
+export type McpConnectionStatus = 'connected' | 'connecting' | 'disconnected' | 'error'
+
+const STATUS_LABELS: Record<McpConnectionStatus, string> = {
+  connected: 'Connected',
+  connecting: 'Connecting',
+  disconnected: 'Disconnected',
+  error: 'Error',
+}
+
+@Component({
+  selector: 'mcpe-mcp-server-status',
+  standalone: true,
+  template: `
+    <span
+      [class]="classes()"
+      role="status"
+      aria-live="polite"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <span class="mcpe-mcp-server-status-dot" aria-hidden="true"></span>
+      {{ label() }}
+    </span>
+  `,
+})
+export class McpeMcpServerStatusComponent {
+  status = input.required<McpConnectionStatus>()
+  serverName = input<string>()
+  class = input('')
+
+  classes = computed(() => cn('mcpe-mcp-server-status', `mcpe-mcp-server-status-${this.status()}`, this.class()))
+  label = computed(() => {
+    const s = this.serverName()
+    const statusLabel = STATUS_LABELS[this.status() as McpConnectionStatus]
+    return s ? `${s} · ${statusLabel}` : statusLabel
+  })
+  ariaLabel = computed(() => {
+    const s = this.serverName()
+    const statusLabel = STATUS_LABELS[this.status() as McpConnectionStatus]
+    return s ? `${s}: ${statusLabel}` : statusLabel
+  })
+}

package/src/mcp/mcp-tool-call.component.ts

@@ -0,0 +1,105 @@
+import { Component, input, output, signal, effect, computed, OnDestroy } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { cn } from '@mcp-elements/core'
+import type { ToolStateApi, ToolStateSnapshot } from '@mcp-elements/core'
+
+const STATUS_LABELS: Record<string, string> = {
+  idle: 'idle',
+  pending: 'pending',
+  running: 'running',
+  done: 'done',
+  error: 'error',
+  cancelled: 'cancelled',
+}
+
+@Component({
+  selector: 'mcpe-mcp-tool-call',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div [class]="classes()">
+      <!-- Header -->
+      <div class="mcpe-mcp-tool-call-header">
+        <div class="mcpe-mcp-tool-call-name">
+          <span class="mcpe-mcp-tool-call-icon" aria-hidden="true">fn</span>
+          <span class="mcpe-mcp-tool-call-title">{{ displayName() }}</span>
+        </div>
+        <span [class]="badgeClass()">
+          @if (snap().status === 'running') {
+            <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+            </svg>
+          }
+          {{ statusLabels[snap().status] }}
+        </span>
+      </div>
+      <!-- Args -->
+      @if (displayArgs()) {
+        <pre class="mcpe-mcp-tool-call-args">{{ displayArgs() | json }}</pre>
+      }
+      <!-- Progress bar -->
+      @if (snap().status === 'running') {
+        <div class="mcpe-mcp-tool-call-progress" role="progressbar" aria-label="Tool running">
+          <div class="mcpe-mcp-tool-call-progress-bar" style="width: 60%"></div>
+        </div>
+      }
+      <!-- Result -->
+      @if (snap().status === 'done' && snap().result) {
+        <div class="mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-done">
+          @for (block of textBlocks(); track $index) {
+            <p class="whitespace-pre-wrap text-sm">{{ block }}</p>
+          }
+        </div>
+      }
+      <!-- Error -->
+      @if (snap().status === 'error' && snap().error) {
+        <div class="mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-error">
+          <p class="text-sm">{{ snap().error?.message }}</p>
+          <button (click)="onRetry.emit()" class="text-xs underline underline-offset-2">Retry</button>
+        </div>
+      }
+    </div>
+  `,
+})
+export class McpeMcpToolCallComponent implements OnDestroy {
+  state = input.required<ToolStateApi>()
+  toolName = input<string>()
+  args = input<Record<string, unknown>>()
+  onRetry = output<void>()
+  class = input('')
+
+  readonly statusLabels = STATUS_LABELS
+
+  snap = signal<ToolStateSnapshot>({ status: 'idle' })
+  private _unsub: (() => void) | undefined
+
+  constructor() {
+    effect(() => {
+      this._unsub?.()
+      const s = this.state()
+      this.snap.set({
+        status: s.status,
+        tool: s.tool,
+        args: s.args,
+        result: s.result,
+        error: s.error,
+        startedAt: s.startedAt,
+        endedAt: s.endedAt,
+      })
+      this._unsub = s.subscribe((snapshot: ToolStateSnapshot) => this.snap.set({ ...snapshot }))
+    })
+  }
+
+  ngOnDestroy() { this._unsub?.() }
+
+  classes = computed(() => cn('mcpe-mcp-tool-call', this.class()))
+  badgeClass = computed(() => cn('mcpe-mcp-tool-call-badge', `mcpe-mcp-tool-call-badge-${this.snap().status}`))
+  displayName = computed(() => this.snap().tool ?? this.toolName() ?? 'unknown')
+  displayArgs = computed(() => this.snap().args ?? this.args())
+  textBlocks = computed(() =>
+    this.snap().result?.content
+      .filter((c: { type: string }) => c.type === 'text')
+      .map((c: { type: string; text?: string }) => (c as { type: 'text'; text: string }).text) ?? []
+  )
+}