@arjun-shah/agentbar-cli 0.1.0 → 0.1.7

package/README.md

@@ -4,6 +4,12 @@ CLI helper to generate and manage the Agent Plugin Bar embed snippet.
 
 ## Install
 
+```bash
+npm install -g agentbar-cli
+```
+
+If you prefer the scoped package directly:
+
 ```bash
 npm install -g @arjun-shah/agentbar-cli
 ```
@@ -17,3 +23,43 @@ agentbar set siteUrl https://your-site.com
 ```
 
 The CLI writes `agentbar.config.json` in your project directory.
+
+## Customization
+
+You can update appearance and behavior with `agentbar set`:
+
+```bash
+agentbar set themeColor "#0ea5e9"
+agentbar set accentTextColor "#0f172a"
+agentbar set userBubbleBackground "rgba(14,165,233,0.12)"
+agentbar set assistantBubbleBackground "#f8fafc"
+agentbar set fontFamily "Satoshi, ui-sans-serif"
+agentbar set position right
+agentbar set offsetY 24
+agentbar set draggable true
+agentbar set persistPosition true
+agentbar set dragOffset 0
+agentbar set inputPlaceholder "Ask about this page"
+agentbar set sendLabel "Send"
+agentbar set suggestions "Search pricing | Summarize docs | Draft copy"
+agentbar set badgeLabel "AI"
+agentbar set greeting "Welcome back. How can I help?"
+agentbar set persist true
+agentbar set showReset true
+agentbar set showExport true
+agentbar set exportLabel "Copy"
+agentbar set showScrollButton true
+agentbar set scrollLabel "Scroll"
+agentbar set showMinimize true
+agentbar set minimizedOnLoad false
+agentbar set minimizeLabel "Minimize"
+agentbar set expandLabel "Expand"
+agentbar set showTimestamps true
+agentbar set timestampLocale "en-US"
+agentbar set autoScroll true
+agentbar set autoScrollThreshold 24
+agentbar set messageMaxWidth "85%"
+agentbar set launcherTooltip "Open assistant"
+agentbar set openOnLoad false
+agentbar set autoIngest true
+```

package/bin/agentbar.js

@@ -14,8 +14,62 @@ const DEFAULT_CONFIG = {
   themeColor: "#059669",
   position: "right",
   title: "Site Assistant",
-  subtitle: "Ask anything about this site.",
-  buttonLabel: "Ask",
+  subtitle: "Get answers from your site.",
+  buttonLabel: "",
+  fontFamily: "ui-sans-serif, system-ui, -apple-system",
+  panelBackground: "#ffffff",
+  textColor: "#0f172a",
+  mutedTextColor: "#64748b",
+  borderColor: "#e2e8f0",
+  buttonBackground: "#ffffff",
+  buttonTextColor: "#0f172a",
+  accentTextColor: "",
+  buttonShadow: "0 18px 40px -28px rgba(15, 23, 42, 0.35)",
+  panelShadow: "0 30px 60px -45px rgba(15, 23, 42, 0.35)",
+  badgeLabel: "",
+  badgeBackground: "",
+  badgeTextColor: "",
+  userBubbleBackground: "",
+  userBubbleText: "",
+  userBubbleBorder: "",
+  assistantBubbleBackground: "",
+  assistantBubbleText: "",
+  assistantBubbleBorder: "",
+  panelWidth: "320px",
+  panelMaxHeight: "70vh",
+  panelRadius: "16px",
+  buttonRadius: "16px",
+  offsetX: 20,
+  offsetY: 20,
+  inputPlaceholder: "Type a message",
+  sendLabel: "Send",
+  suggestions: ["Search pricing", "Explain a feature", "Draft homepage copy"],
+  greeting: "",
+  draggable: true,
+  dragOffset: 0,
+  persistPosition: false,
+  positionKey: "",
+  openOnLoad: false,
+  autoIngest: true,
+  closeOnOutsideClick: true,
+  showReset: false,
+  persist: false,
+  storageKey: "",
+  showTypingIndicator: true,
+  showExport: false,
+  exportLabel: "Copy",
+  showScrollButton: true,
+  scrollLabel: "Scroll",
+  showMinimize: false,
+  minimizedOnLoad: false,
+  minimizeLabel: "Minimize",
+  expandLabel: "Expand",
+  showTimestamps: false,
+  timestampLocale: "",
+  autoScroll: true,
+  autoScrollThreshold: 24,
+  messageMaxWidth: "85%",
+  launcherTooltip: "",
 };
 
 const configPath = path.join(process.cwd(), CONFIG_FILE);
@@ -63,6 +117,168 @@ const renderSnippet = (config) => {
   if (config.buttonLabel) {
     lines.push(`  data-button-label=\"${config.buttonLabel}\"`);
   }
+  if (config.fontFamily) {
+    lines.push(`  data-font-family=\"${config.fontFamily}\"`);
+  }
+  if (config.panelBackground) {
+    lines.push(`  data-panel-background=\"${config.panelBackground}\"`);
+  }
+  if (config.textColor) {
+    lines.push(`  data-text-color=\"${config.textColor}\"`);
+  }
+  if (config.mutedTextColor) {
+    lines.push(`  data-muted-text-color=\"${config.mutedTextColor}\"`);
+  }
+  if (config.borderColor) {
+    lines.push(`  data-border-color=\"${config.borderColor}\"`);
+  }
+  if (config.buttonBackground) {
+    lines.push(`  data-button-background=\"${config.buttonBackground}\"`);
+  }
+  if (config.buttonTextColor) {
+    lines.push(`  data-button-text-color=\"${config.buttonTextColor}\"`);
+  }
+  if (config.accentTextColor) {
+    lines.push(`  data-accent-text-color=\"${config.accentTextColor}\"`);
+  }
+  if (config.buttonShadow) {
+    lines.push(`  data-button-shadow=\"${config.buttonShadow}\"`);
+  }
+  if (config.panelShadow) {
+    lines.push(`  data-panel-shadow=\"${config.panelShadow}\"`);
+  }
+  if (config.badgeLabel) {
+    lines.push(`  data-badge-label=\"${config.badgeLabel}\"`);
+  }
+  if (config.badgeBackground) {
+    lines.push(`  data-badge-background=\"${config.badgeBackground}\"`);
+  }
+  if (config.badgeTextColor) {
+    lines.push(`  data-badge-text-color=\"${config.badgeTextColor}\"`);
+  }
+  if (config.userBubbleBackground) {
+    lines.push(`  data-user-bubble-background=\"${config.userBubbleBackground}\"`);
+  }
+  if (config.userBubbleText) {
+    lines.push(`  data-user-bubble-text=\"${config.userBubbleText}\"`);
+  }
+  if (config.userBubbleBorder) {
+    lines.push(`  data-user-bubble-border=\"${config.userBubbleBorder}\"`);
+  }
+  if (config.assistantBubbleBackground) {
+    lines.push(`  data-assistant-bubble-background=\"${config.assistantBubbleBackground}\"`);
+  }
+  if (config.assistantBubbleText) {
+    lines.push(`  data-assistant-bubble-text=\"${config.assistantBubbleText}\"`);
+  }
+  if (config.assistantBubbleBorder) {
+    lines.push(`  data-assistant-bubble-border=\"${config.assistantBubbleBorder}\"`);
+  }
+  if (config.panelWidth) {
+    lines.push(`  data-panel-width=\"${config.panelWidth}\"`);
+  }
+  if (config.panelMaxHeight) {
+    lines.push(`  data-panel-max-height=\"${config.panelMaxHeight}\"`);
+  }
+  if (config.panelRadius) {
+    lines.push(`  data-panel-radius=\"${config.panelRadius}\"`);
+  }
+  if (config.buttonRadius) {
+    lines.push(`  data-button-radius=\"${config.buttonRadius}\"`);
+  }
+  if (typeof config.offsetX === "number") {
+    lines.push(`  data-offset-x=\"${config.offsetX}\"`);
+  }
+  if (typeof config.offsetY === "number") {
+    lines.push(`  data-offset-y=\"${config.offsetY}\"`);
+  }
+  if (config.inputPlaceholder) {
+    lines.push(`  data-input-placeholder=\"${config.inputPlaceholder}\"`);
+  }
+  if (config.sendLabel) {
+    lines.push(`  data-send-label=\"${config.sendLabel}\"`);
+  }
+  if (config.suggestions?.length) {
+    lines.push(`  data-suggestions=\"${config.suggestions.join(" | ")}\"`);
+  }
+  if (config.greeting) {
+    lines.push(`  data-greeting=\"${config.greeting}\"`);
+  }
+  if (typeof config.draggable === "boolean") {
+    lines.push(`  data-draggable=\"${config.draggable}\"`);
+  }
+  if (typeof config.dragOffset === "number" && config.dragOffset !== 0) {
+    lines.push(`  data-drag-offset=\"${config.dragOffset}\"`);
+  }
+  if (typeof config.persistPosition === "boolean") {
+    lines.push(`  data-persist-position=\"${config.persistPosition}\"`);
+  }
+  if (config.positionKey) {
+    lines.push(`  data-position-key=\"${config.positionKey}\"`);
+  }
+  if (config.openOnLoad) {
+    lines.push(`  data-open=\"${config.openOnLoad}\"`);
+  }
+  if (config.showReset) {
+    lines.push(`  data-show-reset=\"${config.showReset}\"`);
+  }
+  if (config.persist) {
+    lines.push(`  data-persist=\"${config.persist}\"`);
+  }
+  if (config.storageKey) {
+    lines.push(`  data-storage-key=\"${config.storageKey}\"`);
+  }
+  if (typeof config.showTypingIndicator === "boolean") {
+    lines.push(`  data-show-typing-indicator=\"${config.showTypingIndicator}\"`);
+  }
+  if (typeof config.showExport === "boolean") {
+    lines.push(`  data-show-export=\"${config.showExport}\"`);
+  }
+  if (config.exportLabel) {
+    lines.push(`  data-export-label=\"${config.exportLabel}\"`);
+  }
+  if (typeof config.showScrollButton === "boolean") {
+    lines.push(`  data-show-scroll-button=\"${config.showScrollButton}\"`);
+  }
+  if (config.scrollLabel) {
+    lines.push(`  data-scroll-label=\"${config.scrollLabel}\"`);
+  }
+  if (typeof config.showMinimize === "boolean") {
+    lines.push(`  data-show-minimize=\"${config.showMinimize}\"`);
+  }
+  if (typeof config.minimizedOnLoad === "boolean") {
+    lines.push(`  data-minimized-on-load=\"${config.minimizedOnLoad}\"`);
+  }
+  if (config.minimizeLabel) {
+    lines.push(`  data-minimize-label=\"${config.minimizeLabel}\"`);
+  }
+  if (config.expandLabel) {
+    lines.push(`  data-expand-label=\"${config.expandLabel}\"`);
+  }
+  if (typeof config.showTimestamps === "boolean") {
+    lines.push(`  data-show-timestamps=\"${config.showTimestamps}\"`);
+  }
+  if (config.timestampLocale) {
+    lines.push(`  data-timestamp-locale=\"${config.timestampLocale}\"`);
+  }
+  if (typeof config.autoScroll === "boolean") {
+    lines.push(`  data-auto-scroll=\"${config.autoScroll}\"`);
+  }
+  if (typeof config.autoScrollThreshold === "number") {
+    lines.push(`  data-auto-scroll-threshold=\"${config.autoScrollThreshold}\"`);
+  }
+  if (config.messageMaxWidth) {
+    lines.push(`  data-message-max-width=\"${config.messageMaxWidth}\"`);
+  }
+  if (config.launcherTooltip) {
+    lines.push(`  data-launcher-tooltip=\"${config.launcherTooltip}\"`);
+  }
+  if (typeof config.autoIngest === "boolean") {
+    lines.push(`  data-auto-ingest=\"${config.autoIngest}\"`);
+  }
+  if (typeof config.closeOnOutsideClick === "boolean") {
+    lines.push(`  data-close-on-outside-click=\"${config.closeOnOutsideClick}\"`);
+  }
   lines.push("></script>");
   return lines.join("\n");
 };
@@ -76,8 +292,37 @@ const printHelp = () => {
   console.log("  agentbar config         Print config JSON");
   console.log("  agentbar help           Show help\n");
   console.log("Config keys:");
-  console.log("  siteUrl, apiBase, depth, maxPages, siteKey, themeColor, position,");
-  console.log("  title, subtitle, buttonLabel\n");
+  console.log(
+    "  siteUrl, apiBase, depth, maxPages, siteKey, themeColor, position, title, subtitle,"
+  );
+  console.log(
+    "  buttonLabel, fontFamily, panelBackground, textColor, mutedTextColor, borderColor,"
+  );
+  console.log(
+    "  buttonBackground, buttonTextColor, accentTextColor, buttonShadow, panelShadow, badgeLabel,"
+  );
+  console.log(
+    "  badgeBackground, badgeTextColor, userBubbleBackground, userBubbleText, userBubbleBorder,"
+  );
+  console.log(
+    "  assistantBubbleBackground, assistantBubbleText, assistantBubbleBorder, panelWidth, panelMaxHeight,"
+  );
+  console.log(
+    "  panelRadius, buttonRadius, offsetX, offsetY, inputPlaceholder, sendLabel, suggestions,"
+  );
+  console.log(
+    "  greeting, draggable, dragOffset, persistPosition, positionKey, openOnLoad, autoIngest,"
+  );
+  console.log(
+    "  showReset, persist, storageKey, showTypingIndicator, showExport, exportLabel,"
+  );
+  console.log(
+    "  showScrollButton, scrollLabel, showMinimize, minimizedOnLoad, minimizeLabel, expandLabel,"
+  );
+  console.log(
+    "  showTimestamps, timestampLocale, autoScroll, autoScrollThreshold, messageMaxWidth,"
+  );
+  console.log("  launcherTooltip, closeOnOutsideClick\n");
   console.log(`Config file: ${configPath}`);
 };
 
@@ -110,6 +355,47 @@ const init = async () => {
     config.title = await ask(rl, "Widget title", config.title);
     config.subtitle = await ask(rl, "Widget subtitle", config.subtitle);
     config.buttonLabel = await ask(rl, "Button label", config.buttonLabel);
+    config.fontFamily = await ask(rl, "Font family", config.fontFamily);
+    config.inputPlaceholder = await ask(rl, "Input placeholder", config.inputPlaceholder);
+    config.sendLabel = await ask(rl, "Send button label", config.sendLabel);
+    const suggestionInput = await ask(
+      rl,
+      "Suggestions (pipe or comma separated)",
+      config.suggestions.join(" | ")
+    );
+    config.suggestions = suggestionInput
+      .split(/[|,]/)
+      .map((value) => value.trim())
+      .filter(Boolean);
+    config.greeting = await ask(rl, "Greeting (optional)", config.greeting);
+    config.draggable =
+      (await ask(rl, "Draggable launcher (true/false)", String(config.draggable))) === "true";
+    config.persistPosition =
+      (await ask(rl, "Persist position (true/false)", String(config.persistPosition))) === "true";
+    config.openOnLoad = (await ask(rl, "Open on load (true/false)", String(config.openOnLoad))) === "true";
+    config.showReset = (await ask(rl, "Show reset button (true/false)", String(config.showReset))) === "true";
+    config.persist = (await ask(rl, "Persist chat (true/false)", String(config.persist))) === "true";
+    config.showTypingIndicator =
+      (await ask(rl, "Show typing indicator (true/false)", String(config.showTypingIndicator))) ===
+      "true";
+    config.showExport =
+      (await ask(rl, "Show export button (true/false)", String(config.showExport))) === "true";
+    config.exportLabel = await ask(rl, "Export label", config.exportLabel);
+    config.showScrollButton =
+      (await ask(rl, "Show scroll button (true/false)", String(config.showScrollButton))) ===
+      "true";
+    config.scrollLabel = await ask(rl, "Scroll button label", config.scrollLabel);
+    config.showMinimize =
+      (await ask(rl, "Show minimize button (true/false)", String(config.showMinimize))) ===
+      "true";
+    config.minimizedOnLoad =
+      (await ask(rl, "Minimized on load (true/false)", String(config.minimizedOnLoad))) ===
+      "true";
+    config.showTimestamps =
+      (await ask(rl, "Show timestamps (true/false)", String(config.showTimestamps))) === "true";
+    config.autoScroll =
+      (await ask(rl, "Auto scroll (true/false)", String(config.autoScroll))) === "true";
+    config.autoIngest = (await ask(rl, "Auto ingest (true/false)", String(config.autoIngest))) === "true";
   } finally {
     rl.close();
   }
@@ -134,13 +420,49 @@ const setValue = (key, value) => {
     process.exit(1);
   }
 
-  if (key === "depth" || key === "maxPages") {
+  if (key === "depth" || key === "maxPages" || key === "autoScrollThreshold") {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) {
+      console.error(`${key} must be a number.`);
+      process.exit(1);
+    }
+    config[key] = parsed;
+  } else if (key === "offsetX" || key === "offsetY") {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) {
+      console.error(`${key} must be a number.`);
+      process.exit(1);
+    }
+    config[key] = parsed;
+  } else if (
+    key === "openOnLoad" ||
+    key === "autoIngest" ||
+    key === "closeOnOutsideClick" ||
+    key === "showReset" ||
+    key === "persist" ||
+    key === "showTypingIndicator" ||
+    key === "draggable" ||
+    key === "persistPosition" ||
+    key === "showExport" ||
+    key === "showScrollButton" ||
+    key === "showMinimize" ||
+    key === "minimizedOnLoad" ||
+    key === "showTimestamps" ||
+    key === "autoScroll"
+  ) {
+    config[key] = value === "true" || value === true;
+  } else if (key === "dragOffset") {
     const parsed = Number(value);
     if (!Number.isFinite(parsed)) {
       console.error(`${key} must be a number.`);
       process.exit(1);
     }
     config[key] = parsed;
+  } else if (key === "suggestions") {
+    config[key] = String(value)
+      .split(/[|,]/)
+      .map((item) => item.trim())
+      .filter(Boolean);
   } else {
     config[key] = value;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arjun-shah/agentbar-cli",
-  "version": "0.1.0",
+  "version": "0.1.7",
   "type": "module",
   "description": "Agent Plugin Bar CLI helper.",
   "bin": {