@neo4j-ndl/react 4.1.8 → 4.2.0

package/lib/esm/ai/response/stories/response-code-examples.story.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Response } from '@neo4j-ndl/react/ai';
+const codeExamplesMarkdown = `
+# Code Examples
+
+This story focuses on different code rendering capabilities.
+
+## Multiple Programming Languages
+
+### JavaScript
+
+\`\`\`javascript
+// Array methods
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+const sum = numbers.reduce((acc, n) => acc + n, 0);
+
+console.log('Doubled:', doubled);
+console.log('Sum:', sum);
+\`\`\`
+
+### TypeScript
+
+\`\`\`typescript
+// Generics
+function identity<T>(arg: T): T {
+  return arg;
+}
+
+const result = identity<string>("Hello");
+const num = identity(42);
+\`\`\`
+
+### Python
+
+\`\`\`python
+# List comprehension
+squares = [x**2 for x in range(10)]
+evens = [x for x in range(20) if x % 2 == 0]
+
+# Dictionary comprehension
+square_dict = {x: x**2 for x in range(5)}
+
+print(f"Squares: {squares}")
+print(f"Evens: {evens}")
+\`\`\`
+
+### Cypher
+
+\`\`\`cypher
+// Create nodes and relationships
+CREATE (alice:Person {name: 'Alice', age: 30})
+CREATE (bob:Person {name: 'Bob', age: 25})
+CREATE (alice)-[:KNOWS {since: 2020}]->(bob)
+RETURN alice, bob
+\`\`\`
+
+### SQL
+
+\`\`\`sql
+-- Complex query
+SELECT 
+  u.name,
+  COUNT(o.id) as order_count,
+  SUM(o.total) as total_spent
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.active = true
+GROUP BY u.id, u.name
+HAVING COUNT(o.id) > 5
+ORDER BY total_spent DESC
+LIMIT 10;
+\`\`\`
+
+### Rust
+
+\`\`\`rust
+// Pattern matching
+fn describe_number(n: i32) -> String {
+    match n {
+        0 => "zero".to_string(),
+        1..=10 => "small".to_string(),
+        11..=100 => "medium".to_string(),
+        _ => "large".to_string(),
+    }
+}
+\`\`\`
+
+### Go
+
+\`\`\`go
+// Goroutines and channels
+func worker(id int, jobs <-chan int, results chan<- int) {
+    for j := range jobs {
+        fmt.Printf("worker %d processing job %d\\n", id, j)
+        results <- j * 2
+    }
+}
+\`\`\`
+
+### JSON
+
+\`\`\`json
+{
+  "name": "Response Component",
+  "version": "1.0.0",
+  "features": [
+    "markdown rendering",
+    "syntax highlighting",
+    "streaming support"
+  ],
+  "config": {
+    "theme": "dark",
+    "lineNumbers": true
+  }
+}
+\`\`\`
+
+### YAML
+
+\`\`\`yaml
+# Configuration file
+app:
+  name: MyApp
+  version: 1.0.0
+  port: 3000
+
+database:
+  host: localhost
+  port: 5432
+  credentials:
+    username: admin
+    password: secret
+
+features:
+  - authentication
+  - logging
+  - caching
+\`\`\`
+
+### Shell/Bash
+
+\`\`\`bash
+#!/bin/bash
+
+# Deploy script
+echo "Starting deployment..."
+
+npm install
+npm run build
+npm test
+
+if [ $? -eq 0 ]; then
+    echo "Deployment successful!"
+else
+    echo "Deployment failed!"
+    exit 1
+fi
+\`\`\`
+
+## Inline Code
+
+You can use inline code like \`const x = 5\`, \`npm install\`, or \`SELECT * FROM users\` within sentences.
+
+Mixed with text: The \`Array.map()\` method creates a new array and the \`filter()\` method filters elements.
+
+## Code Without Language
+
+\`\`\`
+Plain text code block
+No syntax highlighting
+Just monospace font
+\`\`\`
+
+## Long Code Blocks
+
+\`\`\`javascript
+// Complex React component
+import React, { useState, useEffect, useCallback } from 'react';
+
+const UserDashboard = ({ userId }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchUser = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(\`/api/users/\${userId}\`);
+      if (!response.ok) throw new Error('Failed to fetch user');
+      const data = await response.json();
+      setUser(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchUser();
+  }, [fetchUser]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  if (!user) return <div>No user found</div>;
+
+  return (
+    <div className="dashboard">
+      <h1>{user.name}</h1>
+      <p>Email: {user.email}</p>
+      <button onClick={fetchUser}>Refresh</button>
+    </div>
+  );
+};
+
+export default UserDashboard;
+\`\`\`
+`;
+export const Component = () => {
+    return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: codeExamplesMarkdown }) }));
+};
+export default Component;
+//# sourceMappingURL=response-code-examples.story.js.map

package/lib/esm/ai/response/stories/response-code-examples.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-code-examples.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-code-examples.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwN5B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,QAAQ,cAAE,oBAAoB,GAAY,GACvC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Response } from '@neo4j-ndl/react/ai';\n\nconst codeExamplesMarkdown = `\n# Code Examples\n\nThis story focuses on different code rendering capabilities.\n\n## Multiple Programming Languages\n\n### JavaScript\n\n\\`\\`\\`javascript\n// Array methods\nconst numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map(n => n * 2);\nconst sum = numbers.reduce((acc, n) => acc + n, 0);\n\nconsole.log('Doubled:', doubled);\nconsole.log('Sum:', sum);\n\\`\\`\\`\n\n### TypeScript\n\n\\`\\`\\`typescript\n// Generics\nfunction identity<T>(arg: T): T {\n  return arg;\n}\n\nconst result = identity<string>(\"Hello\");\nconst num = identity(42);\n\\`\\`\\`\n\n### Python\n\n\\`\\`\\`python\n# List comprehension\nsquares = [x**2 for x in range(10)]\nevens = [x for x in range(20) if x % 2 == 0]\n\n# Dictionary comprehension\nsquare_dict = {x: x**2 for x in range(5)}\n\nprint(f\"Squares: {squares}\")\nprint(f\"Evens: {evens}\")\n\\`\\`\\`\n\n### Cypher\n\n\\`\\`\\`cypher\n// Create nodes and relationships\nCREATE (alice:Person {name: 'Alice', age: 30})\nCREATE (bob:Person {name: 'Bob', age: 25})\nCREATE (alice)-[:KNOWS {since: 2020}]->(bob)\nRETURN alice, bob\n\\`\\`\\`\n\n### SQL\n\n\\`\\`\\`sql\n-- Complex query\nSELECT \n  u.name,\n  COUNT(o.id) as order_count,\n  SUM(o.total) as total_spent\nFROM users u\nLEFT JOIN orders o ON u.id = o.user_id\nWHERE u.active = true\nGROUP BY u.id, u.name\nHAVING COUNT(o.id) > 5\nORDER BY total_spent DESC\nLIMIT 10;\n\\`\\`\\`\n\n### Rust\n\n\\`\\`\\`rust\n// Pattern matching\nfn describe_number(n: i32) -> String {\n    match n {\n        0 => \"zero\".to_string(),\n        1..=10 => \"small\".to_string(),\n        11..=100 => \"medium\".to_string(),\n        _ => \"large\".to_string(),\n    }\n}\n\\`\\`\\`\n\n### Go\n\n\\`\\`\\`go\n// Goroutines and channels\nfunc worker(id int, jobs <-chan int, results chan<- int) {\n    for j := range jobs {\n        fmt.Printf(\"worker %d processing job %d\\\\n\", id, j)\n        results <- j * 2\n    }\n}\n\\`\\`\\`\n\n### JSON\n\n\\`\\`\\`json\n{\n  \"name\": \"Response Component\",\n  \"version\": \"1.0.0\",\n  \"features\": [\n    \"markdown rendering\",\n    \"syntax highlighting\",\n    \"streaming support\"\n  ],\n  \"config\": {\n    \"theme\": \"dark\",\n    \"lineNumbers\": true\n  }\n}\n\\`\\`\\`\n\n### YAML\n\n\\`\\`\\`yaml\n# Configuration file\napp:\n  name: MyApp\n  version: 1.0.0\n  port: 3000\n\ndatabase:\n  host: localhost\n  port: 5432\n  credentials:\n    username: admin\n    password: secret\n\nfeatures:\n  - authentication\n  - logging\n  - caching\n\\`\\`\\`\n\n### Shell/Bash\n\n\\`\\`\\`bash\n#!/bin/bash\n\n# Deploy script\necho \"Starting deployment...\"\n\nnpm install\nnpm run build\nnpm test\n\nif [ $? -eq 0 ]; then\n    echo \"Deployment successful!\"\nelse\n    echo \"Deployment failed!\"\n    exit 1\nfi\n\\`\\`\\`\n\n## Inline Code\n\nYou can use inline code like \\`const x = 5\\`, \\`npm install\\`, or \\`SELECT * FROM users\\` within sentences.\n\nMixed with text: The \\`Array.map()\\` method creates a new array and the \\`filter()\\` method filters elements.\n\n## Code Without Language\n\n\\`\\`\\`\nPlain text code block\nNo syntax highlighting\nJust monospace font\n\\`\\`\\`\n\n## Long Code Blocks\n\n\\`\\`\\`javascript\n// Complex React component\nimport React, { useState, useEffect, useCallback } from 'react';\n\nconst UserDashboard = ({ userId }) => {\n  const [user, setUser] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  const fetchUser = useCallback(async () => {\n    try {\n      setLoading(true);\n      const response = await fetch(\\`/api/users/\\${userId}\\`);\n      if (!response.ok) throw new Error('Failed to fetch user');\n      const data = await response.json();\n      setUser(data);\n    } catch (err) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  }, [userId]);\n\n  useEffect(() => {\n    fetchUser();\n  }, [fetchUser]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n  if (!user) return <div>No user found</div>;\n\n  return (\n    <div className=\"dashboard\">\n      <h1>{user.name}</h1>\n      <p>Email: {user.email}</p>\n      <button onClick={fetchUser}>Refresh</button>\n    </div>\n  );\n};\n\nexport default UserDashboard;\n\\`\\`\\`\n`;\n\nexport const Component = () => {\n  return (\n    <div className=\"max-w-4xl\">\n      <Response>{codeExamplesMarkdown}</Response>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/response/stories/response-default.story.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Response } from '@neo4j-ndl/react/ai';
+const markdownContent = `
+# Hello World
+
+This is a **bold** text and this is an *italic* text.
+
+Here is a list:
+- Item 1
+- Item 2
+- Item 3
+
+And a code block:
+
+\`\`\`typescript
+const greeting = "Hello World";
+console.log(greeting);
+\`\`\`
+
+[Link to Neo4j](https://neo4j.com)
+`;
+export const Component = () => {
+    return _jsx(Response, { children: markdownContent });
+};
+export default Component;
+//# sourceMappingURL=response-default.story.js.map

package/lib/esm/ai/response/stories/response-default.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-default.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;CAkBvB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,KAAC,QAAQ,cAAE,eAAe,GAAY,CAAC;AAChD,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Response } from '@neo4j-ndl/react/ai';\n\nconst markdownContent = `\n# Hello World\n\nThis is a **bold** text and this is an *italic* text.\n\nHere is a list:\n- Item 1\n- Item 2\n- Item 3\n\nAnd a code block:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n\n[Link to Neo4j](https://neo4j.com)\n`;\n\nexport const Component = () => {\n  return <Response>{markdownContent}</Response>;\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/response/stories/response-full-example.story.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';
+import { Prompt, Response, Suggestion, Thinking, UserBubble, } from '@neo4j-ndl/react/ai';
+import { ArrowPathIconOutline, Cog6ToothIconOutline, HandThumbDownIconOutline, PlusIconOutline, Square2StackIconOutline, XMarkIconOutline, } from '@neo4j-ndl/react/icons';
+import { useEffect, useRef, useState } from 'react';
+const FAKE_RESPONSES = [
+    `Here is a simple response with some **bold text** and *italics*.`,
+    `Here is a list of items:
+- Item 1
+- Item 2
+- Item 3`,
+    `Here is a code block example:
+
+\`\`\`typescript
+const greeting = "Hello World";
+console.log(greeting);
+\`\`\`
+`,
+    `# Heading 1
+## Heading 2
+### Heading 3
+
+Some text under headings.`,
+    `You can also use tables:
+
+| Header 1 | Header 2 |
+|Data 1|Data 2|
+|Data 3|Data 4|
+`,
+];
+export const Component = () => {
+    const [messages, setMessages] = useState([]);
+    const [prompt, setPrompt] = useState('');
+    const [isThinking, setIsThinking] = useState(false);
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [responseIndex, setResponseIndex] = useState(0);
+    const messagesEndRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const intervalRef = useRef(null);
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    };
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages, isThinking]);
+    const handleSend = (overridePrompt) => {
+        // Handle Stop
+        if (isThinking || isStreaming) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+            setIsThinking(false);
+            setIsStreaming(false);
+            // Mark the last message as done if stopped
+            setMessages((prev) => {
+                const newMessages = [...prev];
+                const lastMessage = newMessages[newMessages.length - 1];
+                if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) === 'assistant') {
+                    lastMessage.done = true;
+                }
+                return newMessages;
+            });
+            return;
+        }
+        const textToSend = overridePrompt || prompt;
+        if (!textToSend.trim()) {
+            return;
+        }
+        setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);
+        setPrompt('');
+        setIsThinking(true);
+        const startTime = Date.now();
+        // Simulate network delay (thinking time)
+        timeoutRef.current = setTimeout(() => {
+            const endTime = Date.now();
+            const thinkingTime = endTime - startTime;
+            setIsThinking(false);
+            setIsStreaming(true);
+            const responseText = FAKE_RESPONSES[responseIndex];
+            setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);
+            let currentText = '';
+            setMessages((prev) => [
+                ...prev,
+                { content: '', done: false, role: 'assistant', thinkingTime },
+            ]);
+            // Simulate streaming
+            intervalRef.current = setInterval(() => {
+                if (currentText.length < responseText.length) {
+                    // Add a few characters at a time to simulate chunks
+                    // Ensure we don't split newlines incorrectly if that's an issue,
+                    // but simple slicing should be fine as long as the source has \n.
+                    const chunk = responseText.slice(currentText.length, currentText.length + 2);
+                    currentText += chunk;
+                    setMessages((prev) => {
+                        const newMessages = [...prev];
+                        const lastMessage = newMessages[newMessages.length - 1];
+                        if (lastMessage.role === 'assistant') {
+                            lastMessage.content = currentText;
+                        }
+                        return newMessages;
+                    });
+                }
+                else {
+                    if (intervalRef.current) {
+                        clearInterval(intervalRef.current);
+                    }
+                    setIsStreaming(false);
+                    setMessages((prev) => {
+                        const newMessages = [...prev];
+                        const lastMessage = newMessages[newMessages.length - 1];
+                        if (lastMessage.role === 'assistant') {
+                            lastMessage.done = true;
+                        }
+                        return newMessages;
+                    });
+                }
+            }, 50);
+        }, 2000);
+    };
+    return (_jsx("section", { className: "n-h-screen", children: _jsxs("div", { className: "n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak", children: [_jsx("div", { className: "n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3", children: _jsxs("div", { className: "n-ml-auto", children: [_jsx(CleanIconButton, { description: "settings", tooltipProps: {}, children: _jsx(Cog6ToothIconOutline, {}) }), _jsx(CleanIconButton, { description: "close", children: _jsx(XMarkIconOutline, {}) })] }) }), _jsx("div", { className: "n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto", children: messages.length === 0 ? (_jsx("div", { className: "n-flex n-flex-col ", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-12", children: [_jsx(Typography, { variant: "display", children: "Hi [User], how can I help you today?" }), _jsxs("div", { className: "n-flex n-flex-col n-gap-4", children: [_jsx(Typography, { variant: "body-medium", children: "Suggestions" }), _jsx(Suggestion, { isPrimary: true, onClick: () => {
+                                                handleSend('I want to import data');
+                                            }, children: "I want to import data" }), _jsx(Suggestion, { onClick: () => {
+                                                handleSend('Create an AI agent');
+                                            }, children: "Create an AI agent" }), _jsx(Suggestion, { onClick: () => {
+                                                handleSend('Invite project members');
+                                            }, children: "Invite project members" }), _jsx(Suggestion, { onClick: () => {
+                                                handleSend('Generate a report');
+                                            }, children: "Generate a report" })] }), _jsxs(Typography, { variant: "body-medium", children: ["You can also drag and drop files here, or", ' ', _jsx(TextLink, { as: "button", type: "internal-underline", children: "browse" }), ". Supports CVG, MOV, PDF"] })] }) })) : (_jsxs("div", { className: "n-flex n-flex-col n-gap-4 n-pb-4", children: [messages.map((msg, idx) => (_jsx("div", { className: `n-flex ${msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'}`, children: msg.role === 'user' ? (_jsx("div", { className: "n-max-w-[85%]", children: _jsx(UserBubble, { avatarProps: {
+                                            name: 'NM',
+                                            type: 'letters',
+                                        }, children: msg.content }) })) : (_jsxs("div", { className: "n-w-full n-flex n-flex-col n-gap-2", children: [msg.thinkingTime !== undefined && (_jsx(Thinking, { isThinking: false, thinkingMs: msg.thinkingTime })), _jsxs("div", { className: "n-flex n-flex-col n-gap-2", children: [_jsx(Response, { children: msg.content }), msg.done === true && (_jsxs("div", { className: "n-flex n-flex-row n-gap-1.5", children: [_jsx(CleanIconButton, { size: "small", description: "Dislike", children: _jsx(HandThumbDownIconOutline, {}) }), _jsx(CleanIconButton, { size: "small", description: "Re-run", children: _jsx(ArrowPathIconOutline, {}) }), _jsx(CleanIconButton, { size: "small", description: "Copy", children: _jsx(Square2StackIconOutline, {}) })] }))] })] })) }, idx))), isThinking && _jsx(Thinking, { isThinking: true }), _jsx("div", { ref: messagesEndRef })] })) }), _jsx("div", { className: "n-p-4 n-mt-auto", children: _jsx(Prompt, { value: prompt, onChange: (e) => setPrompt(e.target.value), onSubmitPrompt: () => handleSend(), isRunningPrompt: isThinking || isStreaming, isSubmitDisabled: prompt.length === 0 && !(isThinking || isStreaming), bottomContent: _jsx(CleanIconButton, { description: "Add files", size: "small", children: _jsx(PlusIconOutline, {}) }) }) })] }) }));
+};
+export default Component;
+//# sourceMappingURL=response-full-example.story.js.map

package/lib/esm/ai/response/stories/response-full-example.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-full-example.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-full-example.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';\nimport {\n  Prompt,\n  Response,\n  Suggestion,\n  Thinking,\n  UserBubble,\n} from '@neo4j-ndl/react/ai';\nimport {\n  ArrowPathIconOutline,\n  Cog6ToothIconOutline,\n  HandThumbDownIconOutline,\n  PlusIconOutline,\n  Square2StackIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useEffect, useRef, useState } from 'react';\n\nconst FAKE_RESPONSES = [\n  `Here is a simple response with some **bold text** and *italics*.`,\n  `Here is a list of items:\n- Item 1\n- Item 2\n- Item 3`,\n  `Here is a code block example:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n`,\n  `# Heading 1\n## Heading 2\n### Heading 3\n\nSome text under headings.`,\n  `You can also use tables:\n\n| Header 1 | Header 2 |\n|Data 1|Data 2|\n|Data 3|Data 4|\n`,\n];\n\nexport const Component = () => {\n  const [messages, setMessages] = useState<\n    {\n      role: 'user' | 'assistant';\n      content: string;\n      thinkingTime?: number;\n      done?: boolean;\n    }[]\n  >([]);\n  const [prompt, setPrompt] = useState('');\n  const [isThinking, setIsThinking] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [responseIndex, setResponseIndex] = useState(0);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, isThinking]);\n\n  const handleSend = (overridePrompt?: string) => {\n    // Handle Stop\n    if (isThinking || isStreaming) {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n      setIsThinking(false);\n      setIsStreaming(false);\n\n      // Mark the last message as done if stopped\n      setMessages((prev) => {\n        const newMessages = [...prev];\n        const lastMessage = newMessages[newMessages.length - 1];\n        if (lastMessage?.role === 'assistant') {\n          lastMessage.done = true;\n        }\n        return newMessages;\n      });\n      return;\n    }\n\n    const textToSend = overridePrompt || prompt;\n\n    if (!textToSend.trim()) {\n      return;\n    }\n\n    setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);\n    setPrompt('');\n    setIsThinking(true);\n    const startTime = Date.now();\n\n    // Simulate network delay (thinking time)\n    timeoutRef.current = setTimeout(() => {\n      const endTime = Date.now();\n      const thinkingTime = endTime - startTime;\n      setIsThinking(false);\n      setIsStreaming(true);\n\n      const responseText = FAKE_RESPONSES[responseIndex];\n      setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);\n\n      let currentText = '';\n      setMessages((prev) => [\n        ...prev,\n        { content: '', done: false, role: 'assistant', thinkingTime },\n      ]);\n\n      // Simulate streaming\n      intervalRef.current = setInterval(() => {\n        if (currentText.length < responseText.length) {\n          // Add a few characters at a time to simulate chunks\n          // Ensure we don't split newlines incorrectly if that's an issue,\n          // but simple slicing should be fine as long as the source has \\n.\n          const chunk = responseText.slice(\n            currentText.length,\n            currentText.length + 2,\n          );\n          currentText += chunk;\n\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.content = currentText;\n            }\n            return newMessages;\n          });\n        } else {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n          }\n          setIsStreaming(false);\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.done = true;\n            }\n            return newMessages;\n          });\n        }\n      }, 50);\n    }, 2000);\n  };\n\n  return (\n    <section className=\"n-h-screen\">\n      <div className=\"n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak\">\n        <div className=\"n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3\">\n          <div className=\"n-ml-auto\">\n            <CleanIconButton description=\"settings\" tooltipProps={{}}>\n              <Cog6ToothIconOutline />\n            </CleanIconButton>\n            <CleanIconButton description=\"close\">\n              <XMarkIconOutline />\n            </CleanIconButton>\n          </div>\n        </div>\n        <div className=\"n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto\">\n          {messages.length === 0 ? (\n            <div className=\"n-flex n-flex-col \">\n              <div className=\"n-flex n-flex-col n-gap-12\">\n                <Typography variant=\"display\">\n                  Hi [User], how can I help you today?\n                </Typography>\n                <div className=\"n-flex n-flex-col n-gap-4\">\n                  <Typography variant=\"body-medium\">Suggestions</Typography>\n                  <Suggestion\n                    isPrimary\n                    onClick={() => {\n                      handleSend('I want to import data');\n                    }}\n                  >\n                    I want to import data\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Create an AI agent');\n                    }}\n                  >\n                    Create an AI agent\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Invite project members');\n                    }}\n                  >\n                    Invite project members\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Generate a report');\n                    }}\n                  >\n                    Generate a report\n                  </Suggestion>\n                </div>\n                <Typography variant=\"body-medium\">\n                  You can also drag and drop files here, or{' '}\n                  <TextLink as=\"button\" type=\"internal-underline\">\n                    browse\n                  </TextLink>\n                  . Supports CVG, MOV, PDF\n                </Typography>\n              </div>\n            </div>\n          ) : (\n            <div className=\"n-flex n-flex-col n-gap-4 n-pb-4\">\n              {messages.map((msg, idx) => (\n                <div\n                  key={idx}\n                  className={`n-flex ${\n                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'\n                  }`}\n                >\n                  {msg.role === 'user' ? (\n                    <div className=\"n-max-w-[85%]\">\n                      <UserBubble\n                        avatarProps={{\n                          name: 'NM',\n                          type: 'letters',\n                        }}\n                      >\n                        {msg.content}\n                      </UserBubble>\n                    </div>\n                  ) : (\n                    <div className=\"n-w-full n-flex n-flex-col n-gap-2\">\n                      {msg.thinkingTime !== undefined && (\n                        <Thinking\n                          isThinking={false}\n                          thinkingMs={msg.thinkingTime}\n                        />\n                      )}\n                      <div className=\"n-flex n-flex-col n-gap-2\">\n                        <Response>{msg.content}</Response>\n\n                        {msg.done === true && (\n                          <div className=\"n-flex n-flex-row n-gap-1.5\">\n                            <CleanIconButton size=\"small\" description=\"Dislike\">\n                              <HandThumbDownIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Re-run\">\n                              <ArrowPathIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Copy\">\n                              <Square2StackIconOutline />\n                            </CleanIconButton>\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n              {isThinking && <Thinking isThinking={true} />}\n              <div ref={messagesEndRef} />\n            </div>\n          )}\n        </div>\n        <div className=\"n-p-4 n-mt-auto\">\n          <Prompt\n            value={prompt}\n            onChange={(e) => setPrompt(e.target.value)}\n            onSubmitPrompt={() => handleSend()}\n            isRunningPrompt={isThinking || isStreaming}\n            isSubmitDisabled={\n              prompt.length === 0 && !(isThinking || isStreaming)\n            }\n            bottomContent={\n              <CleanIconButton description=\"Add files\" size=\"small\">\n                <PlusIconOutline />\n              </CleanIconButton>\n            }\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/response/stories/response-headings.story.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Response } from '@neo4j-ndl/react/ai';
+const headingsMarkdown = `
+# Heading Level 1
+This is content under heading 1.
+
+## Heading Level 2
+This is content under heading 2.
+
+### Heading Level 3
+This is content under heading 3.
+
+#### Heading Level 4
+This is content under heading 4.
+
+##### Heading Level 5
+This is content under heading 5.
+
+###### Heading Level 6
+This is content under heading 6.
+
+---
+
+## Document Structure Example
+
+# Main Document Title
+
+Brief introduction to the document.
+
+## Introduction
+
+This section provides an overview of what we'll cover.
+
+### Background
+
+Some background information about the topic.
+
+#### Historical Context
+
+Details about the history.
+
+##### Key Events
+
+- Event 1
+- Event 2
+- Event 3
+
+###### Notes
+
+Additional notes and references.
+
+## Content Section
+
+Main content goes here.
+
+### Subsection A
+
+Details for subsection A.
+
+### Subsection B
+
+Details for subsection B.
+
+## Conclusion
+
+Final thoughts and summary.
+
+---
+
+## Headings with Other Elements
+
+### Code Example
+
+\`\`\`javascript
+console.log("Hello from heading section");
+\`\`\`
+
+### List Example
+
+- Item 1
+- Item 2
+- Item 3
+
+### Quote Example
+
+> "This is a quote under a heading."
+
+### Mixed Content
+
+Regular paragraph with **bold** and *italic* text.
+`;
+export const Component = () => {
+    return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: headingsMarkdown }) }));
+};
+export default Component;
+//# sourceMappingURL=response-headings.story.js.map

package/lib/esm/ai/response/stories/response-headings.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-headings.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-headings.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFxB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,QAAQ,cAAE,gBAAgB,GAAY,GACnC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Response } from '@neo4j-ndl/react/ai';\n\nconst headingsMarkdown = `\n# Heading Level 1\nThis is content under heading 1.\n\n## Heading Level 2\nThis is content under heading 2.\n\n### Heading Level 3\nThis is content under heading 3.\n\n#### Heading Level 4\nThis is content under heading 4.\n\n##### Heading Level 5\nThis is content under heading 5.\n\n###### Heading Level 6\nThis is content under heading 6.\n\n---\n\n## Document Structure Example\n\n# Main Document Title\n\nBrief introduction to the document.\n\n## Introduction\n\nThis section provides an overview of what we'll cover.\n\n### Background\n\nSome background information about the topic.\n\n#### Historical Context\n\nDetails about the history.\n\n##### Key Events\n\n- Event 1\n- Event 2\n- Event 3\n\n###### Notes\n\nAdditional notes and references.\n\n## Content Section\n\nMain content goes here.\n\n### Subsection A\n\nDetails for subsection A.\n\n### Subsection B\n\nDetails for subsection B.\n\n## Conclusion\n\nFinal thoughts and summary.\n\n---\n\n## Headings with Other Elements\n\n### Code Example\n\n\\`\\`\\`javascript\nconsole.log(\"Hello from heading section\");\n\\`\\`\\`\n\n### List Example\n\n- Item 1\n- Item 2\n- Item 3\n\n### Quote Example\n\n> \"This is a quote under a heading.\"\n\n### Mixed Content\n\nRegular paragraph with **bold** and *italic* text.\n`;\n\nexport const Component = () => {\n  return (\n    <div className=\"max-w-4xl\">\n      <Response>{headingsMarkdown}</Response>\n    </div>\n  );\n};\n\nexport default Component;\n"]}