dynim-core 1.0.0

package/dist/builder/widget.js

@@ -0,0 +1,181 @@
+/**
+ * Default DOM widget for vanilla JS users
+ * Renders a complete chat interface - floating or inline
+ */
+export function createWidget(container, state, client, config = {}) {
+    const { mode = 'floating', position = 'bottom-right', startOpen = false, showTimestamps = false, showAvatars = true, theme = 'light', placeholder = 'Type a message...', title = 'Chat' } = config;
+    let isOpen = startOpen;
+    const root = document.createElement('div');
+    root.className = `chatbot chatbot--${theme} chatbot--${position} chatbot--${mode}`;
+    if (mode === 'floating') {
+        root.innerHTML = `
+      <button class="chatbot__launcher" aria-label="Open chat">
+        <svg class="chatbot__launcher-icon chatbot__launcher-icon--chat" viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
+          <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+        </svg>
+        <svg class="chatbot__launcher-icon chatbot__launcher-icon--close" viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
+          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+        </svg>
+      </button>
+      <div class="chatbot__popup">
+        <div class="chatbot__header">
+          <span class="chatbot__title">${title}</span>
+          <button class="chatbot__close" aria-label="Close chat">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="chatbot__messages"></div>
+        <form class="chatbot__form">
+          <input
+            type="text"
+            class="chatbot__input"
+            placeholder="${placeholder}"
+            autocomplete="off"
+          />
+          <button type="submit" class="chatbot__send">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
+          </button>
+        </form>
+        <div class="chatbot__typing" hidden>
+          <span></span><span></span><span></span>
+        </div>
+      </div>
+    `;
+    }
+    else {
+        root.innerHTML = `
+      <div class="chatbot__container">
+        <div class="chatbot__messages"></div>
+        <form class="chatbot__form">
+          <input
+            type="text"
+            class="chatbot__input"
+            placeholder="${placeholder}"
+            autocomplete="off"
+          />
+          <button type="submit" class="chatbot__send">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
+          </button>
+        </form>
+        <div class="chatbot__typing" hidden>
+          <span></span><span></span><span></span>
+        </div>
+      </div>
+    `;
+    }
+    const messagesEl = root.querySelector('.chatbot__messages');
+    const formEl = root.querySelector('.chatbot__form');
+    const inputEl = root.querySelector('.chatbot__input');
+    const typingEl = root.querySelector('.chatbot__typing');
+    const sendBtn = root.querySelector('.chatbot__send');
+    // Handle send - extracted to be callable from both button click and form submit
+    async function handleSend() {
+        const text = inputEl.value.trim();
+        if (!text)
+            return;
+        inputEl.value = '';
+        state.addMessage({ role: 'user', text });
+        typingEl.hidden = false;
+        state.setState({ isLoading: true });
+        const botMessage = state.addMessage({ role: 'assistant', text: '' });
+        try {
+            await client.send(text);
+        }
+        catch (error) {
+            state.updateMessage(botMessage.id, { text: 'Sorry, something went wrong.' });
+            state.setState({ error: error.message });
+        }
+        finally {
+            typingEl.hidden = true;
+            state.setState({ isLoading: false });
+        }
+    }
+    // Handle send on button click (backup in case form submit doesn't fire)
+    if (sendBtn) {
+        sendBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            handleSend();
+        });
+    }
+    if (mode === 'floating') {
+        const launcherEl = root.querySelector('.chatbot__launcher');
+        const closeEl = root.querySelector('.chatbot__close');
+        function toggle() {
+            isOpen = !isOpen;
+            root.classList.toggle('chatbot--open', isOpen);
+            if (isOpen) {
+                inputEl.focus();
+            }
+        }
+        launcherEl.addEventListener('click', toggle);
+        closeEl.addEventListener('click', toggle);
+        if (startOpen) {
+            root.classList.add('chatbot--open');
+        }
+    }
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    function formatTime(timestamp) {
+        return new Date(timestamp).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+    function renderMessages(messages) {
+        messagesEl.innerHTML = messages.map(msg => `
+      <div class="chatbot__message chatbot__message--${msg.role}">
+        ${showAvatars ? `<div class="chatbot__avatar">${msg.role === 'user' ? '👤' : '🤖'}</div>` : ''}
+        <div class="chatbot__bubble">
+          <div class="chatbot__text">${escapeHtml(msg.text)}</div>
+          ${showTimestamps ? `<div class="chatbot__time">${formatTime(msg.timestamp)}</div>` : ''}
+        </div>
+      </div>
+    `).join('');
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+    formEl.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        handleSend();
+    });
+    state.subscribe((newState) => {
+        renderMessages(newState.messages);
+        typingEl.hidden = !newState.isTyping;
+    });
+    const containerEl = mode === 'floating'
+        ? document.body
+        : (typeof container === 'string' ? document.querySelector(container) : container);
+    containerEl?.appendChild(root);
+    renderMessages(state.getState().messages);
+    return {
+        root,
+        open: () => {
+            if (mode === 'floating') {
+                isOpen = true;
+                root.classList.add('chatbot--open');
+            }
+        },
+        close: () => {
+            if (mode === 'floating') {
+                isOpen = false;
+                root.classList.remove('chatbot--open');
+            }
+        },
+        toggle: () => {
+            if (mode === 'floating') {
+                isOpen = !isOpen;
+                root.classList.toggle('chatbot--open', isOpen);
+            }
+        },
+        isOpen: () => isOpen,
+        destroy: () => root.remove()
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * dynim-core - Vanilla TS, framework-agnostic core
+ *
+ * This package provides:
+ * - Chatbot state and streaming client
+ * - Visual builder for drag-and-drop editing
+ * - DOM utilities and element classification
+ */
+export * from './builder';
+export { default } from './builder/builder';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,cAAc,WAAW,CAAC;AAG1B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+/**
+ * dynim-core - Vanilla TS, framework-agnostic core
+ *
+ * This package provides:
+ * - Chatbot state and streaming client
+ * - Visual builder for drag-and-drop editing
+ * - DOM utilities and element classification
+ */
+// Re-export everything from builder
+export * from './builder';
+// Default export
+export { default } from './builder/builder';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "dynim-core",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles": "./src/styles/base.css",
+    "./styles/*": "./src/styles/*"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT"
+}

package/src/styles/base.css

@@ -0,0 +1,378 @@
+/**
+ * Base styles for the chatbot widget
+ */
+
+@import './variables.css';
+@import './editor.css';
+@import './builder.css';
+
+.chatbot {
+  font-family: var(--chat-font);
+  font-size: var(--chat-font-size);
+  line-height: var(--chat-line-height);
+  color: var(--chat-text);
+  box-sizing: border-box;
+}
+
+.chatbot *,
+.chatbot *::before,
+.chatbot *::after {
+  box-sizing: inherit;
+}
+
+/* ===========================================
+   FLOATING MODE
+   =========================================== */
+
+.chatbot--floating {
+  position: fixed;
+  z-index: 9999;
+}
+
+.chatbot--floating.chatbot--bottom-right {
+  bottom: var(--chat-offset);
+  right: var(--chat-offset);
+}
+
+.chatbot--floating.chatbot--bottom-left {
+  bottom: var(--chat-offset);
+  left: var(--chat-offset);
+}
+
+/* Launcher button - Glass theme (true see-through) */
+.chatbot__launcher {
+  width: var(--launcher-size);
+  height: var(--launcher-size);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition:
+    background var(--chat-transition),
+    transform var(--chat-transition),
+    box-shadow var(--chat-transition);
+}
+
+.chatbot__launcher:hover {
+  background: rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+
+.chatbot__launcher:active {
+  transform: scale(0.95);
+}
+
+/* Launcher icon toggle */
+.chatbot__launcher-icon {
+  transition: transform var(--popup-transition), opacity var(--popup-transition);
+}
+
+.chatbot__launcher-icon--chat {
+  position: absolute;
+}
+
+.chatbot__launcher-icon--close {
+  position: absolute;
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.5);
+}
+
+.chatbot--open .chatbot__launcher-icon--chat {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.5);
+}
+
+.chatbot--open .chatbot__launcher-icon--close {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+/* Popup container - Glass effect (true see-through) */
+.chatbot__popup {
+  position: absolute;
+  bottom: calc(var(--launcher-size) + 16px);
+  width: var(--chat-width);
+  height: var(--chat-height);
+  background: rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border-radius: var(--chat-radius);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Animation */
+  opacity: 0;
+  transform: scale(0.9) translateY(10px);
+  transform-origin: bottom right;
+  pointer-events: none;
+  transition:
+    opacity var(--popup-transition),
+    transform var(--popup-transition);
+}
+
+.chatbot--bottom-right .chatbot__popup {
+  right: 0;
+  transform-origin: bottom right;
+}
+
+.chatbot--bottom-left .chatbot__popup {
+  left: 0;
+  transform-origin: bottom left;
+}
+
+.chatbot--open .chatbot__popup {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+/* Header - Glass effect */
+.chatbot__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: var(--header-height);
+  background: transparent;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.chatbot__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.chatbot__close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--chat-transition), color var(--chat-transition);
+}
+
+.chatbot__close:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+/* ===========================================
+   INLINE MODE
+   =========================================== */
+
+.chatbot--inline {
+  width: var(--chat-width);
+  height: var(--chat-height);
+}
+
+/* Main container (inline mode) */
+.chatbot__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--chat-bg);
+  border: 1px solid var(--chat-border);
+  border-radius: var(--chat-radius);
+  box-shadow: var(--chat-shadow);
+  overflow: hidden;
+}
+
+/* ===========================================
+   SHARED STYLES
+   =========================================== */
+
+/* Messages area - Glass theme */
+.chatbot__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--message-gap);
+  background: transparent;
+}
+
+/* Individual message */
+.chatbot__message {
+  display: flex;
+  gap: 8px;
+  max-width: 85%;
+}
+
+.chatbot__message--user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chatbot__message--assistant {
+  align-self: flex-start;
+}
+
+/* Avatar - Glass theme */
+.chatbot__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Message bubble */
+.chatbot__bubble {
+  padding: var(--message-padding);
+  border-radius: var(--message-radius);
+  word-wrap: break-word;
+}
+
+.chatbot__message--user .chatbot__bubble {
+  background: rgba(59, 130, 246, 0.8);
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+}
+
+.chatbot__message--assistant .chatbot__bubble {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e2e8f0;
+  border-bottom-left-radius: 4px;
+}
+
+/* Timestamp */
+.chatbot__time {
+  font-size: 11px;
+  color: var(--chat-text-muted);
+  margin-top: 4px;
+  opacity: 0.7;
+}
+
+.chatbot__message--user .chatbot__time {
+  color: var(--message-user-text);
+}
+
+/* Input form - Glass theme */
+.chatbot__form {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: transparent;
+}
+
+.chatbot__input {
+  flex: 1;
+  height: var(--input-height);
+  padding: 0 20px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: var(--input-radius);
+  background: rgba(255, 255, 255, 0.08);
+  font-family: inherit;
+  font-size: inherit;
+  color: #ffffff;
+  outline: none;
+  transition: border-color var(--chat-transition), background var(--chat-transition);
+}
+
+.chatbot__input:focus {
+  border-color: rgba(59, 130, 246, 0.6);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.chatbot__input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Send button - Glass theme */
+.chatbot__send {
+  width: var(--input-height);
+  height: var(--input-height);
+  border: none;
+  border-radius: 50%;
+  background: rgba(59, 130, 246, 0.8);
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--chat-transition), transform var(--chat-transition);
+}
+
+.chatbot__send:hover {
+  background: rgba(59, 130, 246, 1);
+}
+
+.chatbot__send:active {
+  transform: scale(0.95);
+}
+
+/* Typing indicator - Glass theme */
+.chatbot__typing {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  align-items: center;
+}
+
+.chatbot__typing[hidden] {
+  display: none;
+}
+
+.chatbot__typing span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  animation: typing 1.4s infinite ease-in-out both;
+}
+
+.chatbot__typing span:nth-child(1) { animation-delay: -0.32s; }
+.chatbot__typing span:nth-child(2) { animation-delay: -0.16s; }
+.chatbot__typing span:nth-child(3) { animation-delay: 0s; }
+
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Scrollbar styling - Glass theme */
+.chatbot__messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chatbot__messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chatbot__messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.chatbot__messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}