@makolabs/ripple 0.4.1-0 → 0.5.0

package/README.md

@@ -144,21 +144,21 @@ Components use standardized enums for colors, sizes, and variants:
 
 ```typescript
 // Colors available for most components
-Color.DEFAULT    // 'default'
-Color.PRIMARY    // 'primary'
-Color.SECONDARY  // 'secondary'
-Color.INFO       // 'info'
-Color.SUCCESS    // 'success'
-Color.WARNING    // 'warning'
-Color.DANGER     // 'danger'
+Color.DEFAULT; // 'default'
+Color.PRIMARY; // 'primary'
+Color.SECONDARY; // 'secondary'
+Color.INFO; // 'info'
+Color.SUCCESS; // 'success'
+Color.WARNING; // 'warning'
+Color.DANGER; // 'danger'
 
 // Sizes available for most components
-Size.XS    // 'xs'
-Size.SM    // 'sm'
-Size.BASE  // 'base'
-Size.LG    // 'lg'
-Size.XL    // 'xl'
-Size.XXL   // '2xl'
+Size.XS; // 'xs'
+Size.SM; // 'sm'
+Size.BASE; // 'base'
+Size.LG; // 'lg'
+Size.XL; // 'xl'
+Size.XXL; // '2xl'
 ```
 
 ### Consistent Props Pattern
@@ -191,21 +191,10 @@ Buttons come with different variants, colors, sizes, and shapes:
 <Button variant="link" color={Color.INFO}>Link Button</Button>
 
 <!-- Button with onclick handler -->
-<Button 
-  color={Color.SUCCESS}
-  onclick={() => console.log('Button clicked')}
->
-  Click Me
-</Button>
+<Button color={Color.SUCCESS} onclick={() => console.log('Button clicked')}>Click Me</Button>
 
 <!-- Button as link -->
-<Button 
-  href="https://example.com" 
-  target="_blank"
-  color={Color.PRIMARY}
->
-  Visit Website
-</Button>
+<Button href="https://example.com" target="_blank" color={Color.PRIMARY}>Visit Website</Button>
 
 <!-- Button sizes -->
 <Button size={Size.XS}>Extra Small</Button>
@@ -233,51 +222,43 @@ Modals with different sizes and custom content:
 	let isOpen = false;
 </script>
 
-<Button onclick={() => isOpen = true}>Open Modal</Button>
+<Button onclick={() => (isOpen = true)}>Open Modal</Button>
 
 <!-- Basic modal -->
-<Modal 
-  open={isOpen} 
-  title="Basic Modal"
-  size={Size.BASE}
-  onClose={() => isOpen = false}
->
-  <p>Modal content goes here</p>
+<Modal open={isOpen} title="Basic Modal" size={Size.BASE} onClose={() => (isOpen = false)}>
+	<p>Modal content goes here</p>
 </Modal>
 
 <!-- Modal with different size -->
-<Modal 
-  open={isOpen} 
-  title="Large Modal"
-  size={Size.XL}
-  onClose={() => isOpen = false}
->
-  <p>This modal is larger and provides more content space</p>
+<Modal open={isOpen} title="Large Modal" size={Size.XL} onClose={() => (isOpen = false)}>
+	<p>This modal is larger and provides more content space</p>
 </Modal>
 
 <!-- Modal with custom header and footer -->
-<Modal 
-  open={isOpen} 
-  onClose={() => isOpen = false}
-  size={Size.BASE}
->
-  <svelte:fragment slot="header">
-    <div class="flex items-center">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
-        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <h3 class="text-lg font-medium">Custom Header</h3>
-    </div>
-  </svelte:fragment>
-  
-  <p>Modal with custom header and footer</p>
-  
-  <svelte:fragment slot="footer">
-    <div class="flex justify-end space-x-2">
-      <Button variant="outline" onclick={() => isOpen = false}>Cancel</Button>
-      <Button color={Color.PRIMARY}>Save Changes</Button>
-    </div>
-  </svelte:fragment>
+<Modal open={isOpen} onClose={() => (isOpen = false)} size={Size.BASE}>
+	<svelte:fragment slot="header">
+		<div class="flex items-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="currentColor"
+				viewBox="0 0 16 16"
+			>
+				<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+			<h3 class="text-lg font-medium">Custom Header</h3>
+		</div>
+	</svelte:fragment>
+
+	<p>Modal with custom header and footer</p>
+
+	<svelte:fragment slot="footer">
+		<div class="flex justify-end space-x-2">
+			<Button variant="outline" onclick={() => (isOpen = false)}>Cancel</Button>
+			<Button color={Color.PRIMARY}>Save Changes</Button>
+		</div>
+	</svelte:fragment>
 </Modal>
 
 <!-- TODO: Remove position prop from Modal component in future versions -->
@@ -293,18 +274,14 @@ Drawers can slide in from different edges of the screen:
 	let isDrawerOpen = false;
 </script>
 
-<Button onclick={() => isDrawerOpen = true}>Open Drawer</Button>
+<Button onclick={() => (isDrawerOpen = true)}>Open Drawer</Button>
 
-<Drawer 
-  open={isDrawerOpen} 
-  position="right"
-  onClose={() => isDrawerOpen = false}
->
-  <div class="p-4">
-    <h3 class="text-lg font-medium mb-4">Drawer Title</h3>
-    <p class="mb-4">This is a drawer that slides in from the side of the screen.</p>
-    <Button onclick={() => isDrawerOpen = false}>Close Drawer</Button>
-  </div>
+<Drawer open={isDrawerOpen} position="right" onClose={() => (isDrawerOpen = false)}>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-medium">Drawer Title</h3>
+		<p class="mb-4">This is a drawer that slides in from the side of the screen.</p>
+		<Button onclick={() => (isDrawerOpen = false)}>Close Drawer</Button>
+	</div>
 </Drawer>
 ```
 
@@ -315,22 +292,22 @@ A component for consistent page headers:
 ```svelte
 <script lang="ts">
 	import { PageHeader, Button, Color } from '@makolabs/ripple';
-	
+
 	const breadcrumbs = [
-	  { label: 'Dashboard', href: '#' },
-	  { label: 'Projects', href: '#' },
-	  { label: 'Current Project' }
+		{ label: 'Dashboard', href: '#' },
+		{ label: 'Projects', href: '#' },
+		{ label: 'Current Project' }
 	];
 </script>
 
-<PageHeader 
-  title="Project Dashboard"
-  description="View and manage your project details"
-  breadcrumbs={breadcrumbs}
+<PageHeader
+	title="Project Dashboard"
+	description="View and manage your project details"
+	{breadcrumbs}
 >
-  <svelte:fragment slot="actions">
-    <Button color={Color.PRIMARY}>New Project</Button>
-  </svelte:fragment>
+	<svelte:fragment slot="actions">
+		<Button color={Color.PRIMARY}>New Project</Button>
+	</svelte:fragment>
 </PageHeader>
 ```
 
@@ -347,7 +324,7 @@ Cards can be customized with different styles:
   <p>Card content goes here</p>
 </Card>
 
-<StatsCard 
+<StatsCard
   label="Monthly Sales"
   value="$865,000"
   previousValue="$750,000"
@@ -370,33 +347,33 @@ Tables for displaying structured data with pagination and sorting:
 ```svelte
 <script lang="ts">
 	import { Table, Color, Size } from '@makolabs/ripple';
-	
+
 	let data = [
-	  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
-	  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
-	  { id: 3, name: 'Robert Johnson', email: 'robert@example.com', status: 'Active' }
+		{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+		{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+		{ id: 3, name: 'Robert Johnson', email: 'robert@example.com', status: 'Active' }
 	];
-	
+
 	const columns = [
-	  { key: 'name', label: 'Name', sortable: true },
-	  { key: 'email', label: 'Email', sortable: true },
-	  { key: 'status', label: 'Status' }
+		{ key: 'name', label: 'Name', sortable: true },
+		{ key: 'email', label: 'Email', sortable: true },
+		{ key: 'status', label: 'Status' }
 	];
-	
+
 	let selected = [];
 	let sort = { column: 'name', direction: 'asc' };
 </script>
 
-<Table 
-  data={data} 
-  {columns}
-  color={Color.PRIMARY}
-  size={Size.BASE}
-  pageSize={10}
-  selectable={true}
-  bind:selected={selected}
-  bind:sort={sort}
-  striped={true}
+<Table
+	{data}
+	{columns}
+	color={Color.PRIMARY}
+	size={Size.BASE}
+	pageSize={10}
+	selectable={true}
+	bind:selected
+	bind:sort
+	striped={true}
 />
 ```
 
@@ -407,38 +384,38 @@ Tabs for organizing content into different views:
 ```svelte
 <script lang="ts">
 	import { TabGroup, TabContent, Color, Size } from '@makolabs/ripple';
-	
+
 	const tabs = [
-	  { value: 'overview', label: 'Overview' },
-	  { value: 'details', label: 'Details' },
-	  { value: 'settings', label: 'Settings' }
+		{ value: 'overview', label: 'Overview' },
+		{ value: 'details', label: 'Details' },
+		{ value: 'settings', label: 'Settings' }
 	];
-	
+
 	let activeTab = 'overview';
-	
+
 	function handleTabChange(value) {
-	  console.log(`Tab changed to ${value}`);
+		console.log(`Tab changed to ${value}`);
 	}
 </script>
 
-<TabGroup 
-  tabs={tabs} 
-  bind:selected={activeTab}
-  onchange={handleTabChange}
-  color={Color.PRIMARY}
-  size={Size.BASE}
+<TabGroup
+	{tabs}
+	bind:selected={activeTab}
+	onchange={handleTabChange}
+	color={Color.PRIMARY}
+	size={Size.BASE}
 >
-  <TabContent value="overview" persisted>
-    <p>Overview content here</p>
-  </TabContent>
-  
-  <TabContent value="details" persisted>
-    <p>Details content here</p>
-  </TabContent>
-  
-  <TabContent value="settings" persisted>
-    <p>Settings content here</p>
-  </TabContent>
+	<TabContent value="overview" persisted>
+		<p>Overview content here</p>
+	</TabContent>
+
+	<TabContent value="details" persisted>
+		<p>Details content here</p>
+	</TabContent>
+
+	<TabContent value="settings" persisted>
+		<p>Settings content here</p>
+	</TabContent>
 </TabGroup>
 ```
 
@@ -464,28 +441,22 @@ Dropdown selector for choosing from a list of options:
 ```svelte
 <script lang="ts">
 	import { Select, Size } from '@makolabs/ripple';
-	
+
 	const items = [
-	  { label: 'Option 1', value: 'option1' },
-	  { label: 'Option 2', value: 'option2' },
-	  { label: 'Option 3', value: 'option3', disabled: true },
-	  { label: 'Option 4', value: 'option4' }
+		{ label: 'Option 1', value: 'option1' },
+		{ label: 'Option 2', value: 'option2' },
+		{ label: 'Option 3', value: 'option3', disabled: true },
+		{ label: 'Option 4', value: 'option4' }
 	];
-	
+
 	let selected = 'option1';
-	
+
 	function handleSelect(event) {
-	  console.log('Selected:', event.value);
+		console.log('Selected:', event.value);
 	}
 </script>
 
-<Select 
-  {items} 
-  bind:value={selected} 
-  class="w-64"
-  size={Size.BASE}
-  onselect={handleSelect}
-/>
+<Select {items} bind:value={selected} class="w-64" size={Size.BASE} onselect={handleSelect} />
 ```
 
 ### Dropdown Component
@@ -496,40 +467,35 @@ Menu dropdown for actions and navigation:
 <script lang="ts">
 	import { Dropdown, Size } from '@makolabs/ripple';
 	import FluentChevronDown16Filled from '$icons/FluentChevronDown16Filled.svelte';
-	
+
 	const sections = [
-	  {
-	    items: [
-	      { 
-	        label: 'Edit', 
-	        icon: FluentPen16Filled,
-	        onclick: () => console.log('Edit clicked') 
-	      },
-	      { 
-	        label: 'Duplicate', 
-	        icon: FluentPenSparkle24Filled,
-	        onclick: () => console.log('Duplicate clicked') 
-	      }
-	    ]
-	  },
-	  {
-	    items: [
-	      { 
-	        label: 'Delete', 
-	        icon: FluentDelete24Filled,
-	        onclick: () => console.log('Delete clicked') 
-	      }
-	    ]
-	  }
+		{
+			items: [
+				{
+					label: 'Edit',
+					icon: FluentPen16Filled,
+					onclick: () => console.log('Edit clicked')
+				},
+				{
+					label: 'Duplicate',
+					icon: FluentPenSparkle24Filled,
+					onclick: () => console.log('Duplicate clicked')
+				}
+			]
+		},
+		{
+			items: [
+				{
+					label: 'Delete',
+					icon: FluentDelete24Filled,
+					onclick: () => console.log('Delete clicked')
+				}
+			]
+		}
 	];
 </script>
 
-<Dropdown 
-  sections={sections} 
-  label="Actions"
-  size={Size.BASE}
-  icon={FluentChevronDown16Filled}
-/>
+<Dropdown {sections} label="Actions" size={Size.BASE} icon={FluentChevronDown16Filled} />
 ```
 
 ## Component Composition
@@ -538,39 +504,32 @@ Ripple UI components are designed to work together seamlessly:
 
 ```svelte
 <script lang="ts">
-  import { Card, TabGroup, TabContent, Button, Color, Size } from '@makolabs/ripple';
-  
-  const tabs = [
-    { value: 'overview', label: 'Overview' },
-    { value: 'details', label: 'Details' },
-    { value: 'settings', label: 'Settings' }
-  ];
-  
-  let activeTab = 'overview';
+	import { Card, TabGroup, TabContent, Button, Color, Size } from '@makolabs/ripple';
+
+	const tabs = [
+		{ value: 'overview', label: 'Overview' },
+		{ value: 'details', label: 'Details' },
+		{ value: 'settings', label: 'Settings' }
+	];
+
+	let activeTab = 'overview';
 </script>
 
 <Card title="Project Information" color={Color.PRIMARY}>
-  <TabGroup 
-    tabs={tabs} 
-    bind:selected={activeTab}
-    color={Color.INFO}
-    size={Size.BASE}
-  >
-    <TabContent value="overview">
-      <p>Project overview content here...</p>
-      <Button variant="solid" color={Color.SUCCESS} size={Size.SM}>
-        Take Action
-      </Button>
-    </TabContent>
-    
-    <TabContent value="details">
-      <p>Project details content here...</p>
-    </TabContent>
-    
-    <TabContent value="settings">
-      <p>Project settings content here...</p>
-    </TabContent>
-  </TabGroup>
+	<TabGroup {tabs} bind:selected={activeTab} color={Color.INFO} size={Size.BASE}>
+		<TabContent value="overview">
+			<p>Project overview content here...</p>
+			<Button variant="solid" color={Color.SUCCESS} size={Size.SM}>Take Action</Button>
+		</TabContent>
+
+		<TabContent value="details">
+			<p>Project details content here...</p>
+		</TabContent>
+
+		<TabContent value="settings">
+			<p>Project settings content here...</p>
+		</TabContent>
+	</TabGroup>
 </Card>
 ```
 
@@ -589,7 +548,7 @@ You can still import specific component types when needed:
 ```svelte
 <script lang="ts">
 	import { Button, type ButtonProps } from '@makolabs/ripple';
-	
+
 	// Create a custom button with specific props
 	const myButton: ButtonProps = {
 		variant: 'outline',
@@ -600,3 +559,4 @@ You can still import specific component types when needed:
 </script>
 
 <Button {...myButton}>Custom Button</Button>
+```

package/dist/adapters/ai/OpenAIAdapter.d.ts

@@ -0,0 +1,115 @@
+import type { ChatResponse, ChatMessage, StreamingCallback } from '../../index.js';
+import type { AIAdapter, AIContext } from './types.js';
+/**
+ * Configuration for OpenAI adapter
+ */
+export interface OpenAIAdapterConfig {
+    /**
+     * OpenAI API key
+     */
+    apiKey: string;
+    /**
+     * Model to use (defaults to gpt-4-turbo-preview)
+     */
+    model?: string;
+    /**
+     * Base URL for API calls (defaults to OpenAI's API)
+     */
+    baseUrl?: string;
+    /**
+     * System prompt for the AI
+     */
+    systemPrompt?: string;
+    /**
+     * Temperature for responses (0-2, defaults to 0.7)
+     */
+    temperature?: number;
+    /**
+     * Maximum tokens in response (defaults to 4000)
+     */
+    maxTokens?: number;
+    /**
+     * Whether to maintain conversation history (defaults to true)
+     */
+    maintainHistory?: boolean;
+    /**
+     * Maximum number of messages to keep in history (defaults to 20)
+     */
+    maxHistoryLength?: number;
+}
+/**
+ * OpenAI adapter with simple sliding window memory
+ * Handles communication with OpenAI's GPT models with AI-generated summaries
+ */
+export declare class OpenAIAdapter implements AIAdapter {
+    private config;
+    private messages;
+    private summary;
+    private userProfile;
+    private maxMessages;
+    constructor(config: OpenAIAdapterConfig);
+    getName(): string;
+    isConfigured(): boolean;
+    private getDefaultSystemPrompt;
+    private getCodeRules;
+    private getMermaidRules;
+    private buildConditionalSystemPrompt;
+    sendMessage(message: string, context?: AIContext): Promise<ChatResponse>;
+    sendMessageStream(message: string, onStream: StreamingCallback, context?: AIContext): Promise<ChatResponse>;
+    getHistory(): ChatMessage[];
+    clearHistory(): void;
+    setSystemPrompt(prompt: string): void;
+    getSystemPrompt(): string;
+    /**
+     * Update configuration
+     */
+    updateConfig(newConfig: Partial<OpenAIAdapterConfig>): void;
+    /**
+     * Get current configuration (without API key for security)
+     */
+    getConfig(): Omit<OpenAIAdapterConfig, 'apiKey'>;
+    /**
+     * Add message to memory with sliding window + AI summary logic
+     */
+    private addToMemory;
+    /**
+     * Create AI summary and truncate old messages
+     */
+    private createSummaryAndTruncate;
+    /**
+     * Generate summary using OpenAI
+     */
+    private generateSummaryWithAI;
+    /**
+     * Build memory context from summary + recent messages
+     */
+    private buildMemoryContext;
+    /**
+     * Extract user information
+     */
+    private extractUserInfo;
+    /**
+     * Save to localStorage
+     */
+    private saveToStorage;
+    /**
+     * Load from localStorage
+     */
+    private loadFromStorage;
+    private generateId;
+    /**
+     * Build enhanced system prompt with memory context
+     */
+    private buildEnhancedSystemPrompt;
+    /**
+     * Get memory statistics
+     */
+    getMemoryStats(): {
+        totalMessages: number;
+        hasSummary: boolean;
+    };
+    /**
+     * Get the context that will be sent to AI
+     */
+    getContextForAI(): string;
+}