@assistkick/create 1.28.0 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageContent.tsx

@@ -8,14 +8,11 @@
  */
 
 import ReactMarkdown from 'react-markdown';
-import type { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import type { ContentBlock, ToolResultBlock, ToolUseBlock } from '../hooks/use_chat_stream';
 import { ToolUseCard } from './ToolUseCard';
 import { HighlightedText, countMatches } from './HighlightedText';
-import { MermaidBlock } from './MermaidBlock';
+import { markdownComponents } from './markdownComponents';
 
 interface ChatMessageContentProps {
   content: ContentBlock[];
@@ -70,42 +67,6 @@ const chatMarkdownClass = [
   '[&_td]:px-2.5 [&_td]:py-1 [&_td]:border [&_td]:border-edge [&_td]:text-xs',
 ].join(' ');
 
-/**
- * Custom react-markdown components for syntax-highlighted code blocks.
- * Fenced blocks (```lang) get Prism highlighting; inline `code` stays as a styled <code>.
- */
-const markdownComponents: Components = {
-  code({ className, children, ...props }) {
-    const match = /language-(\w+)/.exec(className || '');
-    const codeString = String(children).replace(/\n$/, '');
-
-    // Fenced code block — has a language class set by react-markdown
-    if (match) {
-      // Mermaid code blocks render as interactive SVG diagrams
-      if (match[1] === 'mermaid') {
-        return <MermaidBlock code={codeString} />;
-      }
-
-      return (
-        <SyntaxHighlighter
-          style={oneDark}
-          language={match[1]}
-          PreTag="div"
-          customStyle={{ margin: 0, borderRadius: 6, fontSize: 12 }}
-        >
-          {codeString}
-        </SyntaxHighlighter>
-      );
-    }
-
-    // Inline code
-    return (
-      <code className={className} {...props}>
-        {children}
-      </code>
-    );
-  },
-};
 
 export const ChatMessageContent = ({ content, isStreaming, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageContentProps) => {
   const resultMap = buildResultMap(content);

package/templates/assistkick-product-system/packages/frontend/src/components/ToolDetailView.tsx

@@ -7,9 +7,9 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import ReactMarkdown from 'react-markdown';
-import type { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { ToolResultBlock } from '../hooks/use_chat_stream';
+import { markdownComponents } from './markdownComponents';
 
 /** Map common file extensions to Prism language identifiers. */
 const extToLang: Record<string, string> = {
@@ -76,32 +76,6 @@ const stripLineNumbers = (text: string): { code: string; startLine: number } =>
   };
 };
 
-/** Markdown components for Agent output — syntax-highlighted fenced code blocks. */
-const mdComponents: Components = {
-  code({ className, children, ...props }) {
-    const match = /language-(\w+)/.exec(className || '');
-    const codeString = String(children).replace(/\n$/, '');
-
-    if (match) {
-      return (
-        <SyntaxHighlighter
-          style={oneDark}
-          language={match[1]}
-          PreTag="div"
-          customStyle={{ margin: 0, borderRadius: 6, fontSize: 12 }}
-        >
-          {codeString}
-        </SyntaxHighlighter>
-      );
-    }
-
-    return (
-      <code className={className} {...props}>
-        {children}
-      </code>
-    );
-  },
-};
 
 /** Tailwind classes for markdown rendering inside tool detail panels. */
 const mdClass = [
@@ -249,7 +223,7 @@ const AgentDetailView = ({ input, result }: Omit<ToolDetailViewProps, 'toolName'
               </pre>
             ) : (
               <div className={mdClass}>
-                <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
                   {content || '(empty)'}
                 </ReactMarkdown>
               </div>

package/templates/assistkick-product-system/packages/frontend/src/components/markdownComponents.tsx

@@ -0,0 +1,50 @@
+/**
+ * Shared react-markdown component overrides used across all markdown renderers.
+ *
+ * - ol/ul: inline list-style-type to reliably override Tailwind v4 preflight reset
+ * - code: syntax-highlighted fenced blocks (Prism) + mermaid diagram rendering
+ */
+
+import type { Components } from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { MermaidBlock } from './MermaidBlock';
+
+export const markdownComponents: Components = {
+  ol({ children, ...props }) {
+    return <ol {...props} style={{ listStyleType: 'decimal' }}>{children}</ol>;
+  },
+  ul({ children, ...props }) {
+    return <ul {...props} style={{ listStyleType: 'disc' }}>{children}</ul>;
+  },
+  code({ className, children, ...props }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const codeString = String(children).replace(/\n$/, '');
+
+    // Fenced code block — has a language class set by react-markdown
+    if (match) {
+      // Mermaid code blocks render as interactive SVG diagrams
+      if (match[1] === 'mermaid') {
+        return <MermaidBlock code={codeString} />;
+      }
+
+      return (
+        <SyntaxHighlighter
+          style={oneDark}
+          language={match[1]}
+          PreTag="div"
+          customStyle={{ margin: 0, borderRadius: 6, fontSize: 12 }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      );
+    }
+
+    // Inline code
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  },
+};