@radnine/storybook-addon-claude 0.3.2 → 0.3.3

package/dist/components/MarkdownContent.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarkdownContent = MarkdownContent;
+var _react = _interopRequireWildcard(require("react"));
+var _marked = require("marked");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Configure marked for compact chat rendering
+const renderer = new _marked.marked.Renderer();
+
+// Override link rendering to open in new tabs
+renderer.link = function ({
+  href,
+  title,
+  text
+}) {
+  const titleAttr = title ? ` title="${title}"` : '';
+  return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
+};
+_marked.marked.setOptions({
+  renderer,
+  gfm: true,
+  breaks: true
+});
+
+// Compact markdown styles scoped under .claude-md
+const MARKDOWN_STYLES = `
+.claude-md { line-height: 1.5; word-break: break-word; }
+.claude-md h1 { font-size: 1.1em; font-weight: 600; margin: 8px 0 4px; }
+.claude-md h2 { font-size: 1.05em; font-weight: 600; margin: 8px 0 4px; }
+.claude-md h3 { font-size: 1em; font-weight: 600; margin: 6px 0 3px; }
+.claude-md h4, .claude-md h5, .claude-md h6 { font-size: 1em; font-weight: 600; margin: 4px 0 2px; }
+.claude-md p { margin: 4px 0; }
+.claude-md ul, .claude-md ol { margin: 4px 0; padding-left: 20px; }
+.claude-md li { margin: 2px 0; }
+.claude-md code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
+.claude-md pre { background: rgba(0,0,0,0.04); padding: 8px; border-radius: 4px; overflow-x: auto; margin: 4px 0; }
+.claude-md pre code { background: none; padding: 0; }
+.claude-md table { border-collapse: collapse; margin: 4px 0; font-size: 0.95em; }
+.claude-md th, .claude-md td { border: 1px solid rgba(0,0,0,0.15); padding: 4px 8px; }
+.claude-md th { background: rgba(0,0,0,0.04); font-weight: 600; }
+.claude-md blockquote { border-left: 3px solid rgba(0,0,0,0.15); margin: 4px 0; padding: 2px 8px; color: #666; }
+.claude-md a { color: #0366d6; text-decoration: none; }
+.claude-md a:hover { text-decoration: underline; }
+.claude-md hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 8px 0; }
+.claude-md > *:first-child { margin-top: 0; }
+.claude-md > *:last-child { margin-bottom: 0; }
+`;
+
+// Inject styles once
+let stylesInjected = false;
+function ensureStyles() {
+  if (stylesInjected) return;
+  try {
+    const style = document.createElement('style');
+    style.textContent = MARKDOWN_STYLES;
+    document.head.appendChild(style);
+    stylesInjected = true;
+  } catch (_e) {
+    // SSR or test environment — ignore
+  }
+}
+
+/**
+ * Renders markdown text as formatted HTML.
+ * Compact styling designed for chat bubbles.
+ *
+ * @param {{ text: string }} props
+ */
+function MarkdownContent({
+  text
+}) {
+  ensureStyles();
+  const html = (0, _react.useMemo)(() => {
+    if (!text) return '';
+    return _marked.marked.parse(text);
+  }, [text]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "claude-md",
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  });
+}

package/dist/components/MessageList.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MessageList = MessageList;
 var _react = _interopRequireWildcard(require("react"));
+var _MarkdownContent = require("./MarkdownContent");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -190,7 +191,9 @@ function AssistantMessage({
         ...styles.assistantBubble,
         ...(replay ? styles.replay : {})
       },
-      children: text || '(empty response)'
+      children: text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownContent.MarkdownContent, {
+        text: text
+      }) : '(empty response)'
     })
   });
 }
@@ -242,18 +245,14 @@ function ResultMessage({
   data
 }) {
   const subtype = data?.subtype || 'unknown';
-  const resultText = typeof data?.result === 'string' ? data.result : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: styles.resultRow,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: styles.resultBubble,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         style: styles.resultLabel,
         children: subtype === 'success' ? 'Completed' : `Result: ${subtype}`
-      }), resultText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.resultText,
-        children: resultText.slice(0, 200)
-      })]
+      })
     })
   });
 }
@@ -326,7 +325,9 @@ function GenericOutputMessage({
           ...styles.assistantBubble,
           ...(replay ? styles.replay : {})
         },
-        children: text
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownContent.MarkdownContent, {
+          text: text
+        })
       })
     });
   }
@@ -498,7 +499,6 @@ const styles = {
     color: '#333',
     fontSize: '13px',
     lineHeight: '1.4',
-    whiteSpace: 'pre-wrap',
     wordBreak: 'break-word'
   },
   replay: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radnine/storybook-addon-claude",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Storybook addon panel for chatting with Claude via the standalone daemon",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -29,6 +29,9 @@
     "ai",
     "design"
   ],
+  "dependencies": {
+    "marked": "^15.0.0"
+  },
   "peerDependencies": {
     "storybook": "^9.0.0",
     "react": "^18.0.0 || ^19.0.0",