@neo4j-ndl/react 4.1.9 → 4.2.0

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"]}

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

@@ -0,0 +1,166 @@
+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 listsMarkdown = `
+# Lists Examples
+
+## Simple Unordered List
+
+- Apple
+- Banana
+- Cherry
+- Date
+- Elderberry
+
+## Simple Ordered List
+
+1. First step
+2. Second step
+3. Third step
+4. Fourth step
+5. Fifth step
+
+## Nested Unordered Lists
+
+- Fruits
+  - Apples
+    - Granny Smith
+    - Honeycrisp
+    - Fuji
+  - Oranges
+    - Navel
+    - Blood Orange
+  - Berries
+    - Strawberry
+    - Blueberry
+    - Raspberry
+- Vegetables
+  - Leafy Greens
+    - Spinach
+    - Kale
+  - Root Vegetables
+    - Carrot
+    - Potato
+
+## Nested Ordered Lists
+
+1. Introduction
+   1. Overview
+   2. Purpose
+   3. Scope
+2. Main Content
+   1. Chapter 1
+      1. Section 1.1
+      2. Section 1.2
+      3. Section 1.3
+   2. Chapter 2
+      1. Section 2.1
+      2. Section 2.2
+3. Conclusion
+   1. Summary
+   2. Recommendations
+
+## Mixed Lists
+
+1. Install dependencies
+   - Node.js
+   - npm or yarn
+   - Git
+2. Clone repository
+   - \`git clone <url>\`
+   - \`cd project-name\`
+3. Configure settings
+   1. Copy \`.env.example\` to \`.env\`
+   2. Update configuration values:
+      - Database URL
+      - API keys
+      - Port number
+4. Start development server
+   - Run \`npm install\`
+   - Run \`npm start\`
+
+## Lists with Paragraphs
+
+- **First Item**
+  
+  This is a detailed explanation of the first item. It can contain multiple sentences and provide context.
+
+- **Second Item**
+  
+  The second item also has a detailed explanation. This helps provide more information to the reader.
+
+- **Third Item**
+  
+  Each item can have as much detail as needed.
+
+## Lists with Code
+
+- JavaScript example:
+  
+  \`\`\`javascript
+  const items = ['a', 'b', 'c'];
+  items.forEach(item => console.log(item));
+  \`\`\`
+
+- Python example:
+  
+  \`\`\`python
+  items = ['a', 'b', 'c']
+  for item in items:
+      print(item)
+  \`\`\`
+
+## Task Lists Representation
+
+- [x] Complete feature A
+- [x] Write tests
+- [ ] Review code
+- [ ] Deploy to production
+- [ ] Monitor metrics
+
+## Lists with Links
+
+1. Official Resources
+   - [Neo4j Documentation](https://neo4j.com/docs)
+   - [Neo4j Community](https://community.neo4j.com)
+   - [Neo4j GitHub](https://github.com/neo4j)
+2. Tutorials
+   - [Getting Started Guide](https://neo4j.com/start)
+   - [Cypher Query Language](https://neo4j.com/cypher)
+3. Tools
+   - Neo4j Desktop
+   - Neo4j Browser
+   - Neo4j Bloom
+
+## Lists with Inline Formatting
+
+- **Bold item** with regular text
+- *Italic item* with regular text
+- \`Code item\` with regular text
+- Regular text with **bold**, *italic*, and \`code\`
+- Combination: **bold and *italic* text** together
+`;
+export const Component = () => {
+    return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: listsMarkdown }) }));
+};
+export default Component;
+//# sourceMappingURL=response-lists.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"response-lists.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-lists.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IrB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,QAAQ,cAAE,aAAa,GAAY,GAChC,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 listsMarkdown = `\n# Lists Examples\n\n## Simple Unordered List\n\n- Apple\n- Banana\n- Cherry\n- Date\n- Elderberry\n\n## Simple Ordered List\n\n1. First step\n2. Second step\n3. Third step\n4. Fourth step\n5. Fifth step\n\n## Nested Unordered Lists\n\n- Fruits\n  - Apples\n    - Granny Smith\n    - Honeycrisp\n    - Fuji\n  - Oranges\n    - Navel\n    - Blood Orange\n  - Berries\n    - Strawberry\n    - Blueberry\n    - Raspberry\n- Vegetables\n  - Leafy Greens\n    - Spinach\n    - Kale\n  - Root Vegetables\n    - Carrot\n    - Potato\n\n## Nested Ordered Lists\n\n1. Introduction\n   1. Overview\n   2. Purpose\n   3. Scope\n2. Main Content\n   1. Chapter 1\n      1. Section 1.1\n      2. Section 1.2\n      3. Section 1.3\n   2. Chapter 2\n      1. Section 2.1\n      2. Section 2.2\n3. Conclusion\n   1. Summary\n   2. Recommendations\n\n## Mixed Lists\n\n1. Install dependencies\n   - Node.js\n   - npm or yarn\n   - Git\n2. Clone repository\n   - \\`git clone <url>\\`\n   - \\`cd project-name\\`\n3. Configure settings\n   1. Copy \\`.env.example\\` to \\`.env\\`\n   2. Update configuration values:\n      - Database URL\n      - API keys\n      - Port number\n4. Start development server\n   - Run \\`npm install\\`\n   - Run \\`npm start\\`\n\n## Lists with Paragraphs\n\n- **First Item**\n  \n  This is a detailed explanation of the first item. It can contain multiple sentences and provide context.\n\n- **Second Item**\n  \n  The second item also has a detailed explanation. This helps provide more information to the reader.\n\n- **Third Item**\n  \n  Each item can have as much detail as needed.\n\n## Lists with Code\n\n- JavaScript example:\n  \n  \\`\\`\\`javascript\n  const items = ['a', 'b', 'c'];\n  items.forEach(item => console.log(item));\n  \\`\\`\\`\n\n- Python example:\n  \n  \\`\\`\\`python\n  items = ['a', 'b', 'c']\n  for item in items:\n      print(item)\n  \\`\\`\\`\n\n## Task Lists Representation\n\n- [x] Complete feature A\n- [x] Write tests\n- [ ] Review code\n- [ ] Deploy to production\n- [ ] Monitor metrics\n\n## Lists with Links\n\n1. Official Resources\n   - [Neo4j Documentation](https://neo4j.com/docs)\n   - [Neo4j Community](https://community.neo4j.com)\n   - [Neo4j GitHub](https://github.com/neo4j)\n2. Tutorials\n   - [Getting Started Guide](https://neo4j.com/start)\n   - [Cypher Query Language](https://neo4j.com/cypher)\n3. Tools\n   - Neo4j Desktop\n   - Neo4j Browser\n   - Neo4j Bloom\n\n## Lists with Inline Formatting\n\n- **Bold item** with regular text\n- *Italic item* with regular text\n- \\`Code item\\` with regular text\n- Regular text with **bold**, *italic*, and \\`code\\`\n- Combination: **bold and *italic* text** together\n`;\n\nexport const Component = () => {\n  return (\n    <div className=\"max-w-4xl\">\n      <Response>{listsMarkdown}</Response>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -0,0 +1,61 @@
+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';
+import { useEffect, useState } from 'react';
+const StreamingComponent = () => {
+    const [content, setContent] = useState('');
+    useEffect(() => {
+        const fullContent = `
+# Streaming Response
+
+This content is being **streamed (and here's a long long long long bold text)** to simulate an AI response.
+
+It handles:
+1. Partial updates
+2. Incomplete markdown
+3. Code blocks
+
+\`\`\`javascript
+function stream() {
+  return "streaming...";
+}
+\`\`\`
+And here comes more text after the code block.`;
+        let currentIndex = 0;
+        const interval = setInterval(() => {
+            if (currentIndex < fullContent.length) {
+                setContent(fullContent.slice(0, currentIndex + 1));
+                currentIndex++;
+            }
+            else {
+                clearInterval(interval);
+            }
+        }, 30);
+        return () => clearInterval(interval);
+    }, []);
+    return _jsx(Response, { children: content });
+};
+export const Component = () => {
+    return _jsx(StreamingComponent, {});
+};
+export default Component;
+//# sourceMappingURL=response-streaming.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"response-streaming.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-streaming.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;+CAeuB,CAAC;QAE5C,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,IAAI,YAAY,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;gBACtC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC;gBACnD,YAAY,EAAE,CAAC;YACjB,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAC,QAAQ,cAAE,OAAO,GAAY,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,KAAC,kBAAkB,KAAG,CAAC;AAChC,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';\nimport { useEffect, useState } from 'react';\n\nconst StreamingComponent = () => {\n  const [content, setContent] = useState('');\n\n  useEffect(() => {\n    const fullContent = `\n# Streaming Response\n\nThis content is being **streamed (and here's a long long long long bold text)** to simulate an AI response.\n\nIt handles:\n1. Partial updates\n2. Incomplete markdown\n3. Code blocks\n\n\\`\\`\\`javascript\nfunction stream() {\n  return \"streaming...\";\n}\n\\`\\`\\`\nAnd here comes more text after the code block.`;\n\n    let currentIndex = 0;\n    const interval = setInterval(() => {\n      if (currentIndex < fullContent.length) {\n        setContent(fullContent.slice(0, currentIndex + 1));\n        currentIndex++;\n      } else {\n        clearInterval(interval);\n      }\n    }, 30);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return <Response>{content}</Response>;\n};\n\nexport const Component = () => {\n  return <StreamingComponent />;\n};\n\nexport default Component;\n"]}