Lobe UI

https://ui.lobehub.com/components/chat/
Admin
Lobe UI is a comprehensive component library providing AIGC-focused React components for building...
Tokens:15,813
Snippets:72
Trust Score:9.7
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Lobe UI with Bun

Source: https://ui.lobehub.com/components/chat/index

This command installs the Lobe UI package using the Bun package manager. Ensure you have Bun installed on your system before running this command.

```bash
$ bun add @lobehub/ui
```

--------------------------------

### Basic TSX Setup with Lobe UI Components

Source: https://ui.lobehub.com/components/chat/index

This TSX code snippet demonstrates the basic setup for using Lobe UI components. It includes importing necessary components like ThemeProvider, Button, and I18nProvider, and setting up internationalization resources.

```tsx
import { ThemeProvider, Button, I18nProvider } from '@lobehub/ui'
import allResources from '@lobehub/ui/i18n/resources/all'

export default () => (
  <I18nProvider resources={allResources}>
    <ThemeProvider>
      <Button>Hello AIGC</Button>
    </ThemeProvider>
  </I18nProvider>
)
```

--------------------------------

### Handle Temperature Scaling (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Shows an example of how the `buildAnthropicPayload` function processes the `temperature` parameter. While this test case doesn't assert the exact output related to temperature, it confirms the function can accept and process it.

```typescript
it('should correctly handle temperature scaling', async () => {
    const payload: ChatStreamPayload = {
      messages: [{ content: 'Hello', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 1.0,
    };

    const result = await instance['buildAnthropicPayload'](payload);

    // Further assertions about temperature would go here if needed
  });
```

--------------------------------

### Using dayjs fromNow Function

Source: https://ui.lobehub.com/components/chat/chat-list

Demonstrates how to use the `fromNow` function from the `dayjs` library to display relative time differences. This requires `dayjs` to be installed and imported.

```javascript
dayjs().fromNow(); // 获取当前时间的相对时间
dayjs('2021-05-01').fromNow(); // 获取给定时间的相对时间
```

--------------------------------

### MessageInput Component Example

Source: https://ui.lobehub.com/components/chat/message-input

A basic example of the MessageInput component in action. It displays a simple text input with default confirm and cancel buttons. This snippet illustrates the fundamental usage and appearance.

```jsx
<MessageInput />
```

--------------------------------

### Import ChatItem Component (React)

Source: https://ui.lobehub.com/components/chat/chat-item

Demonstrates how to import the ChatItem component from the '@lobehub/ui/chat' package in a React application. This is the primary step to start using the component.

```javascript
import { ChatItem } from '@lobehub/ui/chat';
```

--------------------------------

### Import ChatList Component

Source: https://ui.lobehub.com/components/chat/chat-list

This snippet shows how to import the ChatList component from the '@lobehub/ui/chat' library. Ensure the library is installed in your project.

```typescript
import { ChatList } from '@lobehub/ui/chat';
```

--------------------------------

### Import EditableMessage Component

Source: https://ui.lobehub.com/components/chat/editable-message

This snippet shows how to import the EditableMessage component from the '@lobehub/ui/chat' package. Ensure the package is installed in your project.

```javascript
import { EditableMessage } from '@lobehub/ui/chat';
```

--------------------------------

### Render Markdown Math and Mermaid Diagrams

Source: https://ui.lobehub.com/components/chat/editable-message

Demonstrates the support for rendering mathematical equations using inline and block math syntax, as well as rendering diagrams using Mermaid syntax.

```markdown
## Math
Inline math: E=mc2E = mc^2E=mc2
Block math:
∑i=1ni=n(n+1)2sum_{i=1}^{n} i = rac{n(n+1)}{2}i=1∑ni=2n(n+1)
## Mermaid
mermaid

```

--------------------------------

### Use budget_tokens in Thinking Mode (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Shows how `budget_tokens` is used to calculate `max_tokens` when `thinking` mode is enabled and `budget_tokens` is provided. The final `max_tokens` will be the sum of `budget_tokens` and the default or provided `max_tokens`.

```typescript
it('should use budget_tokens in thinking mode when provided', async () => {
    const payload: ChatStreamPayload = {
      max_tokens: 1000,
      messages: [{ content: 'Solve this problem', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.5,
      thinking: { type: 'enabled', budget_tokens: 2000 },
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result).toEqual({
      max_tokens: 3000, // budget_tokens + max_tokens
      messages: [
        {
          content: [
            { cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
          ],
          role: 'user',
        },
      ],
      model: 'claude-3-haiku-20240307',
      thinking: { type: 'enabled', budget_tokens: 2000 },
    });
  });
```

--------------------------------

### Import LoadingDots Component

Source: https://ui.lobehub.com/components/chat/loading-dots

Demonstrates how to import the LoadingDots component from the '@lobehub/ui/chat' package. This is the primary step to use the component in your project.

```javascript
import { LoadingDots } from '@lobehub/ui/chat';
```

--------------------------------

### Build Anthropic Payload with Default Settings (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Demonstrates building an Anthropic payload with default settings, showcasing the expected structure for a basic user message. This function is crucial for interacting with Anthropic's language models.

```typescript
it('should build the anthropic payload correctly', async () => {
    const payload: ChatStreamPayload = {
      messages: [{ content: 'Solve this problem', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.7,
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result).toEqual({
      max_tokens: 64000,
      messages: [
        {
          content: [
            { cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
          ],
          role: 'user',
        },
      ],
      model: 'claude-3-haiku-20240307',
      thinking: { type: 'enabled', budget_tokens: 0 },
    });
  });
```

--------------------------------

### Import MessageInput Component

Source: https://ui.lobehub.com/components/chat/message-input

Demonstrates how to import the MessageInput component from the '@lobehub/ui/chat' library. This is the primary step to use the component in your project.

```javascript
import { MessageInput } from '@lobehub/ui/chat';
```

--------------------------------

### Import TokenTag Component

Source: https://ui.lobehub.com/components/chat/token-tag

Imports the TokenTag component from the '@lobehub/ui/chat' library. This is a prerequisite for using the component in your application.

```javascript
import { TokenTag } from '@lobehub/ui/chat';
```

--------------------------------

### Render Markdown Tables and Code Blocks

Source: https://ui.lobehub.com/components/chat/editable-message

Illustrates how the Markdown component handles table rendering with headers and content, and displays inline code and multi-line code blocks with syntax highlighting.

```markdown
## Code
Inline `code` and code blocks:
JavaScript
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

## Tables
Feature| Status  
---|---  
Markdown| ✅  
Syntax Highlighting| ✅
```

--------------------------------

### Cap max_tokens at 64000 in Thinking Mode (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Demonstrates the capping mechanism for `max_tokens` when `thinking` mode is enabled and the combined value of `budget_tokens` and `max_tokens` exceeds 64000. The `max_tokens` will be set to the maximum allowed value of 64000.

```typescript
it('should cap max_tokens at 64000 in thinking mode', async () => {
    const payload: ChatStreamPayload = {
      max_tokens: 10000,
      messages: [{ content: 'Solve this problem', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.6,
      thinking: { type: 'enabled', budget_tokens: 60000 },
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result).toEqual({
      max_tokens: 64000, // capped at 64000
      messages: [
        {
          content: [
            { cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
          ],
          role: 'user',
        },
      ],
      model: 'claude-3-haiku-20240307',
      thinking: { type: 'enabled', budget_tokens: 60000 },
    });
  });
```

--------------------------------

### Import BackBottom Component (JavaScript)

Source: https://ui.lobehub.com/components/chat/back-bottom

This snippet shows how to import the BackBottom component from the '@lobehub/ui/chat' library. This is the first step to using the component in your React application.

```javascript
import { BackBottom } from '@lobehub/ui/chat';
```

--------------------------------

### Render Markdown with Formatting

Source: https://ui.lobehub.com/components/chat/editable-message

Demonstrates the rendering capabilities of the Markdown component within EditableMessage, including text formatting like bold, italic, strikethrough, subscripts, superscripts, and long paragraphs with specific spacing properties.

```markdown
# Markdown Showcase
## Text Formatting
**Bold** , _italic_ , _**bold italic**_ , ~~strikethrough~~
This is subscript and superscript
## Long Paragraph Example
This is the first paragraph demonstrating the text-box-trim and text-edge properties. In modern web design, typography plays a crucial role in creating readable and visually appealing content. When browsers support the text-box-trim property, we can achieve more precise control over vertical spacing, eliminating unnecessary whitespace that can affect the overall layout.
This is the second paragraph showing how margin-inline-start and margin-inline-end create horizontal spacing for paragraphs. By setting appropriate inline margins, we can create visual separation between paragraphs while maintaining a clean, structured appearance. This approach is particularly effective for long-form content like articles, documentation, and blog posts.
This is the third paragraph illustrating the line-height property set to 2. A generous line height significantly improves readability by providing more breathing room between lines of text. This spacing reduces visual fatigue and makes it easier for readers to follow along, especially when reading extended passages of text.
This is the fourth paragraph explaining the text-box-trim: trim-both property. When supported by the browser, this CSS feature automatically trims the leading and trailing whitespace of text boxes, allowing for more precise control over paragraph spacing. Combined with text-edge: cap alphabetic, we can achieve professional typographic alignment.
This is the fifth paragraph discussing practical applications of these typography techniques. These styling approaches are particularly well-suited for displaying long articles, blog content, technical documentation, and any scenario where excellent readability is essential. Proper spacing and line height can transform dense text into an enjoyable reading experience.
This is the sixth paragraph covering the separation of concerns in typography. Paragraph spacing is controlled through margin-block-start and margin-block-end, while horizontal spacing uses margin-inline-start and margin-inline-end. This separation provides flexibility in controlling layout effects independently, allowing designers to fine-tune the visual presentation.
This is the seventh paragraph exploring modern CSS capabilities. New CSS features like text-box-trim and text-edge give us unprecedented control over text rendering. These properties enable more precise typographic control, helping us achieve professional-grade layouts that were previously difficult to implement with traditional CSS approaches.
This is the eighth paragraph demonstrating the visual effect of multiple paragraphs. Each paragraph benefits from appropriate horizontal margins and a line-height of 2, creating a comfortable reading rhythm. This design approach proves highly effective in long-form reading scenarios, where user comfort and comprehension are paramount.
This is the ninth paragraph emphasizing the importance of typography in user experience. Text formatting is not merely a technical concern but a fundamental component of user experience design. Well-crafted typography helps users understand content more easily, reduces reading burden, and enhances overall usability. This is why attention to these details matters.
This is the tenth and final paragraph concluding our exploration of paragraph styling. Through thoughtful spacing and line-height settings, we can create text layouts that are both aesthetically pleasing and highly functional. This design approach deserves consideration and application in real-world projects where readability and user experience are priorities.
```

--------------------------------

### Import ChatInputArea Component

Source: https://ui.lobehub.com/components/chat/chat-input-area

This snippet shows how to import the ChatInputArea component from the '@lobehub/ui/chat' library. This is the primary step to use the component in your React application.

```javascript
import { ChatInputArea } from '@lobehub/ui/chat';
```

--------------------------------

### Respect max_tokens in Thinking Mode (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Illustrates how the `buildAnthropicPayload` function respects the `max_tokens` parameter when the `thinking` mode is enabled. This ensures that the model's output length is constrained as specified.

```typescript
it('should respect max_tokens in thinking mode when provided', async () => {
    const payload: ChatStreamPayload = {
      max_tokens: 1000,
      messages: [{ content: 'Solve this problem', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.7,
      thinking: { type: 'enabled', budget_tokens: 0 },
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result).toEqual({
      max_tokens: 1000,
      messages: [
        {
          content: [
            { cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
          ],
          role: 'user',
        },
      ],
      model: 'claude-3-haiku-20240307',
      thinking: { type: 'enabled', budget_tokens: 0 },
    });
  });
```

--------------------------------

### Import ChatHeader Component

Source: https://ui.lobehub.com/components/chat/chat-header

This snippet shows how to import the ChatHeader component from the '@lobehub/ui/chat' library. This is the primary step to use the component in your React application.

```javascript
import { ChatHeader } from '@lobehub/ui/chat';
```

--------------------------------

### Render Markdown Lists and Task Lists

Source: https://ui.lobehub.com/components/chat/editable-message

Showcases the rendering of unordered, ordered, and nested lists, as well as task lists (completed and incomplete) within the Markdown component.

```markdown
## Lists
  * Unordered list
  * Another item 
    * Nested item


  1. Ordered list
  2. Another item 
    1. Nested item


## Task Lists
  * Completed task
  * Incomplete task
```

--------------------------------

### Handle Disabled Context Caching (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Demonstrates how the `buildAnthropicPayload` function handles the `enabledContextCaching` flag. When set to `false`, it ensures that the `cache_control` property is not added to the system message, and the helper function `buildAnthropicMessages` is called with the correct option.

```typescript
it('should handle disabling context caching', async () => {
    const payload: ChatStreamPayload = {
      enabledContextCaching: false,
      messages: [
        { content: 'You are a helpful assistant', role: 'system' },
        { content: 'Hello', role: 'user' },
      ],
      model: 'claude-3-haiku-20240307',
      temperature: 0.7,
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result.system?.[0].cache_control).toBeUndefined();

    // Verify buildAnthropicMessages was called with correct enabledContextCaching
    expect(anthropicHelpers.buildAnthropicMessages).toHaveBeenCalledWith(
      [{ content: 'Hello', role: 'user' }],
      { enabledContextCaching: false }
    );
  });
```

--------------------------------

### Set max_tokens for Claude-3 Models (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Verifies that the `buildAnthropicPayload` function correctly sets `max_tokens` to 4096 for Claude-3 models like 'claude-3-haiku-20240307' when `max_tokens` is not explicitly provided.

```typescript
it('should set correct max_tokens based on model for claude-3 models', async () => {
    const payload: ChatStreamPayload = {
      messages: [{ content: 'Hello', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.7,
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result.max_tokens).toBe(4096);
  });
```

--------------------------------

### Respect Explicitly Provided max_tokens (TypeScript)

Source: https://ui.lobehub.com/components/chat/chat-item

Shows that if `max_tokens` is explicitly set in the payload, the `buildAnthropicPayload` function will use that value, overriding any default model-specific settings.

```typescript
it('should respect max_tokens when explicitly provided', async () => {
    const payload: ChatStreamPayload = {
      max_tokens: 2000,
      messages: [{ content: 'Hello', role: 'user' }],
      model: 'claude-3-haiku-20240307',
      temperature: 0.7,
    };

    const result = await instance['buildAnthropicPayload'](payload);

    expect(result.max_tokens).toBe(2000);
  });
```

--------------------------------

### Import MessageModal Component

Source: https://ui.lobehub.com/components/chat/message-modal

This snippet shows how to import the MessageModal component from the '@lobehub/ui/chat' package. This is the primary step to use the component in your React application.

```javascript
import { MessageModal } from '@lobehub/ui/chat';
```

--------------------------------

### Chat Input Area Component Properties

Source: https://ui.lobehub.com/components/chat/editable-message

This section details the properties available for configuring the Chat Input Area component, including styling, behavior, and event handling.

```APIDOC
## Chat Input Area Component Properties

### Description
This component provides an input area for chat messages, with options for editing, markdown support, and modal display.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **className** (`string`) - Optional - Additional CSS class for the component.
- **classNames** (`MessageInputProps['classNames'] & { input?: string; markdown?: string; }`) - Optional - Custom CSS class names for subcomponents.
- **defaultValue** (`string`) - Optional - Initial value for uncontrolled mode.
- **editButtonSize** (`MessageInputProps['editButtonSize']`) - Optional - Size of the edit button.
- **editing** (`boolean`) - Optional - Whether the component is in editing state. Defaults to `false`.
- **fontSize** (`number`) - Optional - Font size for the text content.
- **fullFeaturedCodeBlock** (`boolean`) - Optional - Whether to enable full code block features. Defaults to `false`.
- **height** (`MessageInputProps['height']`) - Optional - Height of the input area.
- **markdownProps** (`Omit<MarkdownProps, 'className' | 'style' | 'children'>`) - Optional - Props for the Markdown component.
- **model** (`{ extra?: MessageModalProps['extra']; footer?: MessageModalProps['footer']; }`) - Optional - Configuration for the message modal.
- **onChange** (`(value: string) => void`) - Optional - Callback when content changes.
- **onEditingChange** (`(editing: boolean) => void`) - Optional - Callback when editing state changes.
- **onOpenChange** (`(open: boolean) => void`) - Optional - Callback when modal open state changes.
- **openModal** (`boolean`) - Optional - Whether to display in modal mode. Defaults to `false`.
- **placeholder** (`string`) - Optional - Placeholder text when content is empty.
- **showEditWhenEmpty** (`boolean`) - Optional - Whether to show edit button when content is empty. Defaults to `false`.
- **style** (`CSSProperties`) - Optional - Custom CSS styles for the component.
- **styles** (`MessageInputProps['styles'] & { input?: CSSProperties; markdown?: CSSProperties; }`) - Optional - Custom CSS styles for subcomponents.
- **text** (`MessageModalProps['text']`) - Optional - Customizable text strings.
- **value** (`string`) - Required - Content value.
- **variant** (`MessageInputProps['variant']`) - Optional - Visual style of the editor.

### Request Example
```json
{
  "value": "This is the chat message content.",
  "placeholder": "Type your message here...",
  "onChange": "(value) => console.log(value)"
}
```

### Response
#### Success Response (200)
- **N/A** (Component Properties)

#### Response Example
N/A (Component Properties)
```

--------------------------------

### ChatHeaderTitle API

Source: https://ui.lobehub.com/components/chat/chat-header

The ChatHeaderTitle component is used to display the main title and an optional description or tag within the ChatHeader.

```APIDOC
## ChatHeaderTitle

### Description
Displays the main title content, with optional support for a subtitle or description and a tag element.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **desc** (string | ReactNode) - Optional - Description or subtitle text.
- **tag** (ReactNode) - Optional - A tag element to be shown next to the title.
- **title** (string | ReactNode) - Required - The main title content.

### Request Example
```jsx
import { ChatHeaderTitle } from '@lobehub/ui/chat';

<ChatHeaderTitle
  desc="This is a subtitle"
  tag="New"
  title="Welcome"
/>
```

### Response
#### Success Response (Rendered Component)
- **N/A** (Component renders UI elements)

#### Response Example
(This is a component, so no direct response body. The rendered output is the UI.)

```
Tokens:
Raw