reachat 2.1.0-alpha.17 → 2.1.0-alpha.19

package/dist/stories/Chat.stories.tsx

@@ -1,25 +1,26 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
+import { IconButton } from 'reablocks';
+import { useState } from 'react';
+
+import type { Session } from 'reachat';
 import {
+  AppBar,
   Chat,
-  SessionMessages,
   ChatInput,
-  SessionMessagePanel,
   SessionMessage,
-  Session,
-  AppBar
+  SessionMessagePanel,
+  SessionMessages
 } from 'reachat';
-import {
-  fakeSessions,
-  sessionWithSources,
-  sessionsWithFiles
-} from './examples';
-import { useState } from 'react';
+import IconClose from './assets/close-fill.svg?react';
+import ReachatLogo from './assets/logo.svg?react';
 import Placeholder from './assets/placeholder.svg?react';
 import PlaceholderDark from './assets/placeholder-dark.svg?react';
-import ReachatLogo from './assets/logo.svg?react';
 import IconSearch from './assets/search.svg?react';
-import IconClose from './assets/close-fill.svg?react';
-import { IconButton } from 'reablocks';
+import {
+  fakeSessions,
+  sessionsWithFiles,
+  sessionWithSources
+} from './examples';
 
 export default {
   title: 'Demos/Chat',
@@ -235,8 +236,12 @@ export const WithAppBar = () => {
             content={
               <div className="flex items-center justify-between w-full">
                 <div className="flex-shrink-0">
-                  <IconButton size="small" variant="outline" className='rounded-full p-3'>
-                    <IconSearch className='w-4 h-4' />
+                  <IconButton
+                    size="small"
+                    variant="outline"
+                    className="rounded-full p-3"
+                  >
+                    <IconSearch className="w-4 h-4" />
                   </IconButton>
                 </div>
                 <div className="flex-grow flex justify-center items-center">
@@ -246,9 +251,9 @@ export const WithAppBar = () => {
                   <IconButton
                     variant="text"
                     size="small"
-                    className='rounded-full p-3'
+                    className="rounded-full p-3"
                   >
-                    <IconClose className='w-4 h-4' />
+                    <IconClose className="w-4 h-4" />
                   </IconButton>
                 </div>
               </div>

package/dist/stories/Markdown.stories.tsx

@@ -78,6 +78,177 @@ export const TableWithMarkdown: Story = {
   )
 };
 
+export const InlineAndCodeBlocks: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args}>
+        {`
+# Inline Code vs Code Blocks
+
+## Inline Code Examples
+
+Use inline code when referencing code elements within sentences:
+
+- Call the \`useState\` hook to manage component state
+- Import the component with \`import { Button } from 'reablocks'\`
+- Set the variable using \`const name = 'John'\`
+- The function \`calculateTotal()\` returns a number
+- Access the property with \`user.email\`
+- Use the className \`bg-blue-500\` for styling
+
+You can also use inline code for short commands like \`npm install\` or file paths like \`/src/components/App.tsx\`.
+
+## Code Block Examples
+
+Use code blocks for multi-line code snippets:
+\`\`\`
+Hello, world!
+\`\`\`
+
+### TypeScript/React Component
+
+\`\`\`typescript
+import { useState } from 'react';
+import { Button } from 'reablocks';
+
+interface UserProps {
+  name: string;
+  email: string;
+}
+
+export const UserProfile = ({ name, email }: UserProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div className="p-4 border rounded">
+      <h2>{name}</h2>
+      <p>{email}</p>
+      <Button onClick={() => setIsEditing(!isEditing)}>
+        {isEditing ? 'Save' : 'Edit'}
+      </Button>
+    </div>
+  );
+};
+\`\`\`
+
+### JavaScript
+
+\`\`\`javascript
+function fetchUserData(userId) {
+  return fetch(\`/api/users/\${userId}\`)
+    .then(response => response.json())
+    .then(data => {
+      console.log('User data:', data);
+      return data;
+    })
+    .catch(error => {
+      console.error('Error fetching user:', error);
+    });
+}
+\`\`\`
+
+### Python
+
+\`\`\`python
+def calculate_total(items):
+    total = sum(item['price'] * item['quantity'] for item in items)
+    return round(total, 2)
+
+items = [
+    {'name': 'Book', 'price': 12.99, 'quantity': 2},
+    {'name': 'Pen', 'price': 1.50, 'quantity': 5}
+]
+
+print(f"Total: $\{calculate_total(items)}")
+\`\`\`
+
+### JSON
+
+\`\`\`json
+{
+  "name": "reachat",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.3.0",
+    "reablocks": "^8.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+\`\`\`
+
+### CSS/Tailwind
+
+\`\`\`css
+.chat-bubble {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.chat-bubble:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+\`\`\`
+
+### Bash/Shell
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Run tests
+npm test
+\`\`\`
+
+### SQL
+
+\`\`\`sql
+SELECT
+  u.id,
+  u.name,
+  u.email,
+  COUNT(o.id) as order_count
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.created_at > '2024-01-01'
+GROUP BY u.id, u.name, u.email
+ORDER BY order_count DESC
+LIMIT 10;
+\`\`\`
+
+## Mixed Usage
+
+You can combine inline code and code blocks in the same content:
+
+To create a new React component, first import \`React\` and \`useState\`:
+
+\`\`\`tsx
+import React, { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+};
+\`\`\`
+
+Then use it in your app by importing it with \`import { Counter } from './Counter'\` and rendering \`<Counter />\` in your JSX.
+`}
+      </Markdown>
+    </div>
+  )
+};
+
 export const AllMarkdownFeatures: Story = {
   render: args => (
     <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">

package/dist/theme.d.ts

@@ -59,6 +59,7 @@ export interface ChatTheme {
                 th: string;
                 td: string;
                 code: string;
+                inlineCode: string;
                 toolbar: string;
                 li: string;
                 ul: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reachat",
-  "version": "2.1.0-alpha.17",
+  "version": "2.1.0-alpha.19",
   "description": "Chat UI for Building LLMs",
   "scripts": {
     "build-storybook": "storybook build",