@neo4j-ndl/react 4.16.7 → 4.16.9

package/skills/ndl-react/components/ai/response.md

@@ -0,0 +1,1109 @@
+# Response
+
+Import: `import { Response } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### Response
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `string` | ✅ |  | The response from the AI |
+| `isAnimating` | `boolean` |  |  | Whether the response is animating |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+## Examples
+
+### Default
+
+```tsx
+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 <Response>{markdownContent}</Response>;
+};
+
+export default Component;
+```
+
+### All Components
+
+```tsx
+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
+    - <h1>Nested nested heading</h1>
+
+### Ordered Lists
+
+1. First item
+2. Second item
+3. Third item
+   1. Nested numbered item
+   2. Another nested item
+   3. <h2>Nested nested heading</h2>
+
+## 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 (
+    <div className="max-w-4xl">
+      <Response>{comprehensiveMarkdown}</Response>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Code Examples
+
+```tsx
+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 (
+    <div className="max-w-4xl">
+      <Response>{codeExamplesMarkdown}</Response>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Full Example
+
+```tsx
+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<
+    {
+      role: 'user' | 'assistant';
+      content: string;
+      thinkingTime?: number;
+      done?: boolean;
+    }[]
+  >([]);
+  const [prompt, setPrompt] = useState('');
+  const [isThinking, setIsThinking] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [responseIndex, setResponseIndex] = useState(0);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isThinking]);
+
+  const handleCancel = () => {
+    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?.role === 'assistant') {
+        lastMessage.done = true;
+      }
+      return newMessages;
+    });
+  };
+
+  const handleSend = (overridePrompt?: string) => {
+    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 (
+    <section className="n-h-screen">
+      <div className="n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak">
+        <div className="n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3">
+          <div className="n-ml-auto">
+            <CleanIconButton description="settings" tooltipProps={{}}>
+              <Cog6ToothIconOutline />
+            </CleanIconButton>
+            <CleanIconButton description="close">
+              <XMarkIconOutline />
+            </CleanIconButton>
+          </div>
+        </div>
+        <div className="n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto">
+          {messages.length === 0 ? (
+            <div className="n-flex n-flex-col ">
+              <div className="n-flex n-flex-col n-gap-12">
+                <Typography variant="display">
+                  Hi [User], how can I help you today?
+                </Typography>
+                <div className="n-flex n-flex-col n-gap-4">
+                  <Typography variant="body-medium">Suggestions</Typography>
+                  <Suggestion
+                    isPrimary
+                    onClick={() => {
+                      handleSend('I want to import data');
+                    }}
+                  >
+                    I want to import data
+                  </Suggestion>
+                  <Suggestion
+                    onClick={() => {
+                      handleSend('Create an AI agent');
+                    }}
+                  >
+                    Create an AI agent
+                  </Suggestion>
+                  <Suggestion
+                    onClick={() => {
+                      handleSend('Invite project members');
+                    }}
+                  >
+                    Invite project members
+                  </Suggestion>
+                  <Suggestion
+                    onClick={() => {
+                      handleSend('Generate a report');
+                    }}
+                  >
+                    Generate a report
+                  </Suggestion>
+                </div>
+                <Typography variant="body-medium">
+                  You can also drag and drop files here, or{' '}
+                  <TextLink as="button" type="internal-underline">
+                    browse
+                  </TextLink>
+                  . Supports CVG, MOV, PDF
+                </Typography>
+              </div>
+            </div>
+          ) : (
+            <div className="n-flex n-flex-col n-gap-4 n-pb-4">
+              {messages.map((msg, idx) => (
+                <div
+                  key={idx}
+                  className={`n-flex ${
+                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'
+                  }`}
+                >
+                  {msg.role === 'user' ? (
+                    <div className="n-max-w-[85%]">
+                      <UserBubble
+                        avatarProps={{
+                          name: 'NM',
+                          type: 'letters',
+                        }}
+                      >
+                        {msg.content}
+                      </UserBubble>
+                    </div>
+                  ) : (
+                    <div className="n-w-full n-flex n-flex-col n-gap-2">
+                      {msg.thinkingTime !== undefined && (
+                        <Thinking
+                          isThinking={false}
+                          thinkingMs={msg.thinkingTime}
+                        />
+                      )}
+                      <div className="n-flex n-flex-col n-gap-2">
+                        <Response>{msg.content}</Response>
+
+                        {msg.done === true && (
+                          <div className="n-flex n-flex-row n-gap-1.5">
+                            <CleanIconButton size="small" description="Dislike">
+                              <HandThumbDownIconOutline />
+                            </CleanIconButton>
+                            <CleanIconButton size="small" description="Re-run">
+                              <ArrowPathIconOutline />
+                            </CleanIconButton>
+                            <CleanIconButton size="small" description="Copy">
+                              <Square2StackIconOutline />
+                            </CleanIconButton>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+              {isThinking && <Thinking isThinking={true} />}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+        <div className="n-px-4 n-pt-4 n-pb-1 n-mt-auto">
+          <Prompt
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onSubmitPrompt={() => handleSend()}
+            onCancelPrompt={handleCancel}
+            isRunningPrompt={isThinking || isStreaming}
+            isSubmitDisabled={
+              prompt.length === 0 && !(isThinking || isStreaming)
+            }
+            bottomContent={
+              <CleanIconButton description="Add files" size="small">
+                <PlusIconOutline />
+              </CleanIconButton>
+            }
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Component;
+```
+
+### Headings
+
+```tsx
+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 (
+    <div className="max-w-4xl">
+      <Response>{headingsMarkdown}</Response>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Lists
+
+```tsx
+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 (
+    <div className="max-w-4xl">
+      <Response>{listsMarkdown}</Response>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Streaming
+
+```tsx
+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 <Response>{content}</Response>;
+};
+
+export const Component = () => {
+  return <StreamingComponent />;
+};
+
+export default Component;
+```