@stephen-netu/design-system 0.1.0 → 0.2.1

package/{src → dist}/fabric/ai/ChatPanel.svelte

@@ -59,17 +59,17 @@
     emptyStateHint?: string;
   }
 
-  const props: Props = $props();
+  let { messages, inputValue, isStreaming, error, hasContext, contextCards, contextCount, onSend, onInputChange, onClearChat, onClearContext, onCitationClick, voiceButton, title, placeholder, emptyStateText, emptyStateHint }: Props = $props();
 
   let inputElement: HTMLInputElement;
   let messagesContainer: HTMLDivElement;
 
   function handleSend() {
-    const prompt = props.inputValue.trim();
-    if (!prompt || props.isStreaming) return;
+    const prompt = inputValue.trim();
+    if (!prompt || isStreaming) return;
     
-    props.onSend(prompt);
-    props.onInputChange('');
+    onSend(prompt);
+    onInputChange('');
   }
 
   function handleKeydown(e: KeyboardEvent) {
@@ -80,7 +80,7 @@
   }
 
   function handleCitationClick(source: string) {
-    props.onCitationClick?.(source);
+    onCitationClick?.(source);
   }
 
   function formatTime(date: Date): string {
@@ -115,7 +115,7 @@
   }
 
   $effect(() => {
-    if (props.messages.length) {
+    if (messages.length) {
       tick().then(() => {
         if (messagesContainer) {
           messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -132,11 +132,11 @@
 <div class="chat-panel" data-testid="chat-panel">
   <!-- Header -->
   <div class="chat-header" data-testid="chat-header">
-    <h3 class="chat-title" data-testid="chat-title">{props.title || 'AI Assistant'}</h3>
-    {#if props.messages.length > 0}
+    <h3 class="chat-title" data-testid="chat-title">{title || 'AI Assistant'}</h3>
+    {#if messages.length > 0}
       <button
         class="clear-btn"
-        onclick={props.onClearChat}
+        onclick={onClearChat}
         title="Start new conversation"
       >
         <Trash2 size={14} />
@@ -145,28 +145,28 @@
   </div>
 
   <!-- Context Bar -->
-  {#if props.hasContext && props.contextCount && props.contextCount > 0}
+  {#if hasContext && contextCount && contextCount > 0}
     <div class="context-bar">
       <div class="context-info">
         <MessageSquare size={14} />
         <span class="context-text">
-          Chatting about: {props.contextCount} card{props.contextCount === 1 ? '' : 's'}
+          Chatting about: {contextCount} card{contextCount === 1 ? '' : 's'}
         </span>
       </div>
       <div class="context-actions">
-        {#if props.contextCards && props.contextCards.length <= 3}
+        {#if contextCards && contextCards.length <= 3}
           <div class="context-titles">
-            {#each props.contextCards as card}
+            {#each contextCards as card}
               <span class="context-chip" title={card.title}>
                 {card.title || 'Untitled'}
               </span>
             {/each}
           </div>
         {/if}
-        {#if props.onClearContext}
+        {#if onClearContext}
           <button
             class="clear-context-btn"
-            onclick={props.onClearContext}
+            onclick={onClearContext}
             title="Clear context"
           >
             <X size={14} />
@@ -178,14 +178,14 @@
 
   <!-- Messages -->
   <div class="messages-container" bind:this={messagesContainer}>
-    {#if props.messages.length === 0}
+    {#if messages.length === 0}
       <div class="empty-state">
         <div class="empty-icon">💬</div>
-        <p class="empty-text">{props.emptyStateText || 'Ask about your knowledge base'}</p>
-        <p class="empty-hint">{props.emptyStateHint || 'Try: "What are embeddings?" or "Summarize my notes"'}</p>
+        <p class="empty-text">{emptyStateText || 'Ask about your knowledge base'}</p>
+        <p class="empty-hint">{emptyStateHint || 'Try: "What are embeddings?" or "Summarize my notes"'}</p>
       </div>
     {:else}
-      {#each props.messages as message (message.id)}
+      {#each messages as message (message.id)}
         <div 
           class="message"
           class:user={message.role === 'user'}
@@ -226,9 +226,9 @@
       {/each}
     {/if}
 
-    {#if props.error}
+    {#if error}
       <div class="error-message">
-        {props.error}
+        {error}
       </div>
     {/if}
   </div>
@@ -238,20 +238,20 @@
     <div class="input-wrapper">
       <input
         bind:this={inputElement}
-        value={props.inputValue}
-        oninput={(e) => props.onInputChange(e.currentTarget.value)}
+        value={inputValue}
+        oninput={(e) => onInputChange(e.currentTarget.value)}
         onkeydown={handleKeydown}
-        placeholder={props.isStreaming ? 'Receiving response...' : (props.placeholder || 'Type your message...')}
-        disabled={props.isStreaming}
+        placeholder={isStreaming ? 'Receiving response...' : (placeholder || 'Type your message...')}
+        disabled={isStreaming}
         class="chat-input"
       />
-      {#if props.voiceButton}
-        {@render props.voiceButton()}
+      {#if voiceButton}
+        {@render voiceButton()}
       {/if}
       <button 
         class="send-btn"
         onclick={handleSend}
-        disabled={!props.inputValue.trim() || props.isStreaming}
+        disabled={!inputValue.trim() || isStreaming}
         title="Send message"
       >
         <Send size={16} />
@@ -309,7 +309,7 @@
     padding: 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: var(--space-3);
   }
 
   .empty-state {
@@ -360,7 +360,7 @@
   }
 
   .message.user .message-bubble {
-    background: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
     color: white;
     border-bottom-right-radius: 4px;
   }
@@ -413,7 +413,7 @@
     display: inline-block;
     width: 2px;
     height: 1em;
-    background: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
     margin-left: 2px;
     animation: blink 1s infinite;
     vertical-align: middle;
@@ -427,7 +427,7 @@
   .citations {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: var(--space-15);
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid var(--border-subtle, #2a2a2a);
@@ -436,12 +436,12 @@
   .citation-chip {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-1);
     padding: 4px 8px;
-    background: var(--accent-subtle, rgba(184, 115, 51, 0.15));
-    border: 1px solid var(--accent-primary, #b87333);
+    background: var(--accent-subtle, var(--color-accent-muted));
+    border: 1px solid var(--accent-primary, var(--color-accent));
     border-radius: var(--radius-xl, 12px);
-    color: var(--accent-primary, #b87333);
+    color: var(--accent-primary, var(--color-accent));
     font-size: 11px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -449,7 +449,7 @@
   }
 
   .citation-chip:hover {
-    background: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
     color: white;
   }
 
@@ -474,7 +474,7 @@
     padding: 10px 12px;
     background: var(--bg-panel-elevated, #252525);
     border: 1px solid var(--border-subtle, #2a2a2a);
-    border-left: 3px solid var(--accent-primary, #b87333);
+    border-left: 3px solid var(--accent-primary, var(--color-accent));
     border-radius: var(--radius-md, 6px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 10;
@@ -523,7 +523,7 @@
 
   .input-wrapper {
     display: flex;
-    gap: 8px;
+    gap: var(--space-2);
     align-items: center;
   }
 
@@ -540,7 +540,7 @@
   }
 
   .chat-input:focus {
-    border-color: var(--accent-primary, #b87333);
+    border-color: var(--accent-primary, var(--color-accent));
   }
 
   .chat-input::placeholder {
@@ -559,7 +559,7 @@
     width: 36px;
     height: 36px;
     padding: 0;
-    background: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
     border: none;
     border-radius: 50%;
     color: white;
@@ -584,16 +584,16 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px 12px;
-    background: var(--accent-subtle, rgba(184, 115, 51, 0.1));
-    border-bottom: 1px solid var(--border-focus, rgba(184, 115, 51, 0.3));
-    gap: 8px;
+    background: var(--accent-subtle, var(--color-accent-subtle));
+    border-bottom: 1px solid var(--border-focus, var(--color-accent-muted));
+    gap: var(--space-2);
   }
 
   .context-info {
     display: flex;
     align-items: center;
-    gap: 6px;
-    color: var(--accent-primary, #b87333);
+    gap: var(--space-15);
+    color: var(--accent-primary, var(--color-accent));
     font-size: 12px;
     font-weight: 500;
     white-space: nowrap;
@@ -602,7 +602,7 @@
   .context-actions {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     flex: 1;
     min-width: 0;
     justify-content: flex-end;
@@ -610,7 +610,7 @@
 
   .context-titles {
     display: flex;
-    gap: 4px;
+    gap: var(--space-1);
     overflow: hidden;
   }
 

package/dist/fabric/ai/ChatPanel.svelte.d.ts

@@ -0,0 +1,39 @@
+export interface Citation {
+    source: string;
+    quote?: string;
+}
+export interface ContextCard {
+    id: string;
+    title: string;
+}
+export interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    isStreaming?: boolean;
+    citations?: Citation[];
+    timestamp?: Date;
+}
+interface Props {
+    messages: Message[];
+    inputValue: string;
+    isStreaming: boolean;
+    error: string | null;
+    hasContext?: boolean;
+    contextCards?: ContextCard[];
+    contextCount?: number;
+    onSend: (message: string) => void;
+    onInputChange: (value: string) => void;
+    onClearChat: () => void;
+    onClearContext?: () => void;
+    onCitationClick?: (source: string) => void;
+    voiceButton?: import('svelte').Snippet;
+    title?: string;
+    placeholder?: string;
+    emptyStateText?: string;
+    emptyStateHint?: string;
+}
+declare const ChatPanel: import("svelte").Component<Props, {}, "">;
+type ChatPanel = ReturnType<typeof ChatPanel>;
+export default ChatPanel;
+//# sourceMappingURL=ChatPanel.svelte.d.ts.map

package/dist/fabric/ai/ChatPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/ai/ChatPanel.svelte.ts"],"names":[],"mappings":"AAgBE,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED,UAAU,KAAK;IAEb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAG3C,WAAW,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAGvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0LH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}