@lobehub/chat 1.117.0 → 1.118.0

package/AGENTS.md

@@ -0,0 +1,133 @@
+# LobeChat Development Guidelines
+
+This document serves as a comprehensive guide for all team members when developing LobeChat.
+
+## Tech Stack
+
+Built with modern technologies:
+
+- **Frontend**: Next.js 15, React 19, TypeScript
+- **UI Components**: Ant Design, @lobehub/ui, antd-style
+- **State Management**: Zustand, SWR
+- **Database**: PostgreSQL, PGLite, Drizzle ORM
+- **Testing**: Vitest, Testing Library
+- **Package Manager**: pnpm (monorepo structure)
+- **Build Tools**: Next.js (Turbopack in dev, Webpack in prod), Vitest
+
+## Directory Structure
+
+The project follows a well-organized monorepo structure:
+
+- `apps/` - Main applications
+- `packages/` - Shared packages and libraries
+- `src/` - Main source code
+- `docs/` - Documentation
+- `.cursor/rules/` - Development rules and guidelines
+
+## Development Workflow
+
+### Git Workflow
+
+- Use rebase for git pull: `git pull --rebase`
+- Git commit messages should prefix with gitmoji
+- Git branch name format: `username/feat/feature-name`
+- Use `.github/PULL_REQUEST_TEMPLATE.md` for PR descriptions
+
+### Package Management
+
+- Use `pnpm` as the primary package manager
+- Use `bun` to run npm scripts
+- Use `bunx` to run executable npm packages
+- Navigate to specific packages using `cd packages/<package-name>`
+
+### Code Style Guidelines
+
+#### TypeScript
+
+- Follow strict TypeScript practices for type safety and code quality
+- Use proper type annotations
+- Prefer interfaces over types for object shapes
+- Use generics for reusable components
+
+#### React Components
+
+- Use functional components with hooks
+- Follow the component structure guidelines
+- Use antd-style & @lobehub/ui for styling
+- Implement proper error boundaries
+
+#### Database Schema
+
+- Follow Drizzle ORM naming conventions
+- Use plural snake_case for table names
+- Implement proper foreign key relationships
+- Follow the schema style guide
+
+### Testing Strategy
+
+**Required Rule**: `testing-guide/testing-guide.mdc`
+
+**Commands**:
+
+- Web: `bunx vitest run --silent='passed-only' '[file-path-pattern]'`
+- Packages: `cd packages/[package-name] && bunx vitest run --silent='passed-only' '[file-path-pattern]'`
+
+**Important Notes**:
+
+- Wrap file paths in single quotes to avoid shell expansion
+- Never run `bun run test` - this runs all tests and takes ~10 minutes
+- If a test fails twice, stop and ask for help
+- Always add tests for new code
+
+### Type Checking
+
+- Use `bun run type-check` to check for type errors
+- Ensure all TypeScript errors are resolved before committing
+
+### Internationalization
+
+- Add new keys to `src/locales/default/namespace.ts`
+- Translate at least `zh-CN` files for development preview
+- Use hierarchical nested objects, not flat keys
+- Don't run `pnpm i18n` manually (handled by CI)
+
+## Available Development Rules
+
+The project provides comprehensive rules in `.cursor/rules/` directory:
+
+### Core Development
+
+- `backend-architecture.mdc` - Three-layer architecture and data flow
+- `react-component.mdc` - Component patterns and UI library usage
+- `drizzle-schema-style-guide.mdc` - Database schema conventions
+- `define-database-model.mdc` - Model templates and CRUD patterns
+- `i18n.mdc` - Internationalization workflow
+
+### State Management & UI
+
+- `zustand-slice-organization.mdc` - Store organization patterns
+- `zustand-action-patterns.mdc` - Action implementation patterns
+- `packages/react-layout-kit.mdc` - Flex layout component usage
+
+### Testing & Quality
+
+- `testing-guide/testing-guide.mdc` - Comprehensive testing strategy
+- `code-review.mdc` - Code review process and standards
+
+### Desktop (Electron)
+
+- `desktop-feature-implementation.mdc` - Main/renderer process patterns
+- `desktop-local-tools-implement.mdc` - Tool integration workflow
+- `desktop-menu-configuration.mdc` - Menu system configuration
+- `desktop-window-management.mdc` - Window management patterns
+- `desktop-controller-tests.mdc` - Controller testing guide
+
+## Best Practices
+
+- **Conservative for existing code, modern approaches for new features**
+- **Code Language**: Use Chinese for files with existing Chinese comments, American English for new files
+- Always add tests for new functionality
+- Follow the established patterns in the codebase
+- Use proper error handling and logging
+- Implement proper accessibility features
+- Consider internationalization from the start

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 1.118.0](https://github.com/lobehub/lobe-chat/compare/v1.117.1...v1.118.0)
+
+<sup>Released on **2025-08-29**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new provider AkashChat.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add new provider AkashChat, closes [#8923](https://github.com/lobehub/lobe-chat/issues/8923) ([2f3bf0f](https://github.com/lobehub/lobe-chat/commit/2f3bf0f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.117.1](https://github.com/lobehub/lobe-chat/compare/v1.117.0...v1.117.1)
+
+<sup>Released on **2025-08-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Move chat item into chat.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Move chat item into chat, closes [#8970](https://github.com/lobehub/lobe-chat/issues/8970) ([e09817e](https://github.com/lobehub/lobe-chat/commit/e09817e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 1.117.0](https://github.com/lobehub/lobe-chat/compare/v1.116.4...v1.117.0)
 
 <sup>Released on **2025-08-29**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "features": [
+        "Add new provider AkashChat."
+      ]
+    },
+    "date": "2025-08-29",
+    "version": "1.118.0"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Move chat item into chat."
+      ]
+    },
+    "date": "2025-08-29",
+    "version": "1.117.1"
+  },
   {
     "children": {
       "features": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.117.0",
+  "version": "1.118.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -300,7 +300,6 @@
     "@types/chroma-js": "^3.1.1",
     "@types/crypto-js": "^4.2.2",
     "@types/debug": "^4.1.12",
-    "@types/diff": "^8.0.0",
     "@types/fs-extra": "^11.0.4",
     "@types/ip": "^1.1.3",
     "@types/json-schema": "^7.0.15",

package/packages/model-runtime/src/akashchat/index.ts

@@ -0,0 +1,43 @@
+import { ModelProvider } from '../types';
+import { processMultiProviderModelList } from '../utils/modelParse';
+import { createOpenAICompatibleRuntime } from '../utils/openaiCompatibleFactory';
+
+export interface AkashChatModelCard {
+  id: string;
+}
+
+export const LobeAkashChatAI = createOpenAICompatibleRuntime({
+  baseURL: 'https://chatapi.akash.network/api/v1',
+  chatCompletion: {
+    handlePayload: (payload) => {
+      const { model, ...rest } = payload;
+
+      return {
+        ...rest,
+        model,
+        stream: true,
+      } as any;
+    },
+  },
+  debug: {
+    chatCompletion: () => process.env.DEBUG_AKASH_CHAT_COMPLETION === '1',
+  },
+  models: async ({ client }) => {
+    try {
+      const modelsPage = (await client.models.list()) as any;
+      const rawList: any[] = modelsPage.data || [];
+
+      // Remove `created` field from each model item
+      const modelList: AkashChatModelCard[] = rawList.map(({ created, ...rest }) => rest);
+
+      return await processMultiProviderModelList(modelList, 'akashchat');
+    } catch (error) {
+      console.warn(
+        'Failed to fetch AkashChat models. Please ensure your AkashChat API key is valid:',
+        error,
+      );
+      return [];
+    }
+  },
+  provider: ModelProvider.AkashChat,
+});

package/packages/model-runtime/src/index.ts

@@ -1,3 +1,4 @@
+export { LobeAkashChatAI } from './akashchat';
 export { LobeAnthropicAI } from './anthropic';
 export { LobeAzureAI } from './azureai';
 export { LobeAzureOpenAI } from './azureOpenai';

package/packages/model-runtime/src/openai/__snapshots__/index.test.ts.snap

@@ -366,7 +366,7 @@ exports[`LobeOpenAI > models > should get models 1`] = `
     "maxOutput": undefined,
     "reasoning": false,
     "releasedAt": "2022-12-16",
-    "type": "chat",
+    "type": "embedding",
     "vision": false,
   },
   {

package/packages/model-runtime/src/runtimeMap.ts

@@ -2,6 +2,7 @@ import { LobeAi21AI } from './ai21';
 import { Lobe302AI } from './ai302';
 import { LobeAi360AI } from './ai360';
 import { LobeAiHubMixAI } from './aihubmix';
+import { LobeAkashChatAI } from './akashchat';
 import { LobeAnthropicAI } from './anthropic';
 import { LobeAzureOpenAI } from './azureOpenai';
 import { LobeAzureAI } from './azureai';
@@ -61,6 +62,7 @@ export const providerRuntimeMap = {
   ai302: Lobe302AI,
   ai360: LobeAi360AI,
   aihubmix: LobeAiHubMixAI,
+  akashchat: LobeAkashChatAI,
   anthropic: LobeAnthropicAI,
   azure: LobeAzureOpenAI,
   azureai: LobeAzureAI,

package/packages/model-runtime/src/types/type.ts

@@ -32,6 +32,7 @@ export enum ModelProvider {
   Ai302 = 'ai302',
   Ai360 = 'ai360',
   AiHubMix = 'aihubmix',
+  AkashChat = 'akashchat',
   Anthropic = 'anthropic',
   Azure = 'azure',
   AzureAI = 'azureai',

package/packages/model-runtime/src/utils/modelParse.ts

@@ -118,6 +118,14 @@ export const IMAGE_MODEL_KEYWORDS = [
   '^V_1',
 ] as const;
 
+// 嵌入模型关键词配置
+export const EMBEDDING_MODEL_KEYWORDS = [
+  'embedding',
+  'embed',
+  'bge',
+  'm3e',
+] as const;
+
 /**
  * 检测关键词列表是否匹配模型ID（支持多种匹配模式）
  * @param modelId 模型ID（小写）
@@ -278,7 +286,12 @@ const processModelCard = (
       IMAGE_MODEL_KEYWORDS.map((k) => k.toLowerCase()),
     )
       ? 'image'
-      : 'chat');
+      : isKeywordListMatch(
+        model.id.toLowerCase(),
+        EMBEDDING_MODEL_KEYWORDS.map((k) => k.toLowerCase()),
+      )
+        ? 'embedding'
+        : 'chat');
 
   // image model can't find parameters
   if (modelType === 'image' && !model.parameters && !knownModel?.parameters) {

package/packages/types/src/user/settings/keyVaults.ts

@@ -41,6 +41,7 @@ export interface UserKeyVaults extends SearchEngineKeyVaults {
   ai302?: OpenAICompatibleKeyVault;
   ai360?: OpenAICompatibleKeyVault;
   aihubmix?: OpenAICompatibleKeyVault;
+  akashchat?: OpenAICompatibleKeyVault;
   anthropic?: OpenAICompatibleKeyVault;
   azure?: AzureOpenAIKeyVault;
   azureai?: AzureOpenAIKeyVault;

package/src/app/[variants]/(main)/settings/llm/ProviderList/providers.tsx

@@ -4,6 +4,7 @@ import {
   Ai21ProviderCard,
   Ai302ProviderCard,
   Ai360ProviderCard,
+  AkashChatProviderCard,
   AnthropicProviderCard,
   BaichuanProviderCard,
   CohereProviderCard,
@@ -113,6 +114,7 @@ export const useProviderList = (): ProviderItem[] => {
       GiteeAIProviderCard,
       PPIOProviderCard,
       InfiniAIProviderCard,
+      AkashChatProviderCard,
       Ai302ProviderCard,
     ],
     [

package/src/components/ChatItem/ChatItem.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { memo, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Actions from './components/Actions';
+import Avatar from './components/Avatar';
+import BorderSpacing from './components/BorderSpacing';
+import ErrorContent from './components/ErrorContent';
+import MessageContent from './components/MessageContent';
+import Title from './components/Title';
+import { useStyles } from './style';
+import type { ChatItemProps } from './type';
+
+const MOBILE_AVATAR_SIZE = 32;
+
+const ChatItem = memo<ChatItemProps>(
+  ({
+    avatarAddon,
+    onAvatarClick,
+    avatarProps,
+    actions,
+    className,
+    primary,
+    loading,
+    message,
+    placeholderMessage = '...',
+    placement = 'left',
+    variant = 'bubble',
+    avatar,
+    error,
+    showTitle,
+    time,
+    editing,
+    onChange,
+    onEditingChange,
+    messageExtra,
+    renderMessage,
+    text,
+    errorMessage,
+    onDoubleClick,
+    fontSize,
+    aboveMessage,
+    belowMessage,
+    markdownProps,
+    actionsWrapWidth = 54,
+    ...rest
+  }) => {
+    const { mobile } = useResponsive();
+    const { cx, styles } = useStyles({
+      editing,
+      placement,
+      primary,
+      showTitle,
+      time,
+      title: avatar.title,
+      variant,
+    });
+
+    // 在 ChatItem 组件中添加
+    const contentRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(
+      variant === 'bubble' ? 'horizontal' : 'vertical',
+    );
+
+    // 使用 ResizeObserver 监控内容和容器尺寸
+    useEffect(() => {
+      if (variant === 'docs') {
+        setLayoutMode('vertical');
+        return;
+      }
+
+      if (!contentRef.current || !containerRef.current) return;
+
+      const observer = new ResizeObserver(() => {
+        if (!contentRef.current || !containerRef.current) return;
+
+        const containerWidth = containerRef.current.clientWidth;
+        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度
+
+        // 预留给Actions的最小空间 (根据实际Actions大小调整)
+
+        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局
+        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');
+      });
+
+      observer.observe(contentRef.current);
+      observer.observe(containerRef.current);
+
+      return () => observer.disconnect();
+    }, [variant, actionsWrapWidth]);
+
+    return (
+      <Flexbox
+        className={cx(styles.container, className)}
+        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+        gap={mobile ? 6 : 12}
+        {...rest}
+      >
+        <Avatar
+          {...avatarProps}
+          addon={avatarAddon}
+          alt={avatarProps?.alt || avatar.title || 'avatar'}
+          avatar={avatar}
+          loading={loading}
+          onClick={onAvatarClick}
+          placement={placement}
+          size={mobile ? MOBILE_AVATAR_SIZE : undefined}
+          style={{
+            marginTop: 6,
+            ...avatarProps?.style,
+          }}
+        />
+        <Flexbox
+          align={placement === 'left' ? 'flex-start' : 'flex-end'}
+          className={styles.messageContainer}
+          ref={containerRef}
+        >
+          <Title avatar={avatar} placement={placement} showTitle={showTitle} time={time} />
+          {aboveMessage}
+          <Flexbox
+            align={placement === 'left' ? 'flex-start' : 'flex-end'}
+            className={styles.messageContent}
+            data-layout={layoutMode} // 添加数据属性以方便样式选择
+            direction={
+              layoutMode === 'horizontal'
+                ? placement === 'left'
+                  ? 'horizontal'
+                  : 'horizontal-reverse'
+                : 'vertical'
+            }
+            gap={8}
+          >
+            <Flexbox ref={contentRef} width={'100%'}>
+              {error && (message === placeholderMessage || !message) ? (
+                <ErrorContent error={error} message={errorMessage} placement={placement} />
+              ) : (
+                <MessageContent
+                  editing={editing}
+                  fontSize={fontSize}
+                  markdownProps={markdownProps}
+                  message={message}
+                  messageExtra={
+                    <>
+                      {error && (
+                        <ErrorContent error={error} message={errorMessage} placement={placement} />
+                      )}
+                      {messageExtra}
+                    </>
+                  }
+                  onChange={onChange}
+                  onDoubleClick={onDoubleClick}
+                  onEditingChange={onEditingChange}
+                  placement={placement}
+                  primary={primary}
+                  renderMessage={renderMessage}
+                  text={text}
+                  variant={variant}
+                />
+              )}
+            </Flexbox>
+            {actions && (
+              <Actions
+                actions={actions}
+                editing={editing}
+                placement={placement}
+                variant={variant}
+              />
+            )}
+          </Flexbox>
+          {belowMessage}
+        </Flexbox>
+        {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default ChatItem;
+
+export type { ChatItemProps } from './type';

package/src/components/ChatItem/components/Actions.tsx

@@ -0,0 +1,25 @@
+import { type Ref, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface ActionsProps {
+  actions: ChatItemProps['actions'];
+  editing?: boolean;
+  placement?: ChatItemProps['placement'];
+  ref?: Ref<HTMLDivElement>;
+  variant?: ChatItemProps['variant'];
+}
+
+const Actions = memo<ActionsProps>(({ actions, placement, variant, editing, ref }) => {
+  const { styles } = useStyles({ editing, placement, variant });
+
+  return (
+    <Flexbox align={'flex-start'} className={styles.actions} ref={ref} role="menubar">
+      {actions}
+    </Flexbox>
+  );
+});
+
+export default Actions;

package/src/components/ChatItem/components/Avatar.tsx

@@ -0,0 +1,50 @@
+import { Avatar as A } from '@lobehub/ui';
+import { type CSSProperties, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import type { ChatItemProps } from '../type';
+import Loading from './Loading';
+
+export interface AvatarProps {
+  addon?: ChatItemProps['avatarAddon'];
+  alt?: string;
+  avatar: ChatItemProps['avatar'];
+  loading?: ChatItemProps['loading'];
+  onClick?: ChatItemProps['onAvatarClick'];
+  placement?: ChatItemProps['placement'];
+  size?: number;
+  style?: CSSProperties;
+  unoptimized?: boolean;
+}
+
+const Avatar = memo<AvatarProps>(
+  ({ loading, avatar, placement, unoptimized, addon, onClick, size = 40, style, alt }) => {
+    const { styles } = useStyles({ avatarSize: size });
+    const avatarContent = (
+      <div className={styles.avatarContainer} style={style}>
+        <A
+          alt={alt || avatar.title}
+          animation={loading}
+          avatar={avatar.avatar}
+          background={avatar.backgroundColor}
+          onClick={onClick}
+          size={size}
+          title={avatar.title}
+          unoptimized={unoptimized}
+        />
+        <Loading loading={loading} placement={placement} />
+      </div>
+    );
+
+    if (!addon) return avatarContent;
+    return (
+      <Flexbox align={'center'} className={styles.avatarGroupContainer} gap={8}>
+        {avatarContent}
+        {addon}
+      </Flexbox>
+    );
+  },
+);
+
+export default Avatar;

package/src/components/ChatItem/components/BorderSpacing.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+export interface BorderSpacingProps {
+  borderSpacing?: number;
+}
+
+const BorderSpacing = memo<BorderSpacingProps>(({ borderSpacing }) => {
+  if (!borderSpacing) return null;
+
+  return <div style={{ flex: 'none', width: borderSpacing }} />;
+});
+
+export default BorderSpacing;

package/src/components/ChatItem/components/ErrorContent.tsx

@@ -0,0 +1,24 @@
+import { Alert } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface ErrorContentProps {
+  error?: ChatItemProps['error'];
+  message?: ChatItemProps['errorMessage'];
+  placement?: ChatItemProps['placement'];
+}
+
+const ErrorContent = memo<ErrorContentProps>(({ message, error, placement }) => {
+  const { styles } = useStyles({ placement });
+
+  return (
+    <Flexbox className={styles.errorContainer}>
+      <Alert closable={false} extra={message} showIcon type={'error'} {...error} />
+    </Flexbox>
+  );
+});
+
+export default ErrorContent;

package/src/components/ChatItem/components/Loading.tsx

@@ -0,0 +1,26 @@
+import { Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface LoadingProps {
+  loading?: ChatItemProps['loading'];
+  placement?: ChatItemProps['placement'];
+}
+
+const Loading = memo<LoadingProps>(({ loading, placement }) => {
+  const { styles } = useStyles({ placement });
+
+  if (!loading) return null;
+
+  return (
+    <Flexbox align={'center'} className={styles.loading} justify={'center'}>
+      <Icon icon={Loader2} size={{ size: 12, strokeWidth: 3 }} spin />
+    </Flexbox>
+  );
+});
+
+export default Loading;

package/src/components/ChatItem/components/MessageContent.tsx

@@ -0,0 +1,76 @@
+import { MarkdownProps } from '@lobehub/ui';
+import { EditableMessage } from '@lobehub/ui/chat';
+import { useResponsive } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface MessageContentProps {
+  editing?: ChatItemProps['editing'];
+  fontSize?: number;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  message?: ReactNode;
+  messageExtra?: ChatItemProps['messageExtra'];
+  onChange?: ChatItemProps['onChange'];
+  onDoubleClick?: ChatItemProps['onDoubleClick'];
+  onEditingChange?: ChatItemProps['onEditingChange'];
+  placement?: ChatItemProps['placement'];
+  primary?: ChatItemProps['primary'];
+  renderMessage?: ChatItemProps['renderMessage'];
+  text?: ChatItemProps['text'];
+  variant?: ChatItemProps['variant'];
+}
+
+const MessageContent = memo<MessageContentProps>(
+  ({
+    editing,
+    onChange,
+    onEditingChange,
+    text,
+    message,
+    placement,
+    messageExtra,
+    renderMessage,
+    variant,
+    primary,
+    onDoubleClick,
+    fontSize,
+    markdownProps,
+  }) => {
+    const { cx, styles } = useStyles({ editing, placement, primary, variant });
+    const { mobile } = useResponsive();
+
+    const content = (
+      <EditableMessage
+        classNames={{ input: styles.editingInput }}
+        editButtonSize={'small'}
+        editing={editing}
+        fontSize={fontSize}
+        fullFeaturedCodeBlock
+        markdownProps={markdownProps}
+        onChange={onChange}
+        onEditingChange={onEditingChange}
+        openModal={mobile ? editing : undefined}
+        text={text}
+        value={message ? String(message) : ''}
+      />
+    );
+    const messageContent = renderMessage ? renderMessage(content) : content;
+
+    return (
+      <Flexbox
+        className={cx(styles.message, editing && styles.editingContainer)}
+        onDoubleClick={onDoubleClick}
+      >
+        {messageContent}
+        {messageExtra && !editing ? (
+          <div className={styles.messageExtra}>{messageExtra}</div>
+        ) : null}
+      </Flexbox>
+    );
+  },
+);
+
+export default MessageContent;

package/src/components/ChatItem/components/Title.tsx

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface TitleProps {
+  avatar: ChatItemProps['avatar'];
+  placement?: ChatItemProps['placement'];
+  showTitle?: ChatItemProps['showTitle'];
+  time?: ChatItemProps['time'];
+}
+
+const formatTime = (time: number): string => {
+  const now = dayjs();
+  const target = dayjs(time);
+
+  if (target.isSame(now, 'day')) {
+    return target.format('HH:mm:ss');
+  } else if (target.isSame(now, 'year')) {
+    return target.format('MM-DD HH:mm:ss');
+  } else {
+    return target.format('YYYY-MM-DD HH:mm:ss');
+  }
+};
+
+const Title = memo<TitleProps>(({ showTitle, placement, time, avatar }) => {
+  const { styles } = useStyles({ placement, showTitle, time });
+
+  return (
+    <Flexbox
+      className={styles.name}
+      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+      gap={4}
+    >
+      {showTitle ? avatar.title || 'untitled' : undefined}
+      {time && <time>{formatTime(time)}</time>}
+    </Flexbox>
+  );
+});
+
+export default Title;

package/src/components/ChatItem/index.ts

@@ -0,0 +1,2 @@
+export { default as ChatItem } from './ChatItem';
+export type * from './type';

package/src/components/ChatItem/style.ts

@@ -0,0 +1,208 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(
+  (
+    { cx, css, token, responsive },
+    {
+      placement,
+      variant,
+      title,
+      avatarSize,
+      editing,
+      time,
+    }: {
+      avatarSize?: number;
+      editing?: boolean;
+      placement?: 'left' | 'right';
+      primary?: boolean;
+      showTitle?: boolean;
+      time?: number;
+      title?: string;
+      variant?: 'bubble' | 'docs';
+    },
+  ) => {
+    const blockStylish = css`
+      padding-block: 8px;
+      padding-inline: 12px;
+      border: 1px solid ${rgba(token.colorBorderSecondary, 0.66)};
+      border-radius: ${token.borderRadiusLG}px;
+
+      background-color: ${token.colorBgContainer};
+    `;
+
+    const rawStylish = css`
+      padding-block-start: ${title ? 0 : '6px'};
+    `;
+
+    const rawContainerStylish = css`
+      margin-block-end: -16px;
+      transition: background-color 100ms ${token.motionEaseOut};
+    `;
+
+    const typeStylish = variant === 'bubble' ? blockStylish : rawStylish;
+
+    const editingStylish =
+      editing &&
+      css`
+        width: 100%;
+      `;
+
+    return {
+      actions: cx(
+        css`
+          flex: none;
+          align-self: ${variant === 'bubble'
+            ? 'flex-end'
+            : placement === 'left'
+              ? 'flex-start'
+              : 'flex-end'};
+          justify-content: ${placement === 'left' ? 'flex-end' : 'flex-start'};
+        `,
+        editing &&
+          css`
+            pointer-events: none !important;
+            opacity: 0 !important;
+          `,
+      ),
+      avatarContainer: css`
+        position: relative;
+        flex: none;
+        width: ${avatarSize}px;
+        height: ${avatarSize}px;
+      `,
+      avatarGroupContainer: css`
+        width: ${avatarSize}px;
+      `,
+      container: cx(
+        variant === 'docs' && rawContainerStylish,
+        css`
+          position: relative;
+
+          width: 100%;
+          max-width: 100vw;
+          padding-block: 24px 12px;
+          padding-inline: 12px;
+
+          time {
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          div[role='menubar'] {
+            display: flex;
+          }
+
+          time,
+          div[role='menubar'] {
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 200ms ${token.motionEaseOut};
+          }
+
+          &:hover {
+            time,
+            div[role='menubar'] {
+              pointer-events: unset;
+              opacity: 1;
+            }
+          }
+
+          ${responsive.mobile} {
+            padding-block-start: ${variant === 'docs' ? '16px' : '12px'};
+            padding-inline: 8px;
+          }
+        `,
+      ),
+      editingContainer: cx(
+        editingStylish,
+        css`
+          padding-block: 8px 12px;
+          padding-inline: 12px;
+          border: 1px solid ${token.colorBorderSecondary};
+
+          &:active,
+          &:hover {
+            border-color: ${token.colorBorder};
+          }
+        `,
+        variant === 'docs' &&
+          css`
+            border-radius: ${token.borderRadius}px;
+            background: ${token.colorFillQuaternary};
+          `,
+      ),
+      editingInput: css`
+        width: 100%;
+      `,
+      errorContainer: css`
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+      `,
+
+      loading: css`
+        position: absolute;
+        inset-block-end: 0;
+        inset-inline: ${placement === 'right' ? '-4px' : 'unset'}
+          ${placement === 'left' ? '-4px' : 'unset'};
+
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+
+        color: ${token.colorBgLayout};
+
+        background: ${token.colorPrimary};
+      `,
+      message: cx(
+        typeStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+
+          ${responsive.mobile} {
+            width: 100%;
+          }
+        `,
+      ),
+      messageContainer: cx(
+        editingStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+          margin-block-start: ${time ? -16 : 0}px;
+
+          ${responsive.mobile} {
+            overflow-x: auto;
+          }
+        `,
+      ),
+      messageContent: cx(
+        editingStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+
+          ${responsive.mobile} {
+            flex-direction: column !important;
+          }
+        `,
+      ),
+      messageExtra: cx('message-extra'),
+      name: css`
+        pointer-events: none;
+
+        margin-block-end: 6px;
+
+        font-size: 12px;
+        line-height: 1;
+        color: ${token.colorTextDescription};
+        text-align: ${placement === 'left' ? 'left' : 'right'};
+      `,
+    };
+  },
+);

package/src/components/ChatItem/type.ts

@@ -0,0 +1,80 @@
+import { AlertProps, AvatarProps, DivProps, MarkdownProps } from '@lobehub/ui';
+import { EditableMessageProps, MetaData } from '@lobehub/ui/chat';
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+
+export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange'> {
+  aboveMessage?: ReactNode;
+  /**
+   * @description Actions to be displayed in the chat item
+   */
+  actions?: ReactNode;
+  actionsWrapWidth?: number;
+  /**
+   * @description Metadata for the avatar
+   */
+  avatar: MetaData;
+  avatarAddon?: ReactNode;
+  avatarProps?: AvatarProps;
+  belowMessage?: ReactNode;
+  /**
+   * @description Whether the chat item is in editing mode
+   */
+  editing?: boolean;
+  /**
+   * @description Props for Error render
+   */
+  error?: AlertProps;
+  errorMessage?: ReactNode;
+  fontSize?: number;
+  /**
+   * @description Whether the chat item is in loading state
+   */
+  loading?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  /**
+   * @description The message content of the chat item
+   */
+  message?: ReactNode;
+  messageExtra?: ReactNode;
+  onAvatarClick?: () => void;
+  /**
+   * @description Callback when the message content changes
+   * @param value - The new message content
+   */
+  onChange?: (value: string) => void;
+  onDoubleClick?: DivProps['onDoubleClick'];
+  /**
+   * @description Callback when the editing mode changes
+   * @param editing - The new editing mode
+   */
+  onEditingChange?: (editing: boolean) => void;
+  /**
+   * @default "..."
+   */
+  placeholderMessage?: string;
+  /**
+   * @description The placement of the chat item
+   * @default 'left'
+   */
+  placement?: 'left' | 'right';
+  /**
+   * @description Whether the chat item is primary
+   */
+  primary?: boolean;
+  renderMessage?: (content: ReactNode) => ReactNode;
+  /**
+   * @description Whether to show the title of the chat item
+   */
+  showTitle?: boolean;
+  text?: EditableMessageProps['text'];
+  /**
+   * @description The timestamp of the chat item
+   */
+  time?: number;
+  /**
+   * @description The type of the chat item
+   * @default 'bubble'
+   */
+  variant?: 'bubble' | 'docs';
+}

package/src/config/aiModels/akashchat.ts

@@ -0,0 +1,84 @@
+import { AIChatModelCard } from '@/types/aiModel';
+
+const akashChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 65_536,
+    description:
+      'DeepSeek V3.1：下一代推理模型，提升了复杂推理与链路思考能力，适合需要深入分析的任务。',
+    displayName: 'DeepSeek V3.1',
+    enabled: true,
+    id: 'DeepSeek-V3-1',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 65_536,
+    displayName: 'DeepSeek R1 Distill Qwen 32B',
+    id: 'DeepSeek-R1-Distill-Qwen-32B',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description: 'GPT-OSS-120B MXFP4 量化的 Transformer 结构，在资源受限时仍能保持强劲性能。',
+    displayName: 'GPT-OSS-120B',
+    enabled: true,
+    id: 'gpt-oss-120b',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+    },
+    contextWindowTokens: 262_144,
+    description:
+      'Qwen3 235B A22B Instruct 2507：面向高级推理与对话指令优化的模型，混合专家架构以在大规模参数下保持推理效率。',
+    displayName: 'Qwen3 235B A22B Instruct 2507',
+    id: 'Qwen3-235B-A22B-Instruct-2507-FP8',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      vision: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'Llama 4 Maverick：基于 Mixture-of-Experts 的大规模模型，提供高效的专家激活策略以在推理中表现优异。',
+    displayName: 'Llama 4 Maverick (17Bx128E)',
+    id: 'Meta-Llama-4-Maverick-17B-128E-Instruct-FP8',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+    },
+    contextWindowTokens: 131_072,
+    description: 'Llama 3.3 70B：通用性强的 Transformer 模型，适用于对话和生成任务。',
+    displayName: 'Llama 3.3 70B',
+    id: 'Meta-Llama-3-3-70B-Instruct',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+    },
+    contextWindowTokens: 131_072,
+    displayName: 'Llama 3.1 8B',
+    id: 'Meta-Llama-3-1-8B-Instruct-FP8',
+    type: 'chat',
+  },
+];
+export const allModels = [...akashChatModels];
+
+export default allModels;

package/src/config/aiModels/index.ts

@@ -4,6 +4,7 @@ import { default as ai21 } from './ai21';
 import { default as ai302 } from './ai302';
 import { default as ai360 } from './ai360';
 import { default as aihubmix } from './aihubmix';
+import { default as akashchat } from './akashchat';
 import { default as anthropic } from './anthropic';
 import { default as azure } from './azure';
 import { default as azureai } from './azureai';
@@ -83,6 +84,7 @@ export const LOBE_DEFAULT_MODEL_LIST = buildDefaultModelList({
   ai302,
   ai360,
   aihubmix,
+  akashchat,
   anthropic,
   azure,
   azureai,
@@ -143,6 +145,7 @@ export { default as ai21 } from './ai21';
 export { default as ai302 } from './ai302';
 export { default as ai360 } from './ai360';
 export { default as aihubmix } from './aihubmix';
+export { default as akashchat } from './akashchat';
 export { default as anthropic } from './anthropic';
 export { default as azure } from './azure';
 export { default as azureai } from './azureai';

package/src/config/llm.ts

@@ -178,6 +178,9 @@ export const getLLMConfig = () => {
       ENABLED_AI302: z.boolean(),
       AI302_API_KEY: z.string().optional(),
 
+      ENABLED_AKASHCHAT: z.boolean(),
+      AKASHCHAT_API_KEY: z.string().optional(),
+
       ENABLED_AIHUBMIX: z.boolean(),
       AIHUBMIX_API_KEY: z.string().optional(),
     },
@@ -356,6 +359,9 @@ export const getLLMConfig = () => {
       ENABLED_AI302: !!process.env.AI302_API_KEY,
       AI302_API_KEY: process.env.AI302_API_KEY,
 
+      ENABLED_AKASHCHAT: !!process.env.AKASHCHAT_API_KEY,
+      AKASHCHAT_API_KEY: process.env.AKASHCHAT_API_KEY,
+
       ENABLED_AIHUBMIX: !!process.env.AIHUBMIX_API_KEY,
       AIHUBMIX_API_KEY: process.env.AIHUBMIX_API_KEY,
     },

package/src/config/modelProviders/akashchat.ts

@@ -0,0 +1,17 @@
+import { ModelProviderCard } from '@/types/llm';
+
+const AkashChat: ModelProviderCard = {
+  chatModels: [],
+  checkModel: 'Meta-Llama-3-1-8B-Instruct-FP8',
+  description: 'Akash 是一个无需许可的云资源市场，与传统云提供商相比，其定价具有竞争力。',
+  id: 'akashchat',
+  modelsUrl: 'https://chatapi.akash.network/documentation',
+  name: 'AkashChat',
+  settings: {
+    sdkType: 'openai',
+    showModelFetcher: true,
+  },
+  url: 'https://chatapi.akash.network/',
+};
+
+export default AkashChat;

package/src/config/modelProviders/index.ts

@@ -4,6 +4,7 @@ import Ai21Provider from './ai21';
 import Ai302Provider from './ai302';
 import Ai360Provider from './ai360';
 import AiHubMixProvider from './aihubmix';
+import AkashChatProvider from './akashchat';
 import AnthropicProvider from './anthropic';
 import AzureProvider from './azure';
 import AzureAIProvider from './azureai';
@@ -172,6 +173,7 @@ export const DEFAULT_MODEL_PROVIDER_LIST = [
   Ai360Provider,
   Search1APIProvider,
   InfiniAIProvider,
+  AkashChatProvider,
   QiniuProvider,
 ];
 
@@ -188,6 +190,7 @@ export { default as Ai21ProviderCard } from './ai21';
 export { default as Ai302ProviderCard } from './ai302';
 export { default as Ai360ProviderCard } from './ai360';
 export { default as AiHubMixProviderCard } from './aihubmix';
+export { default as AkashChatProviderCard } from './akashchat';
 export { default as AnthropicProviderCard } from './anthropic';
 export { default as AzureProviderCard } from './azure';
 export { default as AzureAIProviderCard } from './azureai';

package/src/features/ChatItem/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { ChatItemProps, ChatItem as ChatItemRaw } from '@lobehub/ui/chat';
 import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 
+import { ChatItemProps, ChatItem as ChatItemRaw } from '@/components/ChatItem';
 import { isDesktop } from '@/const/version';
 import { useElectronStore } from '@/store/electron';
 import { electronSyncSelectors } from '@/store/electron/selectors';