@neo4j-ndl/react 4.1.9 → 4.2.0

package/lib/esm/ai/response/stories/index.js

@@ -0,0 +1,43 @@
+/**
+ *
+ *  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/>.
+ */
+export { default as ResponseDefault } from './response-default.story';
+export { default as ResponseStreaming } from './response-streaming.story';
+export { default as ResponseAllComponents } from './response-all-components.story';
+export { default as ResponseCodeExamples } from './response-code-examples.story';
+export { default as ResponseHeadings } from './response-headings.story';
+export { default as ResponseLists } from './response-lists.story';
+export { default as ResponseFullExample } from './response-full-example.story';
+import { removeLicenseHeader } from '@neo4j-ndl/react/_common/export-stories-utils';
+import ResponseAllComponentsSourceRaw from './response-all-components.story?raw';
+import ResponseCodeExamplesSourceRaw from './response-code-examples.story?raw';
+import ResponseDefaultSourceRaw from './response-default.story?raw';
+import ResponseFullExampleSourceRaw from './response-full-example.story?raw';
+import ResponseHeadingsSourceRaw from './response-headings.story?raw';
+import ResponseListsSourceRaw from './response-lists.story?raw';
+import ResponseStreamingSourceRaw from './response-streaming.story?raw';
+export const ResponseDefaultSource = removeLicenseHeader(ResponseDefaultSourceRaw);
+export const ResponseStreamingSource = removeLicenseHeader(ResponseStreamingSourceRaw);
+export const ResponseAllComponentsSource = removeLicenseHeader(ResponseAllComponentsSourceRaw);
+export const ResponseCodeExamplesSource = removeLicenseHeader(ResponseCodeExamplesSourceRaw);
+export const ResponseHeadingsSource = removeLicenseHeader(ResponseHeadingsSourceRaw);
+export const ResponseListsSource = removeLicenseHeader(ResponseListsSourceRaw);
+export const ResponseFullExampleSource = removeLicenseHeader(ResponseFullExampleSourceRaw);
+//# sourceMappingURL=index.js.map

package/lib/esm/ai/response/stories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AACjF,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAC/E,OAAO,wBAAwB,MAAM,8BAA8B,CAAC;AACpE,OAAO,4BAA4B,MAAM,mCAAmC,CAAC;AAC7E,OAAO,yBAAyB,MAAM,+BAA+B,CAAC;AACtE,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAChE,OAAO,0BAA0B,MAAM,gCAAgC,CAAC;AAExE,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAC3D,6BAA6B,CAC9B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAC1D,4BAA4B,CAC7B,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\nexport { default as ResponseDefault } from './response-default.story';\nexport { default as ResponseStreaming } from './response-streaming.story';\nexport { default as ResponseAllComponents } from './response-all-components.story';\nexport { default as ResponseCodeExamples } from './response-code-examples.story';\nexport { default as ResponseHeadings } from './response-headings.story';\nexport { default as ResponseLists } from './response-lists.story';\nexport { default as ResponseFullExample } from './response-full-example.story';\n\nimport { removeLicenseHeader } from '@neo4j-ndl/react/_common/export-stories-utils';\n\nimport ResponseAllComponentsSourceRaw from './response-all-components.story?raw';\nimport ResponseCodeExamplesSourceRaw from './response-code-examples.story?raw';\nimport ResponseDefaultSourceRaw from './response-default.story?raw';\nimport ResponseFullExampleSourceRaw from './response-full-example.story?raw';\nimport ResponseHeadingsSourceRaw from './response-headings.story?raw';\nimport ResponseListsSourceRaw from './response-lists.story?raw';\nimport ResponseStreamingSourceRaw from './response-streaming.story?raw';\n\nexport const ResponseDefaultSource = removeLicenseHeader(\n  ResponseDefaultSourceRaw,\n);\nexport const ResponseStreamingSource = removeLicenseHeader(\n  ResponseStreamingSourceRaw,\n);\nexport const ResponseAllComponentsSource = removeLicenseHeader(\n  ResponseAllComponentsSourceRaw,\n);\nexport const ResponseCodeExamplesSource = removeLicenseHeader(\n  ResponseCodeExamplesSourceRaw,\n);\nexport const ResponseHeadingsSource = removeLicenseHeader(\n  ResponseHeadingsSourceRaw,\n);\nexport const ResponseListsSource = removeLicenseHeader(ResponseListsSourceRaw);\nexport const ResponseFullExampleSource = removeLicenseHeader(\n  ResponseFullExampleSourceRaw,\n);\n"]}

package/lib/esm/ai/response/stories/response-all-components.story.js

@@ -0,0 +1,225 @@
+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 comprehensiveMarkdown = `
+# All Markdown Components Demo
+
+This story demonstrates all the markdown components that the Response component can render.
+
+## Headings
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+## Text Formatting
+
+This is **bold text** and this is *italic text*.
+
+You can also use __bold__ and _italic_ with underscores.
+
+Combine them: **bold and *italic* together**.
+
+## Lists
+
+### Unordered Lists
+
+- Item 1
+- Item 2
+- Item 3
+  - Nested item 1
+  - Nested item 2
+    - Deeply nested item
+
+### Ordered Lists
+
+1. First item
+2. Second item
+3. Third item
+   1. Nested numbered item
+   2. Another nested item
+
+## Code
+
+### Inline Code
+
+Use \`const x = 5\` for inline code.
+
+### Code Blocks
+
+#### JavaScript
+
+\`\`\`javascript
+const greeting = "Hello World";
+console.log(greeting);
+
+function sayHello(name) {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+#### Python
+
+\`\`\`python
+def greet(name):
+    return f"Hello, {name}!"
+
+print(greet("World"))
+\`\`\`
+
+#### Cypher
+
+\`\`\`cypher
+MATCH (n:Person)-[:KNOWS]->(m:Person)
+WHERE n.name = "Alice"
+RETURN m.name
+\`\`\`
+
+#### TypeScript
+
+\`\`\`typescript
+interface User {
+  name: string;
+  age: number;
+}
+
+const user: User = {
+  name: "John",
+  age: 30
+};
+\`\`\`
+
+#### Without Language Specification
+
+\`\`\`
+Plain code block
+without syntax highlighting
+\`\`\`
+
+## Links
+
+Visit [Neo4j](https://neo4j.com) for more information.
+
+Multiple links: [Documentation](https://neo4j.com/docs) and [Community](https://community.neo4j.com)
+
+## Blockquotes
+
+> This is a blockquote.
+> It can span multiple lines.
+
+> ### Blockquote with heading
+> 
+> You can also include other markdown inside blockquotes.
+> 
+> - Like lists
+> - And other elements
+
+### Nested Blockquotes
+
+> Outer quote
+>> Nested quote
+>>> Deeply nested quote
+
+## Horizontal Rules
+
+Content above the rule
+
+---
+
+Content below the rule
+
+## Images
+
+![A smiling man](https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=)
+
+## Paragraphs
+
+This is a paragraph with multiple sentences. It demonstrates how regular text is rendered. You can write long-form content that spans multiple lines.
+
+Another paragraph here. Paragraphs are separated by blank lines in markdown.
+
+## Mixed Content Example
+
+Here's a practical example combining multiple elements:
+
+### Database Query Tutorial
+
+To query your Neo4j database, follow these steps:
+
+1. **Connect to your database**
+   
+   Use the following code:
+   
+   \`\`\`javascript
+   const driver = neo4j.driver(
+     'bolt://localhost:7687',
+     neo4j.auth.basic('neo4j', 'password')
+   );
+   \`\`\`
+
+2. **Write your Cypher query**
+   
+   \`\`\`cypher
+   MATCH (n:Movie)
+   WHERE n.released > 2000
+   RETURN n.title, n.released
+   ORDER BY n.released DESC
+   LIMIT 10
+   \`\`\`
+
+3. **Execute and process results**
+   
+   > **Note**: Always close your session after use!
+
+For more information, visit the [Neo4j Documentation](https://neo4j.com/docs).
+
+---
+
+## Special Characters and Escaping
+
+You can escape special characters: \\* \\_ \\[ \\]
+
+## Preformatted Text
+
+Use code blocks for preformatted text with preserved spacing:
+
+\`\`\`
+    This text
+      has preserved
+        indentation
+\`\`\`
+
+| Item              | In Stock | Price |
+| :---------------- | :------: | ----: |
+| Python Hat        |   True   | 222222223.99 |
+| SQL Hat           |   True   | 23.99 |
+| Codecademy Tee    |  False   | 19.99 |
+| Codecademy Hoodie |  False   | 42.99 |
+`;
+export const Component = () => {
+    return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: comprehensiveMarkdown }) }));
+};
+export default Component;
+//# sourceMappingURL=response-all-components.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"response-all-components.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-all-components.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqM7B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,QAAQ,cAAE,qBAAqB,GAAY,GACxC,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 comprehensiveMarkdown = `\n# All Markdown Components Demo\n\nThis story demonstrates all the markdown components that the Response component can render.\n\n## Headings\n\n# Heading 1\n## Heading 2\n### Heading 3\n#### Heading 4\n##### Heading 5\n###### Heading 6\n\n## Text Formatting\n\nThis is **bold text** and this is *italic text*.\n\nYou can also use __bold__ and _italic_ with underscores.\n\nCombine them: **bold and *italic* together**.\n\n## Lists\n\n### Unordered Lists\n\n- Item 1\n- Item 2\n- Item 3\n  - Nested item 1\n  - Nested item 2\n    - Deeply nested item\n\n### Ordered Lists\n\n1. First item\n2. Second item\n3. Third item\n   1. Nested numbered item\n   2. Another nested item\n\n## Code\n\n### Inline Code\n\nUse \\`const x = 5\\` for inline code.\n\n### Code Blocks\n\n#### JavaScript\n\n\\`\\`\\`javascript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\nfunction sayHello(name) {\n  return \\`Hello, \\${name}!\\`;\n}\n\\`\\`\\`\n\n#### Python\n\n\\`\\`\\`python\ndef greet(name):\n    return f\"Hello, {name}!\"\n\nprint(greet(\"World\"))\n\\`\\`\\`\n\n#### Cypher\n\n\\`\\`\\`cypher\nMATCH (n:Person)-[:KNOWS]->(m:Person)\nWHERE n.name = \"Alice\"\nRETURN m.name\n\\`\\`\\`\n\n#### TypeScript\n\n\\`\\`\\`typescript\ninterface User {\n  name: string;\n  age: number;\n}\n\nconst user: User = {\n  name: \"John\",\n  age: 30\n};\n\\`\\`\\`\n\n#### Without Language Specification\n\n\\`\\`\\`\nPlain code block\nwithout syntax highlighting\n\\`\\`\\`\n\n## Links\n\nVisit [Neo4j](https://neo4j.com) for more information.\n\nMultiple links: [Documentation](https://neo4j.com/docs) and [Community](https://community.neo4j.com)\n\n## Blockquotes\n\n> This is a blockquote.\n> It can span multiple lines.\n\n> ### Blockquote with heading\n> \n> You can also include other markdown inside blockquotes.\n> \n> - Like lists\n> - And other elements\n\n### Nested Blockquotes\n\n> Outer quote\n>> Nested quote\n>>> Deeply nested quote\n\n## Horizontal Rules\n\nContent above the rule\n\n---\n\nContent below the rule\n\n## Images\n\n![A smiling man](https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=)\n\n## Paragraphs\n\nThis is a paragraph with multiple sentences. It demonstrates how regular text is rendered. You can write long-form content that spans multiple lines.\n\nAnother paragraph here. Paragraphs are separated by blank lines in markdown.\n\n## Mixed Content Example\n\nHere's a practical example combining multiple elements:\n\n### Database Query Tutorial\n\nTo query your Neo4j database, follow these steps:\n\n1. **Connect to your database**\n   \n   Use the following code:\n   \n   \\`\\`\\`javascript\n   const driver = neo4j.driver(\n     'bolt://localhost:7687',\n     neo4j.auth.basic('neo4j', 'password')\n   );\n   \\`\\`\\`\n\n2. **Write your Cypher query**\n   \n   \\`\\`\\`cypher\n   MATCH (n:Movie)\n   WHERE n.released > 2000\n   RETURN n.title, n.released\n   ORDER BY n.released DESC\n   LIMIT 10\n   \\`\\`\\`\n\n3. **Execute and process results**\n   \n   > **Note**: Always close your session after use!\n\nFor more information, visit the [Neo4j Documentation](https://neo4j.com/docs).\n\n---\n\n## Special Characters and Escaping\n\nYou can escape special characters: \\\\* \\\\_ \\\\[ \\\\]\n\n## Preformatted Text\n\nUse code blocks for preformatted text with preserved spacing:\n\n\\`\\`\\`\n    This text\n      has preserved\n        indentation\n\\`\\`\\`\n\n| Item              | In Stock | Price |\n| :---------------- | :------: | ----: |\n| Python Hat        |   True   | 222222223.99 |\n| SQL Hat           |   True   | 23.99 |\n| Codecademy Tee    |  False   | 19.99 |\n| Codecademy Hoodie |  False   | 42.99 |\n`;\n\nexport const Component = () => {\n  return (\n    <div className=\"max-w-4xl\">\n      <Response>{comprehensiveMarkdown}</Response>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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