npm - @echo-sdk/view - Versions diffs - 0.1.0 - Mend

@echo-sdk/view 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +15 -0
package/dist/dist/index.es.d.ts +21 -0
package/dist/dist/index.umd.d.ts +0 -0
package/dist/index.d.ts +2 -0
package/dist/index.es.js +1755 -0
package/dist/index.umd.js +1 -0
package/dist/src/components/ChatPopup.d.ts +3 -0
package/dist/src/components/ChatWindow.d.ts +8 -0
package/dist/src/components/Header.d.ts +12 -0
package/dist/src/components/HomeView.d.ts +8 -0
package/dist/src/components/Icons.d.ts +11 -0
package/dist/src/components/InputArea.d.ts +7 -0
package/dist/src/components/Launcher.d.ts +7 -0
package/dist/src/components/MessageList.d.ts +10 -0
package/dist/src/components/Sidebar.d.ts +11 -0
package/dist/src/components/ThoughtChain.d.ts +8 -0
package/dist/src/context/ChatContext.d.ts +32 -0
package/dist/src/index.d.ts +7 -0
package/dist/src/services/ConfigService.d.ts +23 -0
package/dist/src/services/ConversationService.d.ts +35 -0
package/dist/src/types.d.ts +10 -0
package/dist/styles.css +1 -0
package/dist/vite.config.d.ts +2 -0
package/dist/vite.svg +15 -0
package/package.json +40 -0

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/src/components/ChatPopup.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { h } from 'preact';
+import { ChatPopupConfig } from '../types';
+export declare const ChatPopup: (config: ChatPopupConfig) => h.JSX.Element;

package/dist/src/components/ChatWindow.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { h } from 'preact';
+interface ChatWindowProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+}
+export declare const ChatWindow: ({ isOpen, onClose, title }: ChatWindowProps) => h.JSX.Element;
+export {};

package/dist/src/components/Header.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { h } from 'preact';
+interface HeaderProps {
+    title?: string;
+    greeting?: string;
+    connectionStatus?: string;
+    onToggleSidebar: () => void;
+    onCloseChat: () => void;
+    showBackButton?: boolean;
+    onBack?: () => void;
+}
+export declare const Header: ({ title, greeting, connectionStatus, onToggleSidebar, onCloseChat, showBackButton, onBack }: HeaderProps) => h.JSX.Element;
+export {};

package/dist/src/components/HomeView.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { h } from 'preact';
+import { RemoteConfig } from '../services/ConfigService';
+interface HomeViewProps {
+    config: RemoteConfig | null;
+    onQuerySelect: (query: string) => void;
+}
+export declare const HomeView: ({ config, onQuerySelect }: HomeViewProps) => h.JSX.Element;
+export {};

package/dist/src/components/Icons.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+export declare const IconMenu: () => h.JSX.Element;
+export declare const IconClose: ({ size }: {
+    size?: number;
+}) => h.JSX.Element;
+export declare const IconPlus: () => h.JSX.Element;
+export declare const IconSend: () => h.JSX.Element;
+export declare const IconMessageSquare: () => h.JSX.Element;
+export declare const IconAttachment: () => h.JSX.Element;
+export declare const IconSmile: () => h.JSX.Element;
+export declare const IconArrowLeft: () => h.JSX.Element;

package/dist/src/components/InputArea.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { h } from 'preact';
+interface InputAreaProps {
+    onSendMessage: (text: string) => void;
+    isLoading?: boolean;
+}
+export declare const InputArea: ({ onSendMessage, isLoading }: InputAreaProps) => h.JSX.Element;
+export {};

package/dist/src/components/Launcher.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { h } from 'preact';
+interface LauncherProps {
+    isOpen: boolean;
+    onClick: () => void;
+}
+export declare const Launcher: ({ isOpen, onClick }: LauncherProps) => h.JSX.Element;
+export {};

package/dist/src/components/MessageList.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import { Message, AgentStreamEvent } from '@echo-sdk/core';
+interface MessageListProps {
+    messages: Message[];
+    isStreaming: boolean;
+    activeRunId?: string;
+    streamedThoughts: Record<string, AgentStreamEvent[]>;
+}
+export declare const MessageList: ({ messages, isStreaming, activeRunId, streamedThoughts }: MessageListProps) => h.JSX.Element;
+export {};

package/dist/src/components/Sidebar.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+import { Conversation } from '../services/ConversationService';
+interface SidebarProps {
+    conversations: Conversation[];
+    activeConversationId?: string;
+    onSelectConversation: (id: string) => void;
+    onNewChat: () => void;
+    isOpen: boolean;
+}
+export declare const Sidebar: ({ conversations, activeConversationId, onSelectConversation, onNewChat, isOpen }: SidebarProps) => h.JSX.Element;
+export {};

package/dist/src/components/ThoughtChain.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { h } from 'preact';
+import { AgentStreamEvent } from '@echo-sdk/core';
+interface ThoughtChainProps {
+    events: AgentStreamEvent[];
+    isExpanded?: boolean;
+}
+export declare const ThoughtChain: ({ events, isExpanded: defaultExpanded }: ThoughtChainProps) => h.JSX.Element;
+export {};

package/dist/src/context/ChatContext.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { h, ComponentChildren } from 'preact';
+import { Message, AgentStreamEvent } from '@echo-sdk/core';
+import { RemoteConfig } from '../services/ConfigService';
+import { Conversation } from '../services/ConversationService';
+import { ChatPopupConfig } from '../types';
+interface ChatContextType {
+    isConnected: boolean;
+    connectionState: string;
+    isInitialized: boolean;
+    isLoading: boolean;
+    error: string | null;
+    config: RemoteConfig | null;
+    messages: Message[];
+    conversations: Conversation[];
+    activeConversationId: string | null;
+    isStreaming: boolean;
+    activeRunId: string | null;
+    streamedThoughts: Record<string, AgentStreamEvent[]>;
+    sendMessage: (text: string) => Promise<void>;
+    joinRoom: (roomId: string) => Promise<void>;
+    leaveRoom: (roomId: string) => Promise<void>;
+    loadConversation: (conversationId: string) => Promise<void>;
+    createNewChat: () => void;
+    startNewConversation: (prompt: string) => Promise<void>;
+}
+export interface ChatProviderProps {
+    children: ComponentChildren;
+    sdkConfig: ChatPopupConfig;
+}
+export declare const ChatProvider: ({ children, sdkConfig }: ChatProviderProps) => h.JSX.Element;
+export declare const useChat: () => ChatContextType;
+export {};

package/dist/src/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ChatPopup } from './components/ChatPopup';
+import { ChatPopupConfig } from './types';
+export { ChatPopup };
+export type { ChatPopupConfig };
+export declare function mountChatPopup(target: HTMLElement, config: ChatPopupConfig): {
+    destroy: () => void;
+};

package/dist/src/services/ConfigService.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export interface RemoteConfig {
+    webhook_url: string | null;
+    brand_name: string;
+    primary_color: string;
+    avatar_url: string;
+    greeting_message: string;
+    tone: string;
+    settings: any | null;
+    environment: 'dev' | 'production';
+    finger_print: string;
+    display_name?: string;
+    example_queries?: string[];
+}
+export interface ConfigServiceResponse {
+    success: boolean;
+    data: RemoteConfig;
+}
+export declare class ConfigService {
+    private client;
+    private baseUrl;
+    constructor(baseUrl?: string);
+    fetchConfig(companyUrl: string, apiKey: string, externalId?: string): Promise<RemoteConfig>;
+}

package/dist/src/services/ConversationService.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+export interface Conversation {
+    id: string;
+    summary: string;
+    created_at: string;
+    updated_at?: string;
+    app_id?: string;
+    end_user_id?: string;
+    device_hash?: string;
+}
+export interface CreateConversationResponse {
+    success: boolean;
+    data: Conversation;
+}
+export interface GetConversationsResponse {
+    success: boolean;
+    data: Conversation[];
+}
+export interface ConversationMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    created_at: string;
+}
+export interface GetMessagesResponse {
+    success: boolean;
+    data: ConversationMessage[];
+}
+export declare class ConversationService {
+    private httpClient;
+    private baseUrl;
+    constructor(baseUrl?: string);
+    getConversations(companyUrl: string, apiKey: string, externalId?: string): Promise<Conversation[]>;
+    createConversation(companyUrl: string, apiKey: string, prompt: string, externalId?: string, deviceHash?: string): Promise<Conversation>;
+    getMessages(companyUrl: string, apiKey: string, conversationId: string, externalId?: string): Promise<ConversationMessage[]>;
+}

package/dist/src/types.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export interface ChatPopupConfig {
+    apiKey: string;
+    companyUrl: string;
+    externalId?: string;
+    authToken?: string;
+    bgColor?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    width?: string;
+    height?: string;
+}

package/dist/styles.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--echo-primary: #a855f7;--echo-primary-gradient: linear-gradient(135deg, #d946ef 0%, #8b5cf6 100%);--echo-secondary: #f3f4f6;--echo-secondary-foreground: #1f2937;--echo-background: #ffffff;--echo-foreground: #000000;--echo-radius: 24px;--echo-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--echo-z-index: 9999;--echo-shadow: 0 10px 40px rgba(0, 0, 0, .1)}.echo-chat-container{position:fixed;bottom:24px;right:24px;z-index:var(--echo-z-index);font-family:var(--echo-font-family);display:flex;flex-direction:column;align-items:flex-end;gap:16px;pointer-events:none}.echo-chat-container.bottom-left{right:auto;left:24px;align-items:flex-start}.echo-chat-container *{box-sizing:border-box;pointer-events:auto}.echo-launcher{width:64px;height:64px;border-radius:50%;background:var(--echo-primary-gradient);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 20px #8b5cf666;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.16,1,.3,1)}.echo-launcher:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 8px 25px #8b5cf680}.echo-launcher:active{transform:scale(.95)}.echo-launcher svg{width:32px;height:32px}.echo-chat-window{width:440px;height:650px;max-height:calc(100vh - 120px);background:var(--echo-background);border-radius:var(--echo-radius);box-shadow:var(--echo-shadow);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.95);transform-origin:bottom right;transition:all .4s cubic-bezier(.16,1,.3,1);pointer-events:none;visibility:hidden;border:1px solid rgba(0,0,0,.05);position:relative}.echo-chat-container.bottom-left .echo-chat-window{transform-origin:bottom left}.echo-chat-window.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;visibility:visible}.echo-header{padding:24px;background:var(--echo-primary-gradient);color:#fff;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.1)}.echo-avatar{width:48px;height:48px;border-radius:50%;background:#fff3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;border:2px solid rgba(255,255,255,.3);position:relative}.echo-header-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.echo-header-title{font-size:16px;font-weight:600;color:#fff;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-header-subtitle{font-size:13px;color:#ffffffe6;margin:2px 0 0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-message-list{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px;background:#fff;background-image:radial-gradient(#f3f4f6 1px,transparent 1px);background-size:20px 20px}.echo-message{max-width:85%;padding:16px 20px;border-radius:20px;font-size:15px;line-height:1.6;position:relative;word-wrap:break-word;box-shadow:0 2px 5px #00000005}.echo-message.user{align-self:flex-end;background:var(--echo-primary-gradient);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 15px #8b5cf633}.echo-message.bot{align-self:flex-start;background:#f3f4f6;color:#1f2937;border-bottom-left-radius:4px}.echo-message-time{font-size:11px;color:#9ca3af;margin-top:4px;text-align:right;line-height:1}.echo-input-area{padding:16px 20px;background:#fff;border-top:1px solid #f3f4f6;display:flex;gap:12px;align-items:center;flex-shrink:0}.echo-input{flex:1;border:none;background:#fff;color:#1f2937;padding:0;font-size:15px;outline:none;min-height:24px;font-family:inherit;min-width:0}.echo-input::placeholder{color:#9ca3af}.echo-send-btn{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:none;background:var(--echo-primary-gradient);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:1;padding:0}.echo-send-btn:hover{transform:scale(1.05)}.echo-send-btn:disabled{background:#e5e7eb;cursor:not-allowed;transform:none;opacity:.7}.echo-send-btn:disabled svg{stroke:#9ca3af}.echo-send-btn svg{width:20px;height:20px;fill:none;stroke-width:2}.echo-sidebar{width:100%;height:100%;background-color:#f8f9fa;border-right:none;display:flex;flex-direction:column}.echo-sidebar-container{position:absolute;top:0;right:0;width:100%;height:100%;background:#fff;z-index:10;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}.echo-sidebar-container.open{transform:translate(0)}.echo-sidebar-header{padding:16px;border-bottom:1px solid #e9ecef}.echo-new-chat-btn{width:180px;padding:10px;background-color:transparent;color:var(--echo-primary);border:1px solid var(--echo-primary);border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s;font-size:14px}.echo-new-chat-btn:hover{background-color:#00000008}.echo-conversation-list{flex:1;overflow-y:auto}.echo-conversation-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f1f3f5;transition:background-color .2s}.echo-conversation-item:hover{background-color:#e9ecef}.echo-conversation-item.active{background-color:#e3f2fd;border-left:3px solid var(--echo-primary)}.echo-conversation-summary{font-size:14px;font-weight:500;color:#343a40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-conversation-date{font-size:11px;color:#868e96;margin-top:4px}.echo-chat-body-container{display:flex;flex:1;height:auto;overflow:hidden;position:relative}.echo-chat-main{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden}.echo-thought-chain{margin:8px 12px;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;overflow:hidden;font-size:13px}.echo-thought-header{display:flex;align-items:center;padding:8px 12px;cursor:pointer;background-color:#f1f3f5;-webkit-user-select:none;user-select:none}.echo-thought-icon{margin-right:8px}.echo-thought-title{flex:1;font-weight:600;color:#495057}.echo-thought-chevron{transition:transform .2s;font-size:10px}.echo-thought-chevron.expanded{transform:rotate(180deg)}.echo-thought-content{padding:8px 12px;border-top:1px solid #dee2e6;max-height:200px;overflow-y:auto}.echo-thought-item{margin-bottom:8px;padding-left:8px;border-left:2px solid #adb5bd}.echo-thought-type{font-size:10px;font-weight:700;color:#868e96;text-transform:uppercase;margin-bottom:2px}.echo-thought-text{color:#343a40;white-space:pre-wrap}.echo-streaming-container{display:flex;flex-direction:column;padding:0 12px}.echo-typing-indicator{display:inline-block;padding:4px 8px;background-color:#e9ecef;border-radius:12px;margin:4px 12px;width:fit-content}.echo-typing-indicator span{display:inline-block;width:4px;height:4px;background-color:#868e96;border-radius:50%;margin:0 2px;animation:echo-bounce 1.4s infinite ease-in-out both}.echo-typing-indicator span:nth-child(1){animation-delay:-.32s}.echo-typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes echo-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.echo-home-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;background-color:#fff}.echo-home-greeting{font-size:24px;font-weight:600;color:var(--echo-primary);margin-bottom:32px;background:var(--echo-primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.echo-query-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px}.echo-query-chip{padding:12px 16px;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;color:#374151;font-size:14px;cursor:pointer;transition:all .2s;text-align:left;box-shadow:0 1px 2px #0000000d}.echo-query-chip:hover{border-color:var(--echo-primary);color:var(--echo-primary);background-color:#f9fafb;transform:translateY(-1px);box-shadow:0 4px 6px #0000000d}

package/dist/vite.config.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: import('vite').UserConfig;
2	+ export default _default;

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
+    <defs>
+        <linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
+            <stop offset="0%" stop-color="#41D1FF"></stop>
+            <stop offset="100%" stop-color="#BD34FE"></stop>
+        </linearGradient>
+        <linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
+            <stop offset="0%" stop-color="#FFEA83"></stop>
+            <stop offset="8.333%" stop-color="#FFDD35"></stop>
+            <stop offset="100%" stop-color="#FFA800"></stop>
+        </linearGradient>
+    </defs>
+    <path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
+    <path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
+</svg>

package/package.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+	"name": "@echo-sdk/view",
+	"version": "0.1.0",
+	"type": "module",
+	"main": "./dist/index.umd.js",
+	"module": "./dist/index.es.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.es.js",
+			"require": "./dist/index.umd.js"
+		},
+		"./styles.css": "./dist/styles.css"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"watch": "vite build --watch",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@echo-sdk/core": "*"
+	},
+	"devDependencies": {
+		"preact": "^10.26.9",
+		"@preact/preset-vite": "^2.10.2",
+		"vite-plugin-dts": "^4.5.0",
+		"eslint": "^8.57.1",
+		"eslint-config-preact": "^2.0.0",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.4"
+	},
+	"eslintConfig": {
+		"extends": "preact"
+	}
+}