@widgetic/chat 0.1.4

package/dist/components/SuggestionButtons.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { chatLog } from '../utils/logger.js';
+  import type { ChatContext } from '../types/context.js';
+  
+  // Props
+  interface Props {
+    context: ChatContext;
+    visible?: boolean;
+    onHide?: () => void;
+  }
+  
+  let { context, visible = true, onHide }: Props = $props();
+  
+  const dispatch = createEventDispatcher();
+  
+  // Get context-specific suggestions
+  function getContextSuggestions(): string[] {
+    switch (context.type) {
+      case 'frame':
+        return [
+          'Generate code from this design',
+          'Suggest improvements for this layout',
+          'Add interactive functionality',
+          'Make this responsive for mobile',
+          'Add animations and transitions'
+        ];
+      case 'text':
+        return [
+          'Help improve this writing',
+          'Check grammar and style',
+          'Suggest alternative phrasing',
+          'Summarize this content',
+          'Expand on this topic'
+        ];
+      case 'image':
+        return [
+          'Describe what you see in this image',
+          'Generate alt text for accessibility',
+          'Suggest design improvements',
+          'Convert image to code',
+          'Extract text from this image'
+        ];
+      case 'document':
+        return [
+          'Summarize this document',
+          'Extract key points',
+          'Check for errors or inconsistencies',
+          'Suggest improvements',
+          'Create an outline'
+        ];
+      default:
+        return [
+          'Ask a question about this content',
+          'Get suggestions for improvement',
+          'Explain what you see here',
+          'Help me understand this better',
+          'What can I do with this?'
+        ];
+    }
+  }
+  
+  function handleSuggestionClick(suggestion: string) {
+    chatLog('Suggestion clicked:', suggestion);
+    dispatch('suggestionSelected', { suggestion });
+  }
+  
+  // Get suggestions for current context
+  let suggestions = $derived(getContextSuggestions());
+</script>
+
+{#if visible && suggestions.length > 0}
+  <div class="suggestion-container">
+    <div class="suggestion-header">
+      <h4 class="suggestion-title">
+        {#if context.type === 'frame'}
+          Suggested actions for this widget
+        {:else if context.type === 'text'}
+          Suggested text improvements
+        {:else if context.type === 'image'}
+          Suggested image analysis
+        {:else if context.type === 'document'}
+          Suggested document actions
+        {:else}
+          Suggested questions
+        {/if}
+      </h4>
+      {#if onHide}
+        <button 
+          class="hide-suggestions-btn"
+          onclick={onHide}
+        >
+          Hide suggestions
+        </button>
+      {/if}
+    </div>
+    
+    <div class="suggestion-grid">
+      {#each suggestions as suggestion, index (suggestion)}
+        <button
+          class="suggestion-button"
+          onclick={() => handleSuggestionClick(suggestion)}
+          title={suggestion}
+        >
+          <span class="suggestion-text">{suggestion}</span>
+          <svg class="suggestion-arrow" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      {/each}
+    </div>
+    
+  </div>
+{/if}
+
+<style>
+  .suggestion-container {
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 0.75rem;
+    border: 1px solid #e2e8f0;
+    margin: 1rem;
+  }
+  
+  .suggestion-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .suggestion-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: center;
+  }
+
+  .hide-suggestions-btn {
+    font-size: 0.75rem;
+    color: #64748b;
+    background: none;
+    border: 1px solid #e2e8f0;
+    border-radius: 9999px;
+    padding: 0.25rem 0.75rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .hide-suggestions-btn:hover {
+    color: #374151;
+    border-color: #cbd5e1;
+    background: #f8fafc;
+  }
+  
+  .suggestion-grid {
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: 1fr;
+  }
+  
+  .suggestion-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1rem;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    color: #374151;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  
+  .suggestion-button:hover {
+    background: #f8fafc;
+    border-color: #3b82f6;
+    color: #1d4ed8;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+  
+  .suggestion-button:active {
+    transform: translateY(0);
+  }
+  
+  .suggestion-text {
+    flex: 1;
+    line-height: 1.4;
+  }
+  
+  .suggestion-arrow {
+    width: 1rem;
+    height: 1rem;
+    margin-left: 0.75rem;
+    opacity: 0.5;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+  
+  .suggestion-button:hover .suggestion-arrow {
+    opacity: 1;
+    transform: translateX(2px);
+  }
+  
+  
+  /* Responsive adjustments */
+  @media (min-width: 400px) {
+    .suggestion-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  /* Animation for initial appearance */
+  .suggestion-container {
+    animation: fadeInUp 0.3s ease-out;
+  }
+  
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  /* Focus styles for accessibility */
+  .suggestion-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
+  }
+</style> 

package/dist/components/SuggestionButtons.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ChatContext } from '../types/context.js';
+interface Props {
+    context: ChatContext;
+    visible?: boolean;
+    onHide?: () => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SuggestionButtons: $$__sveltets_2_IsomorphicComponent<Props, {
+    suggestionSelected: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SuggestionButtons = InstanceType<typeof SuggestionButtons>;
+export default SuggestionButtons;

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Chat } from './Chat.svelte';
+export { default as ContextPreview } from './ContextPreview.svelte';
+export { default as ChatHeader } from './ChatHeader.svelte';
+export { default as ChatMessages } from './ChatMessages.svelte';
+export { default as ChatInput } from './ChatInput.svelte';
+export { default as ActionBar } from './ActionBar.svelte';
+export { default as SuggestionButtons } from './SuggestionButtons.svelte';
+export { default as AttachmentDisplay } from './AttachmentDisplay.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as StatusIndicator } from './StatusIndicator.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';
+export type { ComponentProps } from 'svelte';

package/dist/components/index.js

@@ -0,0 +1,12 @@
+// Main Chat Components
+export { default as Chat } from './Chat.svelte';
+export { default as ContextPreview } from './ContextPreview.svelte';
+export { default as ChatHeader } from './ChatHeader.svelte';
+export { default as ChatMessages } from './ChatMessages.svelte';
+export { default as ChatInput } from './ChatInput.svelte';
+export { default as ActionBar } from './ActionBar.svelte';
+export { default as SuggestionButtons } from './SuggestionButtons.svelte';
+export { default as AttachmentDisplay } from './AttachmentDisplay.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as StatusIndicator } from './StatusIndicator.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';

package/dist/config.d.ts

@@ -0,0 +1,43 @@
+/**
+ * SDK Configuration Management
+ *
+ * Centralizes all SDK configuration including:
+ * - Environment variables
+ * - API configuration
+ * - SDK settings
+ * - Configuration validation
+ * - Helper functions
+ */
+import { Configuration } from '@widgetic/api-sdk';
+interface Config {
+    NODE_ENV: string;
+    API_URL: string;
+    API_VERSION: string;
+    INTERNAL_KEY?: string;
+    API_KEY?: string;
+    CLIENT_URL: string;
+    PRODUCTION_URL: string;
+}
+export declare const config: Config;
+/**
+ * Creates SDK configuration for API clients
+ * Used by core and modules
+ * Priority: passed apiKey > env API_KEY > env INTERNAL_KEY
+ */
+export declare function createSdkConfig(options?: {
+    apiKey?: string;
+    basePath?: string;
+}): Configuration;
+/**
+ * Gets the full API URL for the current environment
+ */
+export declare function getApiUrl(): string;
+/**
+ * Environment-specific settings
+ */
+export declare const environment: {
+    readonly isProduction: boolean;
+    readonly apiUrl: string;
+    readonly apiKey: string | undefined;
+};
+export {};

package/dist/config.js

@@ -0,0 +1,67 @@
+/**
+ * SDK Configuration Management
+ *
+ * Centralizes all SDK configuration including:
+ * - Environment variables
+ * - API configuration
+ * - SDK settings
+ * - Configuration validation
+ * - Helper functions
+ */
+import { env } from "$env/dynamic/public";
+import { Configuration } from '@widgetic/api-sdk';
+// Validate that at least one key type is present
+if (!env.PUBLIC_INTERNAL_KEY && !env.PUBLIC_API_KEY) {
+    throw new Error('Either PUBLIC_INTERNAL_KEY or PUBLIC_API_KEY must be set');
+}
+if (!env.PUBLIC_API_URL) {
+    throw new Error('PUBLIC_API_URL environment variable is not set');
+}
+if (!env.PUBLIC_API_VERSION) {
+    throw new Error('PUBLIC_API_VERSION environment variable is not set');
+}
+if (!env.PUBLIC_CLIENT_URL) {
+    throw new Error('PUBLIC_CLIENT_URL environment variable is not set');
+}
+if (!env.PUBLIC_PRODUCTION_URL) {
+    throw new Error('PUBLIC_PRODUCTION_URL environment variable is not set');
+}
+// Create and export the config object with proper typing
+export var config = {
+    API_URL: env.PUBLIC_API_URL,
+    API_VERSION: env.PUBLIC_API_VERSION,
+    INTERNAL_KEY: env.PUBLIC_INTERNAL_KEY,
+    API_KEY: env.PUBLIC_API_KEY,
+    CLIENT_URL: env.PUBLIC_CLIENT_URL,
+    PRODUCTION_URL: env.PUBLIC_PRODUCTION_URL,
+    NODE_ENV: env.PUBLIC_NODE_ENV
+};
+/**
+ * Creates SDK configuration for API clients
+ * Used by core and modules
+ * Priority: passed apiKey > env API_KEY > env INTERNAL_KEY
+ */
+export function createSdkConfig(options) {
+    return new Configuration({
+        apiKey: function (name) { return (options === null || options === void 0 ? void 0 : options.apiKey) || config.API_KEY || config.INTERNAL_KEY || ''; },
+        basePath: (options === null || options === void 0 ? void 0 : options.basePath) || getApiUrl()
+    });
+}
+/**
+ * Gets the full API URL for the current environment
+ */
+export function getApiUrl() {
+    var baseUrl = config.NODE_ENV === 'production'
+        ? config.PRODUCTION_URL
+        : config.API_URL;
+    return "".concat(baseUrl).concat(config.API_VERSION);
+}
+/**
+ * Environment-specific settings
+ */
+export var environment = {
+    isProduction: config.NODE_ENV === 'production',
+    apiUrl: getApiUrl(),
+    // Use API_KEY if available, fall back to INTERNAL_KEY
+    apiKey: config.API_KEY || config.INTERNAL_KEY
+};

package/dist/constants/colors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Message background colors for different states
+ * These can be easily modified to change the appearance of messages
+ */
+export declare const MESSAGE_COLORS: {
+    /** Background color for user messages in completed chats */
+    readonly USER_COMPLETED: "#C6FFD3";
+    /** Background color for user messages in active (non-completed) chats */
+    readonly USER_ACTIVE: "#FFF9C6";
+    /** Background color for assistant messages */
+    readonly ASSISTANT: "#F3F4F6";
+    /** Text color for user messages (both completed and active) */
+    readonly USER_TEXT: "#000000";
+    /** Text color for assistant messages */
+    readonly ASSISTANT_TEXT: "#1F2937";
+};
+/**
+ * Type for the message colors
+ */
+export type MessageColors = typeof MESSAGE_COLORS;

package/dist/constants/colors.js

@@ -0,0 +1,16 @@
+/**
+ * Message background colors for different states
+ * These can be easily modified to change the appearance of messages
+ */
+export var MESSAGE_COLORS = {
+    /** Background color for user messages in completed chats */
+    USER_COMPLETED: '#C6FFD3', // Light green
+    /** Background color for user messages in active (non-completed) chats */
+    USER_ACTIVE: '#FFF9C6', // Light yellow
+    /** Background color for assistant messages */
+    ASSISTANT: '#F3F4F6', // Light gray
+    /** Text color for user messages (both completed and active) */
+    USER_TEXT: '#000000', // Black
+    /** Text color for assistant messages */
+    ASSISTANT_TEXT: '#1F2937', // Dark gray
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './components/index.js';
+export * from './stores/index.js';
+export * from './services/index.js';
+export * from './adapters/index.js';
+export * from './utils/index.js';
+export * from './types/index.js';
+export { default as Chat } from './components/Chat.svelte';
+export { default as ContextPreview } from './components/ContextPreview.svelte';
+export { createChatService } from './services/chatService.js';
+export { createWidgeticAdapter } from './adapters/widgeticAdapter.js';
+export { chatStore } from './stores/chatStore.js';

package/dist/index.js

@@ -0,0 +1,20 @@
+// place files you want to import through the `$lib` alias in this folder.
+// Main Chat Components
+export * from './components/index.js';
+// State Management
+export * from './stores/index.js';
+// Services
+export * from './services/index.js';
+// Platform Adapters
+export * from './adapters/index.js';
+// Utilities
+export * from './utils/index.js';
+// Types
+export * from './types/index.js';
+// Re-export main components as named exports for convenience
+export { default as Chat } from './components/Chat.svelte';
+export { default as ContextPreview } from './components/ContextPreview.svelte';
+// Re-export main services
+export { createChatService } from './services/chatService.js';
+export { createWidgeticAdapter } from './adapters/widgeticAdapter.js';
+export { chatStore } from './stores/chatStore.js';

package/dist/services/chatService.d.ts

@@ -0,0 +1,72 @@
+import { Configuration } from '@widgetic/api-sdk';
+import type { ChatService, ChatMessage, ChatConversation } from '../types/index.js';
+import type { AttachmentInput } from '../types/attachment.js';
+export interface TemporaryApiTypes {
+    ConversationsApi: any;
+    MessagesApi: any;
+    Configuration: any;
+}
+/**
+ * Chat service implementation using Widgetic API SDK
+ */
+export declare class WidgeticChatService implements ChatService {
+    private conversationsApi;
+    private messagesApi;
+    constructor(configuration?: Configuration);
+    /**
+     * Get all conversations for a given context (canvas + component)
+     */
+    getConversations(contextId: string): Promise<ChatConversation[]>;
+    /**
+     * Create a new conversation
+     */
+    createConversation(contextId: string, data: {
+        title?: string;
+    }): Promise<ChatConversation>;
+    /**
+     * Update an existing conversation
+     */
+    updateConversation(conversationId: string, updates: Partial<ChatConversation>): Promise<ChatConversation>;
+    /**
+     * Delete a conversation
+     */
+    deleteConversation(conversationId: string): Promise<void>;
+    /**
+     * Get all messages for a conversation
+     */
+    getMessages(conversationId: string): Promise<ChatMessage[]>;
+    /**
+     * Send a new message
+     */
+    sendMessage(conversationId: string, data: {
+        messageContent: string;
+        attachments?: Array<File | AttachmentInput | Record<string, unknown>>;
+    }): Promise<ChatMessage>;
+    /**
+     * Update a message
+     */
+    updateMessage(messageId: string, updates: Partial<ChatMessage>): Promise<ChatMessage>;
+    /**
+     * Delete a message
+     */
+    deleteMessage(messageId: string): Promise<void>;
+    /**
+     * Read a file as a data URL (persistable in DB until upload service exists).
+     */
+    fileToDataUrl(file: File): Promise<string>;
+    /** @deprecated Use fileToDataUrl — blob URLs are not reload-safe */
+    uploadFile(file: File): Promise<string>;
+    /**
+     * Process AI response (placeholder for LLM integration)
+     */
+    processAIResponse(conversationId: string, message: ChatMessage): Promise<ChatMessage>;
+    /**
+     * Parse context ID to extract canvas and component IDs.
+     * Supports "canvas_id:component_id" format or a single ID (used as both).
+     */
+    private parseContextId;
+}
+/**
+ * Create a chat service instance with the given configuration
+ */
+export declare function createChatService(configuration?: Configuration): ChatService;