前端代码初始化

DigitalHumanWeb/.bunfig.toml

@@ -0,0 +1,3 @@
+[install.lockfile]
+
+save = false

DigitalHumanWeb/.changelogrc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').changelog;

DigitalHumanWeb/.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').commitlint;

DigitalHumanWeb/.dockerignore

@@ -0,0 +1,9 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+.next
+.git
+.github
+*.md
+.env.example

DigitalHumanWeb/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

DigitalHumanWeb/.env.example

@@ -0,0 +1,195 @@
+# add a access code to lock your lobe-chat application, you can set a long password to avoid leaking. If this value contains a comma, it is a password array.
+# ACCESS_CODE=lobe66
+
+# Specify your API Key selection method, currently supporting `random` and `turn`.
+# API_KEY_SELECT_MODE=random
+
+
+########################################
+######## Model Provider Service ########
+########################################
+
+### OpenAI ###
+
+# you openai api key
+OPENAI_API_KEY=sk-xxxxxxxxx
+
+# use a proxy to connect to the OpenAI API
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+
+# add your custom model name, multi model separate by comma. for example gpt-3.5-1106,gpt-4-1106
+# OPENAI_MODEL_LIST=gpt-3.5-turbo
+
+
+### Azure OpenAI ###
+
+# you can learn azure OpenAI Service on https://learn.microsoft.com/en-us/azure/ai-services/openai/overview
+# use Azure OpenAI Service by uncomment the following line
+
+# The API key you applied for on the Azure OpenAI account page, which can be found in the "Keys and Endpoints" section.
+# AZURE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# The endpoint you applied for on the Azure OpenAI account page, which can be found in the "Keys and Endpoints" section.
+# AZURE_ENDPOINT=https://docs-test-001.openai.azure.com
+
+# Azure's API version, follows the YYYY-MM-DD format
+# AZURE_API_VERSION=2024-06-01
+
+
+### Anthropic Service ####
+
+# ANTHROPIC_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# use a proxy to connect to the Anthropic API
+# ANTHROPIC_PROXY_URL=https://api.anthropic.com
+
+
+### Google AI  ####
+
+# GOOGLE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+### AWS Bedrock  ###
+
+# AWS_REGION=us-east-1
+# AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxx
+# AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+### Ollama AI ####
+
+# You can use ollama to get and run LLM locally, learn more about it via https://github.com/ollama/ollama
+
+# The local/remote ollama service url
+# OLLAMA_PROXY_URL=http://127.0.0.1:11434
+
+# OLLAMA_MODEL_LIST=your_ollama_model_names
+
+
+### OpenRouter Service ###
+
+# OPENROUTER_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+# OPENROUTER_MODEL_LIST=model1,model2,model3
+
+
+### Mistral AI ###
+
+# MISTRAL_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Perplexity Service ###
+
+# PERPLEXITY_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Groq Service ####
+
+# GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+#### 01.AI Service ####
+
+# ZEROONE_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### TogetherAI Service ###
+
+# TOGETHERAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### ZhiPu AI ###
+
+# ZHIPU_API_KEY=xxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx
+
+### Moonshot AI  ####
+
+# MOONSHOT_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Minimax AI  ####
+
+# MINIMAX_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### DeepSeek AI  ####
+
+# DEEPSEEK_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Qwen AI  ####
+
+# QWEN_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### SiliconCloud AI  ####
+
+# SILICONCLOUD_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+########################################
+############ Market Service ############
+########################################
+
+# The LobeChat agents market index url
+# AGENTS_INDEX_URL=https://chat-agents.lobehub.com
+
+########################################
+############ Plugin Service ############
+########################################
+
+# The LobeChat plugins store index url
+# PLUGINS_INDEX_URL=https://chat-plugins.lobehub.com
+
+# set the plugin settings
+# the format is `plugin-identifier:key1=value1;key2=value2`, multiple settings fields are separated by semicolons `;`, multiple plugin settings are separated by commas `,`.
+# PLUGIN_SETTINGS=search-engine:SERPAPI_API_KEY=xxxxx
+
+
+########################################
+##### S3 Object Storage Service ########
+########################################
+
+# S3 keys
+#S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+#S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+
+# Bucket name
+#S3_BUCKET=lobechat
+
+# Bucket request endpoint
+#S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+
+# Public access domain for the bucket
+#S3_PUBLIC_DOMAIN=https://s3-for-lobechat.your-domain.com
+
+# Bucket region, such as us-west-1, generally not needed to add
+# but some service providers may require configuration
+# S3_REGION=us-west-1
+
+
+########################################
+############ Auth Service ##############
+########################################
+
+
+# Clerk related configurations
+
+# Clerk public key and secret key
+#NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
+#CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
+
+# you need to config the clerk webhook secret key if you want to use the clerk with database
+#CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+
+
+# NextAuth related configurations
+# NEXT_AUTH_SECRET=
+
+# Auth0 configurations
+# AUTH0_CLIENT_ID=
+# AUTH0_CLIENT_SECRET=
+# AUTH0_ISSUER=https://your-domain.auth0.com
+
+########################################
+########## Server Database #############
+########################################
+
+# Specify the service mode as server if you want to use the server database
+#NEXT_PUBLIC_SERVICE_MODE=server
+
+# Postgres database URL
+#DATABASE_URL=postgres://username:password@host:port/database
+
+# use `openssl rand -base64 32` to generate a key for the encryption of the database
+# we use this key to encrypt the user api key
+#KEY_VAULTS_SECRET=xxxxx/xxxxxxxxxxxxxx=

DigitalHumanWeb/.eslintignore

@@ -0,0 +1,31 @@
+# Eslintignore for LobeHub
+################################################################
+
+# dependencies
+node_modules
+
+# ci
+coverage
+.coverage
+
+# test
+jest*
+*.test.ts
+*.test.tsx
+
+# umi
+.umi
+.umi-production
+.umi-test
+.dumi/tmp*
+!.dumirc.ts
+
+# production
+dist
+es
+lib
+logs
+
+# misc
+# add other ignore file below
+.next

DigitalHumanWeb/.eslintrc.js

@@ -0,0 +1,37 @@
+const config = require('@lobehub/lint').eslint;
+
+config.extends.push('plugin:@next/next/recommended');
+
+config.rules['unicorn/no-negated-condition'] = 0;
+config.rules['unicorn/prefer-type-error'] = 0;
+config.rules['unicorn/prefer-logical-operator-over-ternary'] = 0;
+config.rules['unicorn/no-null'] = 0;
+config.rules['unicorn/no-typeof-undefined'] = 0;
+config.rules['unicorn/explicit-length-check'] = 0;
+config.rules['unicorn/prefer-code-point'] = 0;
+config.rules['no-extra-boolean-cast'] = 0;
+config.rules['unicorn/no-useless-undefined'] = 0;
+config.rules['react/no-unknown-property'] = 0;
+config.rules['unicorn/prefer-ternary'] = 0;
+config.rules['unicorn/prefer-spread'] = 0;
+config.rules['unicorn/catch-error-name'] = 0;
+config.rules['unicorn/no-array-for-each'] = 0;
+config.rules['unicorn/prefer-number-properties'] = 0;
+
+config.overrides = [
+  {
+    extends: ['plugin:mdx/recommended'],
+    files: ['*.mdx'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 1,
+      'no-undef': 0,
+      'react/jsx-no-undef': 0,
+      'react/no-unescaped-entities': 0,
+    },
+    settings: {
+      'mdx/code-blocks': false,
+    },
+  },
+];
+
+module.exports = config;

DigitalHumanWeb/.gitignore

@@ -0,0 +1,69 @@
+# Gitignore for LobeHub
+################################################################
+
+# general
+.DS_Store
+.idea
+.vscode
+.history
+.temp
+.env.local
+venv
+temp
+tmp
+
+# dependencies
+node_modules
+*.log
+*.lock
+package-lock.json
+
+# ci
+coverage
+.coverage
+.eslintcache
+.stylelintcache
+
+# production
+dist
+es
+lib
+logs
+test-output
+
+# umi
+.umi
+.umi-production
+.umi-test
+.dumi/tmp*
+
+# husky
+.husky/prepare-commit-msg
+
+# misc
+# add other ignore file below
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.next
+.env
+public/*.js
+public/sitemap.xml
+public/sitemap-index.xml
+bun.lockb
+sitemap*.xml
+robots.txt
+
+# Serwist
+public/sw*
+public/swe-worker*
+
+*.patch
+*.pdf

DigitalHumanWeb/.husky/pre-commit

@@ -0,0 +1 @@
+

DigitalHumanWeb/.i18nrc.js

@@ -0,0 +1,46 @@
+const { defineConfig } = require('@lobehub/i18n-cli');
+
+module.exports = defineConfig({
+  entry: 'locales/zh-CN',
+  entryLocale: 'zh-CN',
+  output: 'locales',
+  outputLocales: [
+    'ar',
+    'bg-BG',
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    'ko-KR',
+    'fr-FR',
+    'tr-TR',
+    'es-ES',
+    'pt-BR',
+    'de-DE',
+    'it-IT',
+    'nl-NL',
+    'pl-PL',
+    'vi-VN',
+  ],
+  temperature: 0,
+  modelName: 'gpt-4o-mini',
+  experimental: {
+    jsonMode: true,
+  },
+  markdown: {
+    // reference: '你需要保持 mdx 的组件格式，输出文本不需要在最外层包裹任何代码块语法',
+    entry: ['./README.zh-CN.md', './contributing/**/*.zh-CN.md', './docs/**/*.zh-CN.mdx'],
+    entryLocale: 'zh-CN',
+    outputLocales: ['en-US'],
+    exclude: ['./contributing/_Sidebar.md', './contributing/_Footer.md', './contributing/Home.md'],
+    outputExtensions: (locale, { filePath }) => {
+      if (filePath.includes('.mdx')) {
+        if (locale === 'en-US') return '.mdx';
+        return `.${locale}.mdx`;
+      } else {
+        if (locale === 'en-US') return '.md';
+        return `.${locale}.md`;
+      }
+    },
+  },
+});

DigitalHumanWeb/.npmrc

@@ -0,0 +1,19 @@
+lockfile=false
+resolution-mode=highest
+
+enable-pre-post-scripts=true
+
+public-hoist-pattern[]=*@umijs/lint*
+public-hoist-pattern[]=*changelog*
+public-hoist-pattern[]=*commitlint*
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*postcss*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*remark*
+public-hoist-pattern[]=*semantic-release*
+public-hoist-pattern[]=*stylelint*
+
+public-hoist-pattern[]=@auth/core
+public-hoist-pattern[]=@clerk/backend
+public-hoist-pattern[]=@clerk/types
+public-hoist-pattern[]=pdfjs-dist

DigitalHumanWeb/.nvmrc

@@ -0,0 +1 @@
+lts/iron

DigitalHumanWeb/.prettierignore

@@ -0,0 +1,63 @@
+# Prettierignore for LobeHub
+################################################################
+
+# general
+.DS_Store
+.editorconfig
+.idea
+.vscode
+.history
+.temp
+.env.local
+.husky
+.npmrc
+.gitkeep
+venv
+temp
+tmp
+LICENSE
+
+# dependencies
+node_modules
+*.log
+*.lock
+package-lock.json
+
+# ci
+coverage
+.coverage
+.eslintcache
+.stylelintcache
+test-output
+__snapshots__
+*.snap
+
+# production
+dist
+es
+lib
+logs
+
+# umi
+.umi
+.umi-production
+.umi-test
+.dumi/tmp*
+
+# ignore files
+.*ignore
+
+# docker
+docker
+Dockerfile*
+
+# image
+*.webp
+*.gif
+*.png
+*.jpg
+*.svg
+
+# misc
+# add other ignore file below
+.next

DigitalHumanWeb/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').prettier;

DigitalHumanWeb/.releaserc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').semanticRelease;

DigitalHumanWeb/.remarkrc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').remarklint;

DigitalHumanWeb/.seorc.cjs

@@ -0,0 +1,9 @@
+const { defineConfig } = require('@lobehub/seo-cli');
+
+module.exports = defineConfig({
+  entry: ['./docs/**/*.mdx'],
+  modelName: 'gpt-4o-mini',
+  experimental: {
+    jsonMode: true,
+  },
+});

DigitalHumanWeb/.stylelintrc.js

@@ -0,0 +1,9 @@
+const config = require('@lobehub/lint').stylelint;
+
+module.exports = {
+  ...config,
+  rules: {
+    'selector-id-pattern': null,
+    ...config.rules,
+  },
+};

DigitalHumanWeb/CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to participate in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community includes:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+## Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct that could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+<https://www.contributor-covenant.org/version/2/0/code_of_conduct.html>.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+For answers to common questions about this code of conduct, see the FAQ at
+<https://www.contributor-covenant.org/faq>. Translations are available at
+<https://www.contributor-covenant.org/translations>.
+
+[homepage]: https://www.contributor-covenant.org

DigitalHumanWeb/CONTRIBUTING.md

@@ -0,0 +1,88 @@
+# Lobe Chat - Contributing Guide 🌟
+
+We're thrilled that you want to contribute to Lobe Chat, the future of communication! 😄
+
+Lobe Chat is an open-source project, and we welcome your collaboration. Before you jump in, let's make sure you're all set to contribute effectively and have loads of fun along the way!
+
+## Table of Contents
+
+- [Fork the Repository](#fork-the-repository)
+- [Clone Your Fork](#clone-your-fork)
+- [Create a New Branch](#create-a-new-branch)
+- [Code Like a Wizard](#code-like-a-wizard)
+- [Committing Your Work](#committing-your-work)
+- [Sync with Upstream](#sync-with-upstream)
+- [Open a Pull Request](#open-a-pull-request)
+- [Review and Collaboration](#review-and-collaboration)
+- [Celebrate 🎉](#celebrate-)
+
+## Fork the Repository
+
+🍴 Fork this repository to your GitHub account by clicking the "Fork" button at the top right. This creates a personal copy of the project you can work on.
+
+## Clone Your Fork
+
+📦 Clone your forked repository to your local machine using the `git clone` command:
+
+```bash
+git clone https://github.com/YourUsername/lobe-chat.git
+```
+
+## Create a New Branch
+
+🌿 Create a new branch for your contribution. This helps keep your work organized and separate from the main codebase.
+
+```bash
+git checkout -b your-branch-name
+```
+
+Choose a meaningful branch name related to your work. It makes collaboration easier!
+
+## Code Like a Wizard
+
+🧙‍♀️ Time to work your magic! Write your code, fix bugs, or add new features. Be sure to follow our project's coding style. You can check if your code adheres to our style using:
+
+```bash
+pnpm lint
+```
+
+This adds a bit of enchantment to your coding experience! ✨
+
+## Committing Your Work
+
+📝 Ready to save your progress? Commit your changes to your branch.
+
+```bash
+git add .
+git commit -m "Your meaningful commit message"
+```
+
+Please keep your commits focused and clear. And remember to be kind to your fellow contributors; keep your commits concise.
+
+## Sync with Upstream
+
+⚙️ Periodically, sync your forked repository with the original (upstream) repository to stay up-to-date with the latest changes.
+
+```bash
+git remote add upstream https://github.com/lobehub/lobe-chat.git
+git fetch upstream
+git merge upstream/main
+```
+
+This ensures you're working on the most current version of Lobe Chat. Stay fresh! 💨
+
+## Open a Pull Request
+
+🚀 Time to share your contribution! Head over to the original Lobe Chat repository and open a Pull Request (PR). Our maintainers will review your work.
+
+## Review and Collaboration
+
+👓 Your PR will undergo thorough review and testing. The maintainers will provide feedback, and you can collaborate to make your contribution even better. We value teamwork!
+
+## Celebrate 🎉
+
+🎈 Congratulations! Your contribution is now part of Lobe Chat. 🥳
+
+Thank you for making Lobe Chat even more magical. We can't wait to see what you create! 🌠
+
+Happy Coding! 🚀🦄

DigitalHumanWeb/Dockerfile

@@ -0,0 +1,209 @@
+## Base image for all the stages
+FROM node:20-slim AS base
+
+ARG USE_CN_MIRROR
+
+ENV DEBIAN_FRONTEND="noninteractive"
+
+RUN \
+    # If you want to build docker in China, build with --build-arg USE_CN_MIRROR=true
+    if [ "${USE_CN_MIRROR:-false}" = "true" ]; then \
+        sed -i "s/deb.debian.org/mirrors.ustc.edu.cn/g" "/etc/apt/sources.list.d/debian.sources"; \
+    fi \
+    # Add required package & update base package
+    && apt update \
+    && apt install busybox proxychains-ng -qy \
+    && apt full-upgrade -qy \
+    && apt autoremove -qy --purge \
+    && apt clean -qy \
+    # Configure BusyBox
+    && busybox --install -s \
+    # Add nextjs:nodejs to run the app
+    && addgroup --system --gid 1001 nodejs \
+    && adduser --system --home "/app" --gid 1001 -uid 1001 nextjs \
+    # Set permission for nextjs:nodejs
+    && chown -R nextjs:nodejs "/etc/proxychains4.conf" \
+    # Cleanup temp files
+    && rm -rf /tmp/* /var/lib/apt/lists/* /var/tmp/*
+
+## Builder image, install all the dependencies and build the app
+FROM base AS builder
+
+ARG USE_CN_MIRROR
+
+ENV NEXT_PUBLIC_BASE_PATH=""
+
+# Sentry
+ENV NEXT_PUBLIC_SENTRY_DSN="" \
+    SENTRY_ORG="" \
+    SENTRY_PROJECT=""
+
+# Posthog
+ENV NEXT_PUBLIC_ANALYTICS_POSTHOG="" \
+    NEXT_PUBLIC_POSTHOG_HOST="" \
+    NEXT_PUBLIC_POSTHOG_KEY=""
+
+# Umami
+ENV NEXT_PUBLIC_ANALYTICS_UMAMI="" \
+    NEXT_PUBLIC_UMAMI_SCRIPT_URL="" \
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID=""
+
+# Node
+ENV NODE_OPTIONS="--max-old-space-size=8192"
+
+WORKDIR /app
+
+COPY package.json ./
+COPY .npmrc ./
+
+RUN \
+    # If you want to build docker in China, build with --build-arg USE_CN_MIRROR=true
+    if [ "${USE_CN_MIRROR:-false}" = "true" ]; then \
+        export SENTRYCLI_CDNURL="https://npmmirror.com/mirrors/sentry-cli"; \
+        npm config set registry "https://registry.npmmirror.com/"; \
+    fi \
+    # Set the registry for corepack
+    && export COREPACK_NPM_REGISTRY=$(npm config get registry | sed 's/\/$//') \
+    # Enable corepack
+    && corepack enable \
+    # Use pnpm for corepack
+    && corepack use pnpm \
+    # Install the dependencies
+    && pnpm i \
+    # Add sharp dependencies
+    && mkdir -p /deps \
+    && pnpm add sharp --prefix /deps
+
+COPY . .
+
+# run build standalone for docker version
+RUN npm run build:docker
+
+## Application image, copy all the files for production
+FROM scratch AS app
+
+COPY --from=builder /app/public /app/public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder /app/.next/standalone /app/
+COPY --from=builder /app/.next/static /app/.next/static
+COPY --from=builder /deps/node_modules/.pnpm /app/node_modules/.pnpm
+
+## Production image, copy all the files and run next
+FROM base
+
+# Copy all the files from app, set the correct permission for prerender cache
+COPY --from=app --chown=nextjs:nodejs /app /app
+
+ENV NODE_ENV="production" \
+    NODE_TLS_REJECT_UNAUTHORIZED=""
+
+# set hostname to localhost
+ENV HOSTNAME="0.0.0.0" \
+    PORT="3210"
+
+# General Variables
+ENV ACCESS_CODE="" \
+    API_KEY_SELECT_MODE="" \
+    DEFAULT_AGENT_CONFIG="" \
+    SYSTEM_AGENT="" \
+    FEATURE_FLAGS="" \
+    PROXY_URL=""
+
+# Model Variables
+ENV \
+    # AI21
+    AI21_API_KEY="" \
+    # Ai360
+    AI360_API_KEY="" \
+    # Anthropic
+    ANTHROPIC_API_KEY="" ANTHROPIC_PROXY_URL="" \
+    # Amazon Bedrock
+    AWS_ACCESS_KEY_ID="" AWS_SECRET_ACCESS_KEY="" AWS_REGION="" AWS_BEDROCK_MODEL_LIST="" \
+    # Azure OpenAI
+    AZURE_API_KEY="" AZURE_API_VERSION="" AZURE_ENDPOINT="" AZURE_MODEL_LIST="" \
+    # Baichuan
+    BAICHUAN_API_KEY="" \
+    # DeepSeek
+    DEEPSEEK_API_KEY="" \
+    # Fireworks AI
+    FIREWORKSAI_API_KEY="" FIREWORKSAI_MODEL_LIST="" \
+    # GitHub
+    GITHUB_TOKEN="" GITHUB_MODEL_LIST="" \
+    # Google
+    GOOGLE_API_KEY="" GOOGLE_PROXY_URL="" \
+    # Groq
+    GROQ_API_KEY="" GROQ_MODEL_LIST="" GROQ_PROXY_URL="" \
+    # Minimax
+    MINIMAX_API_KEY="" \
+    # Mistral
+    MISTRAL_API_KEY="" \
+    # Moonshot
+    MOONSHOT_API_KEY="" MOONSHOT_PROXY_URL="" \
+    # Novita
+    NOVITA_API_KEY="" NOVITA_MODEL_LIST="" \
+    # Ollama
+    OLLAMA_MODEL_LIST="" OLLAMA_PROXY_URL="" \
+    # OpenAI
+    OPENAI_API_KEY="" OPENAI_MODEL_LIST="" OPENAI_PROXY_URL="" \
+    # OpenRouter
+    OPENROUTER_API_KEY="" OPENROUTER_MODEL_LIST="" \
+    # Perplexity
+    PERPLEXITY_API_KEY="" PERPLEXITY_PROXY_URL="" \
+    # Qwen
+    QWEN_API_KEY="" QWEN_MODEL_LIST="" \
+    # SiliconCloud
+    SILICONCLOUD_API_KEY="" SILICONCLOUD_MODEL_LIST="" SILICONCLOUD_PROXY_URL="" \
+    # Spark
+    SPARK_API_KEY="" \
+    # Stepfun
+    STEPFUN_API_KEY="" \
+    # Taichu
+    TAICHU_API_KEY="" \
+    # TogetherAI
+    TOGETHERAI_API_KEY="" TOGETHERAI_MODEL_LIST="" \
+    # Upstage
+    UPSTAGE_API_KEY="" \
+    # 01.AI
+    ZEROONE_API_KEY="" ZEROONE_MODEL_LIST="" \
+    # Zhipu
+    ZHIPU_API_KEY="" ZHIPU_MODEL_LIST=""
+
+USER nextjs
+
+EXPOSE 3210/tcp
+
+CMD \
+    if [ -n "$PROXY_URL" ]; then \
+        # Set regex for IPv4
+        IP_REGEX="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$"; \
+        # Set proxychains command
+        PROXYCHAINS="proxychains -q"; \
+        # Parse the proxy URL
+        host_with_port="${PROXY_URL#*//}"; \
+        host="${host_with_port%%:*}"; \
+        port="${PROXY_URL##*:}"; \
+        protocol="${PROXY_URL%%://*}"; \
+        # Resolve to IP address if the host is a domain
+        if ! [[ "$host" =~ "$IP_REGEX" ]]; then \
+            nslookup=$(nslookup -q="A" "$host" | tail -n +3 | grep 'Address:'); \
+            if [ -n "$nslookup" ]; then \
+                host=$(echo "$nslookup" | tail -n 1 | awk '{print $2}'); \
+            fi; \
+        fi; \
+        # Generate proxychains configuration file
+        printf "%s\n" \
+            'localnet 127.0.0.0/255.0.0.0' \
+            'localnet ::1/128' \
+            'proxy_dns' \
+            'remote_dns_subnet 224' \
+            'strict_chain' \
+            'tcp_connect_time_out 8000' \
+            'tcp_read_time_out 15000' \
+            '[ProxyList]' \
+            "$protocol $host $port" \
+        > "/etc/proxychains4.conf"; \
+    fi; \
+    # Run the server
+    ${PROXYCHAINS} node "/app/server.js";

DigitalHumanWeb/Dockerfile.database

@@ -0,0 +1,245 @@
+## Base image for all the stages
+FROM node:20-slim AS base
+
+ARG USE_CN_MIRROR
+
+ENV DEBIAN_FRONTEND="noninteractive"
+
+RUN \
+    # If you want to build docker in China, build with --build-arg USE_CN_MIRROR=true
+    if [ "${USE_CN_MIRROR:-false}" = "true" ]; then \
+        sed -i "s/deb.debian.org/mirrors.ustc.edu.cn/g" "/etc/apt/sources.list.d/debian.sources"; \
+    fi \
+    # Add required package & update base package
+    && apt update \
+    && apt install busybox proxychains-ng -qy \
+    && apt full-upgrade -qy \
+    && apt autoremove -qy --purge \
+    && apt clean -qy \
+    # Configure BusyBox
+    && busybox --install -s \
+    # Add nextjs:nodejs to run the app
+    && addgroup --system --gid 1001 nodejs \
+    && adduser --system --home "/app" --gid 1001 -uid 1001 nextjs \
+    # Set permission for nextjs:nodejs
+    && chown -R nextjs:nodejs "/etc/proxychains4.conf" \
+    # Cleanup temp files
+    && rm -rf /tmp/* /var/lib/apt/lists/* /var/tmp/*
+
+## Builder image, install all the dependencies and build the app
+FROM base AS builder
+
+ARG USE_CN_MIRROR
+
+ENV NEXT_PUBLIC_SERVICE_MODE="server" \
+    APP_URL="http://app.com" \
+    DATABASE_DRIVER="node" \
+    DATABASE_URL="postgres://postgres:password@localhost:5432/postgres" \
+    KEY_VAULTS_SECRET="use-for-build"
+
+# Sentry
+ENV NEXT_PUBLIC_SENTRY_DSN="" \
+    SENTRY_ORG="" \
+    SENTRY_PROJECT=""
+
+# Posthog
+ENV NEXT_PUBLIC_ANALYTICS_POSTHOG="" \
+    NEXT_PUBLIC_POSTHOG_HOST="" \
+    NEXT_PUBLIC_POSTHOG_KEY=""
+
+# Umami
+ENV NEXT_PUBLIC_ANALYTICS_UMAMI="" \
+    NEXT_PUBLIC_UMAMI_SCRIPT_URL="" \
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID=""
+
+# Node
+ENV NODE_OPTIONS="--max-old-space-size=8192"
+
+WORKDIR /app
+
+COPY package.json ./
+COPY .npmrc ./
+
+RUN \
+    # If you want to build docker in China, build with --build-arg USE_CN_MIRROR=true
+    if [ "${USE_CN_MIRROR:-false}" = "true" ]; then \
+        export SENTRYCLI_CDNURL="https://npmmirror.com/mirrors/sentry-cli"; \
+        npm config set registry "https://registry.npmmirror.com/"; \
+    fi \
+    # Set the registry for corepack
+    && export COREPACK_NPM_REGISTRY=$(npm config get registry | sed 's/\/$//') \
+    # Enable corepack
+    && corepack enable \
+    # Use pnpm for corepack
+    && corepack use pnpm \
+    # Install the dependencies
+    && pnpm i \
+    # Add sharp and db migration dependencies
+    && mkdir -p /deps \
+    && pnpm add sharp pg drizzle-orm --prefix /deps
+
+COPY . .
+
+# run build standalone for docker version
+RUN npm run build:docker
+
+## Application image, copy all the files for production
+FROM scratch AS app
+
+COPY --from=builder /app/public /app/public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder /app/.next/standalone /app/
+COPY --from=builder /app/.next/static /app/.next/static
+
+# copy dependencies
+COPY --from=builder /deps/node_modules/.pnpm /app/node_modules/.pnpm
+COPY --from=builder /deps/node_modules/pg /app/node_modules/pg
+COPY --from=builder /deps/node_modules/drizzle-orm /app/node_modules/drizzle-orm
+
+# Copy database migrations
+COPY --from=builder /app/src/database/server/migrations /app/migrations
+COPY --from=builder /app/scripts/migrateServerDB/docker.cjs /app/docker.cjs
+COPY --from=builder /app/scripts/migrateServerDB/errorHint.js /app/errorHint.js
+
+## Production image, copy all the files and run next
+FROM base
+
+# Copy all the files from app, set the correct permission for prerender cache
+COPY --from=app --chown=nextjs:nodejs /app /app
+
+ENV NODE_ENV="production" \
+    NODE_TLS_REJECT_UNAUTHORIZED=""
+
+# set hostname to localhost
+ENV HOSTNAME="0.0.0.0" \
+    PORT="3210"
+
+# General Variables
+ENV ACCESS_CODE="" \
+    APP_URL="" \
+    API_KEY_SELECT_MODE="" \
+    DEFAULT_AGENT_CONFIG="" \
+    SYSTEM_AGENT="" \
+    FEATURE_FLAGS="" \
+    PROXY_URL=""
+
+# Database
+ENV KEY_VAULTS_SECRET="" \
+    DATABASE_DRIVER="node" \
+    DATABASE_URL=""
+
+# Next Auth
+ENV NEXT_AUTH_SECRET="" \
+    NEXT_AUTH_SSO_PROVIDERS="" \
+    NEXTAUTH_URL=""
+
+# S3
+ENV NEXT_PUBLIC_S3_DOMAIN="" \
+    S3_PUBLIC_DOMAIN="" \
+    S3_ACCESS_KEY_ID="" \
+    S3_BUCKET="" \
+    S3_ENDPOINT="" \
+    S3_SECRET_ACCESS_KEY=""
+
+# Model Variables
+ENV \
+    # AI21
+    AI21_API_KEY="" \
+    # Ai360
+    AI360_API_KEY="" \
+    # Anthropic
+    ANTHROPIC_API_KEY="" ANTHROPIC_PROXY_URL="" \
+    # Amazon Bedrock
+    AWS_ACCESS_KEY_ID="" AWS_SECRET_ACCESS_KEY="" AWS_REGION="" AWS_BEDROCK_MODEL_LIST="" \
+    # Azure OpenAI
+    AZURE_API_KEY="" AZURE_API_VERSION="" AZURE_ENDPOINT="" AZURE_MODEL_LIST="" \
+    # Baichuan
+    BAICHUAN_API_KEY="" \
+    # DeepSeek
+    DEEPSEEK_API_KEY="" \
+    # Fireworks AI
+    FIREWORKSAI_API_KEY="" FIREWORKSAI_MODEL_LIST="" \
+    # GitHub
+    GITHUB_TOKEN="" GITHUB_MODEL_LIST="" \
+    # Google
+    GOOGLE_API_KEY="" GOOGLE_PROXY_URL="" \
+    # Groq
+    GROQ_API_KEY="" GROQ_MODEL_LIST="" GROQ_PROXY_URL="" \
+    # Minimax
+    MINIMAX_API_KEY="" \
+    # Mistral
+    MISTRAL_API_KEY="" \
+    # Moonshot
+    MOONSHOT_API_KEY="" MOONSHOT_PROXY_URL="" \
+    # Novita
+    NOVITA_API_KEY="" NOVITA_MODEL_LIST="" \
+    # Ollama
+    OLLAMA_MODEL_LIST="" OLLAMA_PROXY_URL="" \
+    # OpenAI
+    OPENAI_API_KEY="" OPENAI_MODEL_LIST="" OPENAI_PROXY_URL="" \
+    # OpenRouter
+    OPENROUTER_API_KEY="" OPENROUTER_MODEL_LIST="" \
+    # Perplexity
+    PERPLEXITY_API_KEY="" PERPLEXITY_PROXY_URL="" \
+    # Qwen
+    QWEN_API_KEY="" QWEN_MODEL_LIST="" \
+    # SiliconCloud
+    SILICONCLOUD_API_KEY="" SILICONCLOUD_MODEL_LIST="" SILICONCLOUD_PROXY_URL="" \
+    # Spark
+    SPARK_API_KEY="" \
+    # Stepfun
+    STEPFUN_API_KEY="" \
+    # Taichu
+    TAICHU_API_KEY="" \
+    # TogetherAI
+    TOGETHERAI_API_KEY="" TOGETHERAI_MODEL_LIST="" \
+    # Upstage
+    UPSTAGE_API_KEY="" \
+    # 01.AI
+    ZEROONE_API_KEY="" ZEROONE_MODEL_LIST="" \
+    # Zhipu
+    ZHIPU_API_KEY=""
+
+USER nextjs
+
+EXPOSE 3210/tcp
+
+CMD \
+    if [ -n "$PROXY_URL" ]; then \
+        # Set regex for IPv4
+        IP_REGEX="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$"; \
+        # Set proxychains command
+        PROXYCHAINS="proxychains -q"; \
+        # Parse the proxy URL
+        host_with_port="${PROXY_URL#*//}"; \
+        host="${host_with_port%%:*}"; \
+        port="${PROXY_URL##*:}"; \
+        protocol="${PROXY_URL%%://*}"; \
+        # Resolve to IP address if the host is a domain
+        if ! [[ "$host" =~ "$IP_REGEX" ]]; then \
+            nslookup=$(nslookup -q="A" "$host" | tail -n +3 | grep 'Address:'); \
+            if [ -n "$nslookup" ]; then \
+                host=$(echo "$nslookup" | tail -n 1 | awk '{print $2}'); \
+            fi; \
+        fi; \
+        # Generate proxychains configuration file
+        printf "%s\n" \
+            'localnet 127.0.0.0/255.0.0.0' \
+            'localnet ::1/128' \
+            'proxy_dns' \
+            'remote_dns_subnet 224' \
+            'strict_chain' \
+            'tcp_connect_time_out 8000' \
+            'tcp_read_time_out 15000' \
+            '[ProxyList]' \
+            "$protocol $host $port" \
+        > "/etc/proxychains4.conf"; \
+    fi; \
+    # Run migration
+    node "/app/docker.cjs"; \
+    if [ "$?" -eq "0" ]; then \
+      # Run the server
+      ${PROXYCHAINS} node "/app/server.js"; \
+    fi;

DigitalHumanWeb/LICENSE

@@ -0,0 +1,38 @@
+Apache License Version 2.0
+
+Copyright (c) 2024/06/17 - current LobeHub LLC. All rights reserved.
+
+----------
+
+From 1.0, LobeChat is licensed under the Apache License 2.0, with the following additional conditions:
+
+1. The commercial usage of LobeChat:
+
+  a. LobeChat may be utilized commercially, including as a frontend and backend service without modifying the source code.
+
+  b. a commercial license must be obtained from the producer if you want to develop and distribute a derivative work based on LobeChat.
+
+Please contact hello@lobehub.com by email to inquire about licensing matters.
+
+
+2. As a contributor, you should agree that:
+
+  a. The producer can adjust the open-source agreement to be more strict or relaxed as deemed necessary.
+
+  b. Your contributed code may be used for commercial purposes, including but not limited to its cloud edition.
+
+Apart from the specific conditions mentioned above, all other rights and restrictions follow the Apache License 2.0. Detailed information about the Apache License 2.0 can be found at http://www.apache.org/licenses/LICENSE-2.0.
+
+----------
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

DigitalHumanWeb/README.ja-JP.md

@@ -0,0 +1,809 @@
+<div align="center"><a name="readme-top"></a>
+
+[![][image-banner]][vercel-link]
+
+# Lobe Chat
+
+オープンソースのモダンデザインChatGPT/LLMs UI/フレームワーク。<br/>
+音声合成、マルチモーダル、拡張可能な（[function call][docs-functionc-call]）プラグインシステムをサポート。<br/>
+プライベートなOpenAI ChatGPT/Claude/Gemini/Groq/Ollamaチャットアプリケーションをワンクリックで**無料**でデプロイ。
+
+[English](./README.md) · [简体中文](./README.zh-CN.md) · **日本語** · [公式サイト][official-site] · [変更履歴](./CHANGELOG.md) · [ドキュメント][docs] · [ブログ][blog] · [フィードバック][github-issues-link]
+
+<!-- SHIELD GROUP -->
+
+[![][github-release-shield]][github-release-link]
+[![][docker-release-shield]][docker-release-link]
+[![][vercel-shield]][vercel-link]
+[![][discord-shield]][discord-link]<br/>
+[![][codecov-shield]][codecov-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]
+[![][github-releasedate-shield]][github-releasedate-link]<br/>
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]<br>
+[![][sponsor-shield]][sponsor-link]
+
+**LobeChatリポジトリを共有**
+
+[![][share-x-shield]][share-x-link]
+[![][share-telegram-shield]][share-telegram-link]
+[![][share-whatsapp-shield]][share-whatsapp-link]
+[![][share-reddit-shield]][share-reddit-link]
+[![][share-weibo-shield]][share-weibo-link]
+[![][share-mastodon-shield]][share-mastodon-link]
+[![][share-linkedin-shield]][share-linkedin-link]
+
+<sup>新しい時代の思考と創造を先導します。あなたのために、スーパー個人のために作られました。</sup>
+
+[![][github-trending-shield]][github-trending-url]
+
+[![][image-overview]][vercel-link]
+
+</div>
+
+<details>
+<summary><kbd>目次</kbd></summary>
+
+#### TOC
+
+- [👋🏻 はじめに & コミュニティに参加](#-はじめに--コミュニティに参加)
+- [✨ 特徴](#-特徴)
+  - [`1` マルチモデルサービスプロバイダーのサポート](#1-マルチモデルサービスプロバイダーのサポート)
+  - [`2` ローカル大規模言語モデル (LLM) のサポート](#2-ローカル大規模言語モデル-llm-のサポート)
+  - [`3` モデルの視覚認識](#3-モデルの視覚認識)
+  - [`4` TTS & STT 音声会話](#4-tts--stt-音声会話)
+  - [`5` テキストから画像生成](#5-テキストから画像生成)
+  - [`6` プラグインシステム (Function Calling)](#6-プラグインシステム-function-calling)
+  - [`7` エージェントマーケット (GPTs)](#7-エージェントマーケット-gpts)
+  - [`8` ローカル / リモートデータベースのサポート](#8-ローカル--リモートデータベースのサポート)
+  - [`9` マルチユーザ管理のサポート](#9-マルチユーザ管理のサポート)
+  - [`10` プログレッシブウェブアプリ (PWA)](#10-プログレッシブウェブアプリ-pwa)
+  - [`11` モバイルデバイスの適応](#11-モバイルデバイスの適応)
+  - [`12` カスタムテーマ](#12-カスタムテーマ)
+  - [`*` その他の特徴](#-その他の特徴)
+- [⚡️ パフォーマンス](#️-パフォーマンス)
+- [🛳 自己ホスティング](#-自己ホスティング)
+  - [`A` Vercel、Zeabur、Sealosでのデプロイ](#a-vercelzeabursealosでのデプロイ)
+  - [`B` Dockerでのデプロイ](#b-dockerでのデプロイ)
+  - [環境変数](#環境変数)
+- [📦 エコシステム](#-エコシステム)
+- [🧩 プラグイン](#-プラグイン)
+- [⌨️ ローカル開発](#️-ローカル開発)
+- [🤝 貢献](#-貢献)
+- [❤️ スポンサー](#️-スポンサー)
+- [🔗 その他の製品](#-その他の製品)
+
+####
+
+<br/>
+
+</details>
+
+## 👋🏻 はじめに & コミュニティに参加
+
+私たちは、AIGCのためのモダンデザインコンポーネントとツールを提供することを目指すデザインエンジニアのグループです。
+ブートストラッピングアプローチを採用することで、開発者とユーザーに対してよりオープンで透明性のある、使いやすい製品エコシステムを提供することを目指しています。
+
+ユーザーやプロの開発者にとって、LobeHubはあなたのAIエージェントの遊び場となるでしょう。LobeChatは現在アクティブに開発中であり、遭遇した[問題][issues-link]についてのフィードバックを歓迎します。
+
+| [![][vercel-shield-badge]][vercel-link]   | インストールや登録は不要です！私たちのウェブサイトにアクセスして、直接体験してください。                           |
+| :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
+| [![][discord-shield-badge]][discord-link] | 私たちのDiscordコミュニティに参加しましょう！ここでは、LobeHubの開発者や他の熱心なユーザーとつながることができます。 |
+
+> \[!IMPORTANT]
+>
+> **スターを付けてください**。GitHubからのすべてのリリース通知を遅延なく受け取ることができます\~ ⭐️
+
+[![][image-star]][github-stars-link]
+
+<details>
+  <summary><kbd>スター履歴</kbd></summary>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&theme=dark&type=Date">
+    <img width="100%" src="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&type=Date">
+  </picture>
+</details>
+
+## ✨ 特徴
+
+[![][image-feat-privoder]][docs-feat-provider]
+
+### `1` [マルチモデルサービスプロバイダーのサポート][docs-feat-provider]
+
+LobeChatの継続的な開発において、AI会話サービスを提供する際のモデルサービスプロバイダーの多様性がコミュニティのニーズを満たすために重要であることを深く理解しています。そのため、単一のモデルサービスプロバイダーに限定せず、複数のモデルサービスプロバイダーをサポートすることで、ユーザーにより多様で豊富な会話の選択肢を提供しています。
+
+このようにして、LobeChatは異なるユーザーのニーズにより柔軟に対応し、開発者にも幅広い選択肢を提供します。
+
+#### サポートされているモデルサービスプロバイダー
+
+以下のモデルサービスプロバイダーをサポートしています：
+
+- **AWS Bedrock**：AWS Bedrockサービスと統合され、**Claude / LLama2**などのモデルをサポートし、強力な自然言語処理能力を提供します。[詳細はこちら](https://aws.amazon.com/cn/bedrock)
+- **Anthropic (Claude)**：Anthropicの**Claude**シリーズモデルにアクセスし、Claude 3およびClaude 2を含む、マルチモーダル機能と拡張コンテキストで業界の新しいベンチマークを設定します。[詳細はこちら](https://www.anthropic.com/claude)
+- **Google AI (Gemini Pro, Gemini Vision)**：Googleの**Gemini**シリーズモデルにアクセスし、GeminiおよびGemini Proを含む、高度な言語理解と生成をサポートします。[詳細はこちら](https://deepmind.google/technologies/gemini/)
+- **Groq**：GroqのAIモデルにアクセスし、メッセージシーケンスを効率的に処理し、応答を生成し、マルチターンの対話や単一のインタラクションタスクを実行できます。[詳細はこちら](https://groq.com/)
+- **OpenRouter**：**Claude 3**、**Gemma**、**Mistral**、**Llama2**、**Cohere**などのモデルのルーティングをサポートし、インテリジェントなルーティング最適化をサポートし、使用効率を向上させ、オープンで柔軟です。[詳細はこちら](https://openrouter.ai/)
+- **01.AI (Yi Model)**：01.AIモデルを統合し、推論速度が速いAPIシリーズを提供し、処理時間を短縮しながら優れたモデル性能を維持します。[詳細はこちら](https://01.ai/)
+- **Together.ai**：Together Inference APIを通じて、100以上の主要なオープンソースのチャット、言語、画像、コード、および埋め込みモデルにアクセスできます。これらのモデルについては、使用した分だけ支払います。[詳細はこちら](https://www.together.ai/)
+- **ChatGLM**：智谱の**ChatGLM**シリーズモデル（GLM-4/GLM-4-vision/GLM-3-turbo）を追加し、ユーザーにもう一つの効率的な会話モデルの選択肢を提供します。[詳細はこちら](https://www.zhipuai.cn/)
+- **Moonshot AI (Dark Side of the Moon)**：中国の革新的なAIスタートアップであるMoonshotシリーズモデルと統合し、より深い会話理解を提供します。[詳細はこちら](https://www.moonshot.cn/)
+- **Minimax**：Minimaxモデルを統合し、MoEモデル**abab6**を含む、より広範な選択肢を提供します。[詳細はこちら](https://www.minimaxi.com/)
+- **DeepSeek**：中国の革新的なAIスタートアップであるDeepSeekシリーズモデルと統合し、性能と価格のバランスを取ったモデルを提供します。[詳細はこちら](https://www.deepseek.com/)
+- **Qwen**：Qwenシリーズモデルを統合し、最新の**qwen-turbo**、**qwen-plus**、**qwen-max**を含む。[詳細はこちら](https://help.aliyun.com/zh/dashscope/developer-reference/model-introduction)
+- **Novita AI**：**Llama**、**Mistral**、その他の主要なオープンソースモデルに最安値でアクセスできます。検閲されないロールプレイに参加し、創造的な議論を引き起こし、制限のないイノベーションを促進します。**使用した分だけ支払います。** [詳細はこちら](https://novita.ai/llm-api?utm_source=lobechat&utm_medium=ch&utm_campaign=api)
+
+同時に、ReplicateやPerplexityなどのモデルサービスプロバイダーのサポートも計画しています。これにより、サービスプロバイダーのライブラリをさらに充実させることができます。LobeChatがあなたのお気に入りのサービスプロバイダーをサポートすることを希望する場合は、[コミュニティディスカッション](https://github.com/lobehub/lobe-chat/discussions/1284)に参加してください。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-local]][docs-feat-local]
+
+### `2` [ローカル大規模言語モデル (LLM) のサポート][docs-feat-local]
+
+特定のユーザーのニーズに応えるために、LobeChatは[Ollama](https://ollama.ai)に基づいてローカルモデルの使用をサポートしており、ユーザーが自分自身またはサードパーティのモデルを柔軟に使用できるようにしています。
+
+> \[!TIP]
+>
+> [📘 LobeChatでのOllamaの使用][docs-usage-ollama]について詳しくはこちらをご覧ください。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-vision]][docs-feat-vision]
+
+### `3` [モデルの視覚認識][docs-feat-vision]
+
+LobeChatは、OpenAIの最新の視覚認識機能を備えた[`gpt-4-vision`](https://platform.openai.com/docs/guides/vision)モデルをサポートしています。
+これは視覚を認識できるマルチモーダルインテリジェンスです。ユーザーは簡単に画像をアップロードしたり、画像をドラッグアンドドロップして対話ボックスに入れることができ、
+エージェントは画像の内容を認識し、これに基づいてインテリジェントな会話を行い、よりスマートで多様なチャットシナリオを作成します。
+
+この機能は、新しいインタラクティブな方法を提供し、コミュニケーションがテキストを超えて視覚要素を含むことを可能にします。
+日常の使用での画像共有や特定の業界での画像解釈に関係なく、エージェントは優れた会話体験を提供します。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-tts]][docs-feat-tts]
+
+### `4` [TTS & STT 音声会話][docs-feat-tts]
+
+LobeChatは、テキストから音声への変換（Text-to-Speech、TTS）および音声からテキストへの変換（Speech-to-Text、STT）技術をサポートしており、
+テキストメッセージを明瞭な音声出力に変換し、ユーザーが実際の人と話しているかのように対話エージェントと対話できるようにします。
+ユーザーは、エージェントに適した音声を選択することができます。
+
+さらに、TTSは聴覚学習を好む人や忙しい中で情報を受け取りたい人にとって優れたソリューションを提供します。
+LobeChatでは、異なる地域や文化的背景のユーザーのニーズに応えるために、さまざまな高品質の音声オプション（OpenAI Audio、Microsoft Edge Speech）を慎重に選択しました。
+ユーザーは、個人の好みや特定のシナリオに応じて適切な音声を選択し、パーソナライズされたコミュニケーション体験を得ることができます。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-t2i]][docs-feat-t2i]
+
+### `5` [テキストから画像生成][docs-feat-t2i]
+
+最新のテキストから画像生成技術をサポートし、LobeChatはユーザーがエージェントとの対話中に直接画像作成ツールを呼び出すことができるようになりました。
+[`DALL-E 3`](https://openai.com/dall-e-3)、[`MidJourney`](https://www.midjourney.com/)、[`Pollinations`](https://pollinations.ai/)などのAIツールの能力を活用することで、
+エージェントはあなたのアイデアを画像に変えることができます。
+
+これにより、プライベートで没入感のある創造プロセスが可能になり、個人的な対話に視覚的なストーリーテリングをシームレスに統合することができます。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-plugin]][docs-feat-plugin]
+
+### `6` [プラグインシステム (Function Calling)][docs-feat-plugin]
+
+LobeChatのプラグインエコシステムは、そのコア機能の重要な拡張であり、LobeChatアシスタントの実用性と柔軟性を大幅に向上させます。
+
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+プラグインを利用することで、LobeChatアシスタントはリアルタイムの情報を取得して処理することができ、ウェブ情報を検索し、ユーザーに即時かつ関連性の高いニュースを提供することができます。
+
+さらに、これらのプラグインはニュースの集約に限定されず、他の実用的な機能にも拡張できます。たとえば、ドキュメントの迅速な検索、画像の生成、Bilibili、Steamなどのさまざまなプラットフォームからのデータの取得、さまざまなサードパーティサービスとの連携などです。
+
+> \[!TIP]
+>
+> [📘 プラグインの使用][docs-usage-plugin]について詳しくはこちらをご覧ください。
+
+<!-- PLUGIN LIST -->
+
+| 最近の提出                                                                                                          | 説明                                                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| [ショッピングツール](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **shoppingtools** on **2024-07-19**</sup> | eBayとAliExpressで製品を検索し、eBayのイベントとクーポンを見つけます。プロンプトの例を取得します。<br/>`ショッピング` `e-bay` `ali-express` `クーポン` |
+| [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-06-27**</sup>  | リアルタイムの株式、暗号通貨、その他の投資データ。<br/>`株式` `分析`                                                                   |
+| [ソーシャル検索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-06-02**</sup>       | ソーシャル検索は、ツイート、ユーザー、フォロワー、画像、メディアなどへのアクセスを提供します。<br/>`ソーシャル` `ツイッター` `x` `検索`                |
+| [スペース](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **automateyournetwork** on **2024-05-12**</sup>    | NASAを含む宇宙データ。<br/>`宇宙` `nasa`                                                                                             |
+
+> 📊 合計プラグイン数: [<kbd>**52**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+
+ <!-- PLUGIN LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-agent]][docs-feat-agent]
+
+### `7` [エージェントマーケット (GPTs)][docs-feat-agent]
+
+LobeChatエージェントマーケットプレイスでは、クリエイターが多くの優れたエージェントを発見できる活気に満ちた革新的なコミュニティを提供しています。
+これらのエージェントは、仕事のシナリオで重要な役割を果たすだけでなく、学習プロセスでも大いに便利です。
+私たちのマーケットプレイスは、単なるショーケースプラットフォームではなく、協力の場でもあります。ここでは、誰もが自分の知恵を貢献し、開発したエージェントを共有できます。
+
+> \[!TIP]
+>
+> [🤖/🏪 エージェントを提出][submit-agents-link]することで、簡単にエージェント作品をプラットフォームに提出できます。
+> 重要なのは、LobeChatが高度な自動化国際化（i18n）ワークフローを確立しており、
+> あなたのエージェントを複数の言語バージョンにシームレスに翻訳できることです。
+> これにより、ユーザーがどの言語を話していても、エージェントを障害なく体験できます。
+
+> \[!IMPORTANT]
+>
+> すべてのユーザーがこの成長するエコシステムに参加し、エージェントの反復と最適化に参加することを歓迎します。
+> 一緒に、より面白く、実用的で革新的なエージェントを作成し、エージェントの多様性と実用性をさらに豊かにしましょう。
+
+<!-- AGENT LIST -->
+
+| 最近の提出                                                                                                                                                                                                 | 説明                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Cプログラム学習アシスタント](https://chat-preview.lobehub.com/market?agent=sichuan-university-941-c-programming-assistant)<br/><sup>By **[YBGuoYang](https://github.com/YBGuoYang)** on **2024-07-28**</sup> | Cプログラム設計の学習を支援します<br/>`941`                                                                                                                                                                                                                                                                                                                                                                                |
+| [ブランドパイオニア](https://chat-preview.lobehub.com/market?agent=brand-pioneer)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-25**</sup>                                               | ブランド開発の専門家、思想リーダー、ブランド戦略のスーパー天才、ブランドビジョナリー。ブランドパイオニアは、革新の最前線の探検家であり、自分の分野の発明者です。市場を提供し、専門分野の画期的な進展を特徴とする未来の世界を想像させてください。<br/>`ビジネス` `ブランドパイオニア` `ブランド開発` `ビジネスアシスタント` `ブランドナラティブ` |
+| [ネットワークセキュリティアシスタント](https://chat-preview.lobehub.com/market?agent=cybersecurity-copilot)<br/><sup>By **[huoji120](https://github.com/huoji120)** on **2024-07-23**</sup>                              | ログ、コード、逆コンパイルを分析し、問題を特定し、最適化の提案を提供するネットワークセキュリティの専門家アシスタント。<br/>`ネットワークセキュリティ` `トラフィック分析` `ログ分析` `コード逆コンパイル` `ctf`                                                                                                                                                                                                   |
+| [BIDOSx2](https://chat-preview.lobehub.com/market?agent=bidosx-2-v-2)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-21**</sup>                                                      | 従来のAIを超越する高度なAI LLM。'BIDOS'は、'ブランドのアイデア、開発、運営、スケーリング'と'ビジネスインテリジェンス決定最適化システム'の両方を意味します。<br/>`ブランド開発` `aiアシスタント` `市場分析` `戦略計画` `ビジネス最適化` `ビジネスインテリジェンス`                                                                                                   |
+
+> 📊 合計エージェント数: [<kbd>**307**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+
+ <!-- AGENT LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-database]][docs-feat-database]
+
+### `8` [ローカル / リモートデータベースのサポート][docs-feat-database]
+
+LobeChatは、サーバーサイドデータベースとローカルデータベースの両方の使用をサポートしています。ニーズに応じて、適切なデプロイメントソリューションを選択できます：
+
+- **ローカルデータベース**：データとプライバシー保護に対するより多くの制御を希望するユーザーに適しています。LobeChatはCRDT（Conflict-Free Replicated Data Type）技術を使用してマルチデバイス同期を実現しています。これはシームレスなデータ同期体験を提供することを目的とした実験的な機能です。
+- **サーバーサイドデータベース**：より便利なユーザー体験を希望するユーザーに適しています。LobeChatはPostgreSQLをサーバーサイドデータベースとしてサポートしています。サーバーサイドデータベースの設定方法についての詳細なドキュメントは、[サーバーサイドデータベースの設定](https://lobehub.com/docs/self-hosting/advanced/server-database)をご覧ください。
+
+どのデータベースを選択しても、LobeChatは優れたユーザー体験を提供します。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-auth]][docs-feat-auth]
+
+### `9` [マルチユーザ管理のサポート][docs-feat-auth]
+
+LobeChatはマルチユーザ管理をサポートし、異なるニーズに応じて2つの主要なユーザ認証および管理ソリューションを提供します：
+
+- **next-auth**：LobeChatは、複数の認証方法（OAuth、メールログイン、資格情報ログインなど）をサポートする柔軟で強力な認証ライブラリである`next-auth`を統合しています。`next-auth`を使用すると、ユーザの登録、ログイン、セッション管理、ソーシャルログインなどの機能を簡単に実装し、ユーザデータのセキュリティとプライバシーを確保できます。
+
+- **Clerk**：より高度なユーザ管理機能が必要なユーザ向けに、LobeChatは`Clerk`もサポートしています。`Clerk`は、現代的なユーザ管理プラットフォームであり、多要素認証（MFA）、ユーザプロファイル管理、ログイン活動の監視など、より豊富な機能を提供します。`Clerk`を使用すると、より高いセキュリティと柔軟性を得ることができ、複雑なユーザ管理ニーズに簡単に対応できます。
+
+どのユーザ管理ソリューションを選択しても、LobeChatは優れたユーザー体験と強力な機能サポートを提供します。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-pwa]][docs-feat-pwa]
+
+### `10` [プログレッシブウェブアプリ (PWA)][docs-feat-pwa]
+
+私たちは、今日のマルチデバイス環境でユーザーにシームレスな体験を提供することの重要性を深く理解しています。
+そのため、プログレッシブウェブアプリケーション（[PWA](https://support.google.com/chrome/answer/9658361)）技術を採用しました。
+これは、ウェブアプリケーションをネイティブアプリに近い体験に引き上げるモダンなウェブ技術です。
+
+PWAを通じて、LobeChatはデスクトップとモバイルデバイスの両方で高度に最適化されたユーザー体験を提供しながら、その軽量で高性能な特性を維持します。
+視覚的および感覚的には、インターフェースを慎重に設計し、ネイティブアプリと区別がつかないようにし、
+スムーズなアニメーション、レスポンシブレイアウト、および異なるデバイスの画面解像度に適応するようにしています。
+
+> \[!NOTE]
+>
+> PWAのインストールプロセスに慣れていない場合は、以下の手順に従ってLobeChatをデスクトップアプリケーション（モバイルデバイスにも適用）として追加できます：
+>
+> - コンピュータでChromeまたはEdgeブラウザを起動します。
+> - LobeChatのウェブページにアクセスします。
+> - アドレスバーの右上にある<kbd>インストール</kbd>アイコンをクリックします。
+> - 画面の指示に従ってPWAのインストールを完了します。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-mobile]][docs-feat-mobile]
+
+### `11` [モバイルデバイスの適応][docs-feat-mobile]
+
+モバイルデバイスのユーザー体験を向上させるために、一連の最適化設計を行いました。現在、モバイルユーザー体験のバージョンを繰り返し改善しています。ご意見やアイデアがある場合は、GitHub IssuesやPull Requestsを通じてフィードバックをお寄せください。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-theme]][docs-feat-theme]
+
+### `12` [カスタムテーマ][docs-feat-theme]
+
+デザインエンジニアリング指向のアプリケーションとして、LobeChatはユーザーの個別体験を重視しており、
+柔軟で多様なテーマモードを導入しています。日中のライトモードと夜間のダークモードを含みます。
+テーマモードの切り替えに加えて、さまざまな色のカスタマイズオプションを提供し、ユーザーが自分の好みに応じてアプリケーションのテーマカラーを調整できるようにしています。
+落ち着いたダークブルー、活気のあるピーチピンク、プロフェッショナルなグレーホワイトなど、LobeChatでは自分のスタイルに合った色の選択肢を見つけることができます。
+
+> \[!TIP]
+>
+> デフォルトの設定は、ユーザーのシステムのカラーモードをインテリジェントに認識し、テーマを自動的に切り替えて、オペレーティングシステムと一貫した視覚体験を提供します。
+> 詳細を手動で制御するのが好きなユーザーには、直感的な設定オプションと、会話シナリオに対してチャットバブルモードとドキュメントモードの選択肢を提供します。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+### `*` その他の特徴
+
+これらの特徴に加えて、LobeChatは基本的な技術基盤も優れています：
+
+- [x] 💨 **迅速なデプロイ**：VercelプラットフォームまたはDockerイメージを使用して、ワンクリックでデプロイを行い、1分以内にプロセスを完了できます。複雑な設定は不要です。
+- [x] 🌐 **カスタムドメイン**：ユーザーが独自のドメインを持っている場合、プラットフォームにバインドして、どこからでも対話エージェントに迅速にアクセスできます。
+- [x] 🔒 **プライバシー保護**：すべてのデータはユーザーのブラウザにローカルに保存され、ユーザーのプライバシーを保護します。
+- [x] 💎 **洗練されたUIデザイン**：慎重に設計されたインターフェースで、エレガントな外観とスムーズなインタラクションを提供します。ライトモードとダークモードをサポートし、モバイルフレンドリーです。PWAサポートにより、よりネイティブに近い体験を提供します。
+- [x] 🗣️ **スムーズな会話体験**：流れるような応答により、スムーズな会話体験を提供します。Markdownレンダリングを完全にサポートし、コードのハイライト、LaTexの数式、Mermaidのフローチャートなどを含みます。
+
+> ✨ LobeChatの進化に伴い、さらに多くの機能が追加されます。
+
+---
+
+> \[!NOTE]
+>
+> 今後の[ロードマップ][github-project-link]計画は、Projectsセクションで確認できます。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⚡️ パフォーマンス
+
+> \[!NOTE]
+>
+> 完全なレポートのリストは[📘 Lighthouseレポート][docs-lighthouse]で確認できます。
+
+|                   デスクトップ                   |                   モバイル                   |
+| :-----------------------------------------: | :----------------------------------------: |
+|              ![][chat-desktop]              |              ![][chat-mobile]              |
+| [📑 Lighthouseレポート][chat-desktop-report] | [📑 Lighthouseレポート][chat-mobile-report] |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🛳 自己ホスティング
+
+LobeChatは、Vercelと[Dockerイメージ][docker-release-link]を使用した自己ホスティングバージョンを提供しています。これにより、事前の知識がなくても数分で独自のチャットボットをデプロイできます。
+
+> \[!TIP]
+>
+> [📘 独自のLobeChatを構築する][docs-self-hosting]について詳しくはこちらをご覧ください。
+
+### `A` Vercel、Zeabur、Sealosでのデプロイ
+
+このサービスをVercelまたはZeaburでデプロイしたい場合は、以下の手順に従ってください：
+
+- [OpenAI API Key](https://platform.openai.com/account/api-keys)を準備します。
+- 下のボタンをクリックしてデプロイを開始します：GitHubアカウントで直接ログインし、環境変数セクションに`OPENAI_API_KEY`（必須）と`ACCESS_CODE`（推奨）を入力します。
+- デプロイが完了したら、使用を開始できます。
+- カスタムドメインをバインド（オプション）：Vercelが割り当てたドメインのDNSは一部の地域で汚染されているため、カスタムドメインをバインドすることで直接接続できます。
+
+<div align="center">
+
+|           Vercelでデプロイ            |                     Zeaburでデプロイ                      |                     Sealosでデプロイ                      |
+| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |
+| [![][deploy-button-image]][deploy-link] | [![][deploy-on-zeabur-button-image]][deploy-on-zeabur-link] | [![][deploy-on-sealos-button-image]][deploy-on-sealos-link] |
+
+</div>
+
+#### フォーク後
+
+フォーク後、リポジトリのアクションページで他のアクションを無効にし、アップストリーム同期アクションのみを保持します。
+
+#### 更新を維持
+
+READMEのワンクリックデプロイ手順に従って独自のプロジェクトをデプロイした場合、「更新が利用可能です」というプロンプトが常に表示されることがあります。これは、Vercelがデフォルトで新しいプロジェクトを作成し、フォークしないため、更新を正確に検出できないためです。
+
+> \[!TIP]
+>
+> [📘 最新バージョンと自動同期][docs-upstream-sync]の手順に従って再デプロイすることをお勧めします。
+
+<br/>
+
+### `B` Dockerでのデプロイ
+
+[![][docker-release-shield]][docker-release-link]
+[![][docker-size-shield]][docker-size-link]
+[![][docker-pulls-shield]][docker-pulls-link]
+
+LobeChatサービスを独自のプライベートデバイスにデプロイするためのDockerイメージを提供しています。以下のコマンドを使用してLobeChatサービスを開始します：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!TIP]
+>
+> OpenAIサービスをプロキシ経由で使用する必要がある場合は、`OPENAI_PROXY_URL`環境変数を使用してプロキシアドレスを設定できます：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!NOTE]
+>
+> Dockerを使用したデプロイの詳細な手順については、[📘 Dockerデプロイガイド][docs-docker]を参照してください。
+
+<br/>
+
+### 環境変数
+
+このプロジェクトは、環境変数で設定される追加の構成項目を提供します：
+
+| 環境変数            | 必須 | 説明                                                                                                                                                               | 例                                                                                                              |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `OPENAI_API_KEY`     | はい      | これはOpenAIアカウントページで申請したAPIキーです                                                                                                                  | `sk-xxxxxx...xxxxxx`                                                                                                 |
+| `OPENAI_PROXY_URL`   | いいえ       | OpenAIインターフェイスプロキシを手動で設定する場合、この設定項目を使って、デフォルトのOpenAI APIリクエストベースURLを上書きすることができます。                             | `https://api.chatanywhere.cn` または `https://aihubmix.com/v1` <br/>デフォルトの値は<br/>`https://api.openai.com/v1` |
+| `ACCESS_CODE`        | いいえ       | このサービスにアクセスするためのパスワードを追加します。漏洩を避けるために長いパスワードを設定することができます。この値にカンマが含まれる場合は、パスワードの配列となります。                              | `awCTe)re_r74` または `rtrt_ewee3@09!` または `code1,code2,code3`                                                            |
+| `OPENAI_MODEL_LIST`  | いいえ       | モデルリストをコントロールするために使用します。モデルを追加するには `+` を、モデルを非表示にするには `-` を、モデルの表示名をカンマ区切りでカスタマイズするには `model_name=display_name` を使用します。 | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`                                                                                |
+
+> \[!NOTE]
+>
+> 環境変数の完全なリストは [📘環境変数][docs-env-var] にあります
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 📦 エコシステム
+
+| NPM                               | リポジトリ                              | 説明                                                                                           | バージョン                                   |
+| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| [@lobehub/ui][lobe-ui-link]       | [lobehub/lobe-ui][lobe-ui-github]       | AIGC ウェブアプリケーション構築専用のオープンソースUIコンポーネントライブラリ。                         | [![][lobe-ui-shield]][lobe-ui-link]       |
+| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 人気の AI/LLM モデルブランドの SVG ロゴとアイコン集。                                            | [![][lobe-icons-shield]][lobe-icons-link] |
+| [@lobehub/tts][lobe-tts-link]     | [lobehub/lobe-tts][lobe-tts-github]     | 高品質で信頼性の高い TTS/STT React Hooks ライブラリ                                                   | [![][lobe-tts-shield]][lobe-tts-link]     |
+| [@lobehub/lint][lobe-lint-link]   | [lobehub/lobe-lint][lobe-lint-github]   | LobeHub の ESlint、Stylelint、Commitlint、Prettier、Remark、Semantic Release の設定。 | [![][lobe-lint-shield]][lobe-lint-link]   |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🧩 プラグイン
+
+プラグインは、LobeChatの[関数呼び出し][docs-functionc-call]機能を拡張する手段を提供します。プラグインを使用して、新しい関数呼び出しやメッセージ結果の新しいレンダリング方法を導入することができます。プラグイン開発に興味がある方は、Wikiの[📘プラグイン開発ガイド][docs-plugin-dev]を参照してください。
+
+- [lobe-chat-plugins][lobe-chat-plugins]: これはLobeChatのプラグインインデックスです。このリポジトリからindex.jsonにアクセスし、LobeChatで利用可能なプラグインのリストをユーザに表示します。
+- [chat-plugin-template][chat-plugin-template]: これはLobeChatプラグイン開発用のプラグインテンプレートです。
+- [@lobehub/chat-plugin-sdk][chat-plugin-sdk]: LobeChatプラグインSDKは、Lobe Chat用の優れたチャットプラグインの作成を支援します。
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: LobeChat Plugins Gatewayは、LobeChatプラグインのためのゲートウェイを提供するバックエンドサービスです。このサービスはVercelを使用してデプロイされます。プライマリAPIのPOST /api/v1/runnerはEdge Functionとしてデプロイされます。
+
+> \[!NOTE]
+>
+> プラグインシステムは現在大規模な開発中です。詳しくは以下の issue をご覧ください:
+>
+> - [x] [**プラグインフェイズ 1**](https://github.com/lobehub/lobe-chat/issues/73): プラグインを本体から分離し、メンテナンスのためにプラグインを独立したリポジトリに分割し、プラグインの動的ロードを実現する。
+> - [x] [**プラグインフェイズ 2**](https://github.com/lobehub/lobe-chat/issues/97): プラグイン使用の安全性と安定性、より正確な異常状態の提示、プラグインアーキテクチャの保守性、開発者フレンドリー。
+> - [x] [**プラグインフェイズ 3**](https://github.com/lobehub/lobe-chat/issues/149): より高度で包括的なカスタマイズ機能、プラグイン認証のサポート、サンプル。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ ローカル開発
+
+GitHub Codespaces を使ってオンライン開発ができます:
+
+[![][codespaces-shield]][codespaces-link]
+
+Or clone it for local development:
+
+```fish
+$ git clone https://github.com/lobehub/lobe-chat.git
+$ cd lobe-chat
+$ pnpm install
+$ pnpm dev
+```
+
+より詳しい情報をお知りになりたい方は、[📘開発ガイド][docs-dev-guide]をご覧ください。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤝 コントリビュート
+
+どのようなタイプのコントリビュートも大歓迎です;コードを提供することに興味がある方は、GitHub の [Issues][github-issues-link] や [Projects][github-project-link] をチェックして、あなたの力をお貸しください。
+
+> \[!TIP]
+>
+> 私たちは技術主導のフォーラムを創設し、知識の交流とアイデアの交換を促進することで、相互のインスピレーションと協力的なイノベーションを生み出すことを目指しています。
+>
+> LobeChat の改善にご協力ください。製品設計のフィードバックやユーザー体験に関するディスカッションを直接お寄せください。
+>
+> **プリンシパルメンテナー:** [@arvinxx](https://github.com/arvinxx) [@canisminor1990](https://github.com/canisminor1990)
+
+[![][pr-welcome-shield]][pr-welcome-link]
+[![][submit-agents-shield]][submit-agents-link]
+[![][submit-plugin-shield]][submit-plugin-link]
+
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ❤️ スポンサー
+
+あなたの一度きりの寄付が、私たちの銀河系で輝きを放ちます！皆様は流れ星であり、私たちの旅路に迅速かつ明るい影響を与えます。私たちを信じてくださり、ありがとうございます。皆様の寛大なお気持ちが、私たちの使命に向かって、一度に輝かしい閃光を放つよう導いてくださるのです。
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🔗 その他の製品
+
+- **[🅰️ Lobe SD Theme][lobe-theme]:** Stable Diffusion WebUI のためのモダンなテーマ、絶妙なインターフェースデザイン、高度にカスタマイズ可能なUI、効率を高める機能。
+- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** Midjourney の WebUI は、AI を活用しテキストプロンプトから豊富で多様な画像を素早く生成し、創造性を刺激して会話を盛り上げます。
+- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n は ChatGPT を利用した国際化翻訳プロセスの自動化ツールです。大きなファイルの自動分割、増分更新、OpenAIモデル、APIプロキシ、温度のカスタマイズオプションなどの機能をサポートしています。
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit は、Langchain/ChatGPT を活用して Gitmoji ベースのコミットメッセージを生成する CLI ツールです。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-link]
+
+</details>
+
+Copyright © 2024 [LobeHub][profile-link]. <br />
+This project is [Apache 2.0](./LICENSE) licensed.
+
+<!-- LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[blog]: https://lobehub.com/blog
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[chat-plugin-sdk]: https://github.com/lobehub/chat-plugin-sdk
+[chat-plugin-template]: https://github.com/lobehub/chat-plugin-template
+[chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
+[codecov-link]: https://codecov.io/gh/lobehub/lobe-chat
+[codecov-shield]: https://img.shields.io/codecov/c/github/lobehub/lobe-chat?labelColor=black&style=flat-square&logo=codecov&logoColor=white
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg
+[deploy-button-image]: https://vercel.com/button
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY,ACCESS_CODE&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%7C%20Access%20Code%20can%20protect%20your%20website&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-on-sealos-button-image]: https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg
+[deploy-on-sealos-link]: https://cloud.sealos.io/?openapp=system-template%3FtemplateName%3Dlobe-chat
+[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg
+[deploy-on-zeabur-link]: https://zeabur.com/templates/VZGGTI
+[discord-link]: https://discord.gg/AYFPHvv2jT
+[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat?color=369eff&labelColor=black&style=flat-square
+[docs]: https://lobehub.com/docs/usage/start
+[docs-dev-guide]: https://github.com/lobehub/lobe-chat/wiki/index
+[docs-docker]: https://lobehub.com/docs/self-hosting/platform/docker
+[docs-env-var]: https://lobehub.com/docs/self-hosting/environment-variables
+[docs-feat-agent]: https://lobehub.com/docs/usage/features/agent-market
+[docs-feat-auth]: https://lobehub.com/docs/usage/features/auth
+[docs-feat-database]: https://lobehub.com/docs/usage/features/database
+[docs-feat-local]: https://lobehub.com/docs/usage/features/local-llm
+[docs-feat-mobile]: https://lobehub.com/docs/usage/features/mobile
+[docs-feat-plugin]: https://lobehub.com/docs/usage/features/plugin-system
+[docs-feat-provider]: https://lobehub.com/docs/usage/features/multi-ai-providers
+[docs-feat-pwa]: https://lobehub.com/docs/usage/features/pwa
+[docs-feat-t2i]: https://lobehub.com/docs/usage/features/text-to-image
+[docs-feat-theme]: https://lobehub.com/docs/usage/features/theme
+[docs-feat-tts]: https://lobehub.com/docs/usage/features/tts
+[docs-feat-vision]: https://lobehub.com/docs/usage/features/vision
+[docs-functionc-call]: https://lobehub.com/blog/openai-function-call
+[docs-lighthouse]: https://github.com/lobehub/lobe-chat/wiki/Lighthouse
+[docs-plugin-dev]: https://lobehub.com/docs/usage/plugins/development
+[docs-self-hosting]: https://lobehub.com/docs/self-hosting/start
+[docs-upstream-sync]: https://lobehub.com/docs/self-hosting/advanced/upstream-sync
+[docs-usage-ollama]: https://lobehub.com/docs/usage/providers/ollama
+[docs-usage-plugin]: https://lobehub.com/docs/usage/plugins/basic
+[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
+[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-chat/release.yml
+[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-chat/test.yml
+[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
+[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-chat?color=c4f042&labelColor=black&style=flat-square
+[github-forks-link]: https://github.com/lobehub/lobe-chat/network/members
+[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-chat?color=8ae8ff&labelColor=black&style=flat-square
+[github-issues-link]: https://github.com/lobehub/lobe-chat/issues
+[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-chat?color=ff80eb&labelColor=black&style=flat-square
+[github-license-link]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
+[github-license-shield]: https://img.shields.io/badge/license-apache%202.0-white?labelColor=black&style=flat-square
+[github-project-link]: https://github.com/lobehub/lobe-chat/projects
+[github-release-link]: https://github.com/lobehub/lobe-chat/releases
+[github-release-shield]: https://img.shields.io/github/v/release/lobehub/lobe-chat?color=369eff&labelColor=black&logo=github&style=flat-square
+[github-releasedate-link]: https://github.com/lobehub/lobe-chat/releases
+[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-chat?labelColor=black&style=flat-square
+[github-stars-link]: https://github.com/lobehub/lobe-chat/network/stargazers
+[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-chat?color=ffcb47&labelColor=black&style=flat-square
+[github-trending-shield]: https://trendshift.io/api/badge/repositories/2256
+[github-trending-url]: https://trendshift.io/repositories/2256
+[image-banner]: https://github.com/lobehub/lobe-chat/assets/28616219/9f155dff-4737-429f-9cad-a70a1a860c5f
+[image-feat-agent]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png
+[image-feat-auth]: https://github.com/lobehub/lobe-chat/assets/17870709/8ce70e15-40df-451e-b700-66090fe5b8c2
+[image-feat-database]: https://github.com/lobehub/lobe-chat/assets/17870709/c27a0234-a4e9-40e5-8bcb-42d5ce7e40f9
+[image-feat-local]: https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c
+[image-feat-mobile]: https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp
+[image-feat-plugin]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png
+[image-feat-privoder]: https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551
+[image-feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp
+[image-feat-t2i]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png
+[image-feat-theme]: https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp
+[image-feat-tts]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png
+[image-feat-vision]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png
+[image-overview]: https://github.com/lobehub/lobe-chat/assets/17870709/56b95d48-f573-41cd-8b38-387bf88bc4bf
+[image-star]: https://github.com/lobehub/lobe-chat/assets/17870709/cb06b748-513f-47c2-8740-d876858d7855
+[issues-link]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
+[lobe-chat-plugins]: https://github.com/lobehub/lobe-chat-plugins
+[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
+[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-icons-github]: https://github.com/lobehub/lobe-icons
+[lobe-icons-link]: https://www.npmjs.com/package/@lobehub/icons
+[lobe-icons-shield]: https://img.shields.io/npm/v/@lobehub/icons?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-lint-github]: https://github.com/lobehub/lobe-lint
+[lobe-lint-link]: https://www.npmjs.com/package/@lobehub/lint
+[lobe-lint-shield]: https://img.shields.io/npm/v/@lobehub/lint?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-midjourney-webui]: https://github.com/lobehub/lobe-midjourney-webui
+[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[lobe-tts-github]: https://github.com/lobehub/lobe-tts
+[lobe-tts-link]: https://www.npmjs.com/package/@lobehub/tts
+[lobe-tts-shield]: https://img.shields.io/npm/v/@lobehub/tts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-ui-github]: https://github.com/lobehub/lobe-ui
+[lobe-ui-link]: https://www.npmjs.com/package/@lobehub/ui
+[lobe-ui-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[official-site]: https://lobehub.com
+[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
+[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
+[profile-link]: https://github.com/lobehub
+[share-linkedin-link]: https://linkedin.com/feed
+[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square
+[share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
+[share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
+[share-reddit-link]: https://www.reddit.com/submit?title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
+[share-telegram-link]: https://t.me/share/url"?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black&logo=telegram&logoColor=white&style=flat-square
+[share-weibo-link]: http://service.weibo.com/share/share.php?sharesource=weibo&title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-weibo-shield]: https://img.shields.io/badge/-share%20on%20weibo-black?labelColor=black&logo=sinaweibo&logoColor=white&style=flat-square
+[share-whatsapp-link]: https://api.whatsapp.com/send?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat%20%23chatbot%20%23chatGPT%20%23openAI
+[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
+[share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become ❤️ LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
+[submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
+[submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
+[submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins
+[submit-plugin-shield]: https://img.shields.io/badge/🧩/🏪_submit_plugin-%E2%86%92-95f3d9?labelColor=black&style=for-the-badge
+[vercel-link]: https://chat-preview.lobehub.com
+[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square
+[vercel-shield-badge]: https://img.shields.io/badge/TRY%20LOBECHAT-ONLINE-55b467?labelColor=black&logo=vercel&style=for-the-badge

DigitalHumanWeb/README.md

@@ -0,0 +1,830 @@
+<div align="center"><a name="readme-top"></a>
+
+[![][image-banner]][vercel-link]
+
+# Lobe Chat
+
+An open-source, modern-design ChatGPT/LLMs UI/Framework.<br/>
+Supports speech-synthesis, multi-modal, and extensible ([function call][docs-functionc-call]) plugin system.<br/>
+One-click **FREE** deployment of your private OpenAI ChatGPT/Claude/Gemini/Groq/Ollama chat application.
+
+**English** · [简体中文](./README.zh-CN.md) · [日本語](./README.ja-JP.md) · [Official Site][official-site] · [Changelog](./CHANGELOG.md) · [Documents][docs] · [Blog][blog] · [Feedback][github-issues-link]
+
+<!-- SHIELD GROUP -->
+
+[![][github-release-shield]][github-release-link]
+[![][docker-release-shield]][docker-release-link]
+[![][vercel-shield]][vercel-link]
+[![][discord-shield]][discord-link]<br/>
+[![][codecov-shield]][codecov-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]
+[![][github-releasedate-shield]][github-releasedate-link]<br/>
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]<br>
+[![][sponsor-shield]][sponsor-link]
+
+**Share LobeChat Repository**
+
+[![][share-x-shield]][share-x-link]
+[![][share-telegram-shield]][share-telegram-link]
+[![][share-whatsapp-shield]][share-whatsapp-link]
+[![][share-reddit-shield]][share-reddit-link]
+[![][share-weibo-shield]][share-weibo-link]
+[![][share-mastodon-shield]][share-mastodon-link]
+[![][share-linkedin-shield]][share-linkedin-link]
+
+<sup>Pioneering the new age of thinking and creating. Built for you, the Super Individual.</sup>
+
+[![][github-trending-shield]][github-trending-url]
+
+[![][image-overview]][vercel-link]
+
+</div>
+
+<details>
+<summary><kbd>Table of contents</kbd></summary>
+
+#### TOC
+
+- [👋🏻 Getting Started & Join Our Community](#-getting-started--join-our-community)
+- [✨ Features](#-features)
+  - [`1` File Upload/Knowledge Base](#1-file-uploadknowledge-base)
+  - [`2` Multi-Model Service Provider Support](#2-multi-model-service-provider-support)
+  - [`3` Local Large Language Model (LLM) Support](#3-local-large-language-model-llm-support)
+  - [`4` Model Visual Recognition](#4-model-visual-recognition)
+  - [`5` TTS & STT Voice Conversation](#5-tts--stt-voice-conversation)
+  - [`6` Text to Image Generation](#6-text-to-image-generation)
+  - [`7` Plugin System (Function Calling)](#7-plugin-system-function-calling)
+  - [`8` Agent Market (GPTs)](#8-agent-market-gpts)
+  - [`9` Support Local / Remote Database](#9-support-local--remote-database)
+  - [`10` Support Multi-User Management](#10-support-multi-user-management)
+  - [`11` Progressive Web App (PWA)](#11-progressive-web-app-pwa)
+  - [`12` Mobile Device Adaptation](#12-mobile-device-adaptation)
+  - [`13` Custom Themes](#13-custom-themes)
+  - [`*` What's more](#-whats-more)
+- [⚡️ Performance](#️-performance)
+- [🛳 Self Hosting](#-self-hosting)
+  - [`A` Deploying with Vercel, Zeabur or Sealos](#a-deploying-with-vercel-zeabur-or-sealos)
+  - [`B` Deploying with Docker](#b-deploying-with-docker)
+  - [Environment Variable](#environment-variable)
+- [📦 Ecosystem](#-ecosystem)
+- [🧩 Plugins](#-plugins)
+- [⌨️ Local Development](#️-local-development)
+- [🤝 Contributing](#-contributing)
+- [❤️ Sponsor](#️-sponsor)
+- [🔗 More Products](#-more-products)
+
+####
+
+<br/>
+
+</details>
+
+## 👋🏻 Getting Started & Join Our Community
+
+We are a group of e/acc design-engineers, hoping to provide modern design components and tools for AIGC.
+By adopting the Bootstrapping approach, we aim to provide developers and users with a more open, transparent, and user-friendly product ecosystem.
+
+Whether for users or professional developers, LobeHub will be your AI Agent playground. Please be aware that LobeChat is currently under active development, and feedback is welcome for any [issues][issues-link] encountered.
+
+| [![][vercel-shield-badge]][vercel-link]   | No installation or registration necessary! Visit our website to experience it firsthand.                           |
+| :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
+| [![][discord-shield-badge]][discord-link] | Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. |
+
+> \[!IMPORTANT]
+>
+> **Star Us**, You will receive all release notifications from GitHub without any delay \~ ⭐️
+
+[![][image-star]][github-stars-link]
+
+<details>
+  <summary><kbd>Star History</kbd></summary>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&theme=dark&type=Date">
+    <img width="100%" src="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&type=Date">
+  </picture>
+</details>
+
+## ✨ Features
+
+[![][image-feat-knowledgebase]][docs-feat-knowledgebase]
+
+### `1` [File Upload/Knowledge Base][docs-feat-knowledgebase]
+
+LobeChat supports file upload and knowledge base functionality. You can upload various types of files including documents, images, audio, and video, as well as create knowledge bases, making it convenient for users to manage and search for files. Additionally, you can utilize files and knowledge base features during conversations, enabling a richer dialogue experience.
+
+<https://github.com/user-attachments/assets/faa8cf67-e743-4590-8bf6-ebf6ccc34175>
+
+> \[!TIP]
+>
+> Learn more on [📘 LobeChat Knowledge Base Launch — From Now On, Every Step Counts](https://lobehub.com/blog/knowledge-base)
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-privoder]][docs-feat-provider]
+
+### `2` [Multi-Model Service Provider Support][docs-feat-provider]
+
+In the continuous development of LobeChat, we deeply understand the importance of diversity in model service providers for meeting the needs of the community when providing AI conversation services. Therefore, we have expanded our support to multiple model service providers, rather than being limited to a single one, in order to offer users a more diverse and rich selection of conversations.
+
+In this way, LobeChat can more flexibly adapt to the needs of different users, while also providing developers with a wider range of choices.
+
+#### Supported Model Service Providers
+
+We have implemented support for the following model service providers:
+
+- **AWS Bedrock**: Integrated with AWS Bedrock service, supporting models such as **Claude / LLama2**, providing powerful natural language processing capabilities. [Learn more](https://aws.amazon.com/cn/bedrock)
+- **Anthropic (Claude)**: Accessed Anthropic's **Claude** series models, including Claude 3 and Claude 2, with breakthroughs in multi-modal capabilities and extended context, setting a new industry benchmark. [Learn more](https://www.anthropic.com/claude)
+- **Google AI (Gemini Pro, Gemini Vision)**: Access to Google's **Gemini** series models, including Gemini and Gemini Pro, to support advanced language understanding and generation. [Learn more](https://deepmind.google/technologies/gemini/)
+- **Groq**: Accessed Groq's AI models, efficiently processing message sequences and generating responses, capable of multi-turn dialogues and single-interaction tasks. [Learn more](https://groq.com/)
+- **OpenRouter**: Supports routing of models including **Claude 3**, **Gemma**, **Mistral**, **Llama2** and **Cohere**, with intelligent routing optimization to improve usage efficiency, open and flexible. [Learn more](https://openrouter.ai/)
+- **01.AI (Yi Model)**: Integrated the 01.AI models, with series of APIs featuring fast inference speed, which not only shortened the processing time, but also maintained excellent model performance. [Learn more](https://01.ai/)
+- **Together.ai**: Over 100 leading open-source Chat, Language, Image, Code, and Embedding models are available through the Together Inference API. For these models you pay just for what you use. [Learn more](https://www.together.ai/)
+- **ChatGLM**: Added the **ChatGLM** series models from Zhipuai (GLM-4/GLM-4-vision/GLM-3-turbo), providing users with another efficient conversation model choice. [Learn more](https://www.zhipuai.cn/)
+- **Moonshot AI (Dark Side of the Moon)**: Integrated with the Moonshot series models, an innovative AI startup from China, aiming to provide deeper conversation understanding. [Learn more](https://www.moonshot.cn/)
+- **Minimax**: Integrated the Minimax models, including the MoE model **abab6**, offers a broader range of choices. [Learn more](https://www.minimaxi.com/)
+- **DeepSeek**: Integrated with the DeepSeek series models, an innovative AI startup from China, The product has been designed to provide a model that balances performance with price. [Learn more](https://www.deepseek.com/)
+- **Qwen**: Integrated the Qwen series models, including the latest **qwen-turbo**, **qwen-plus** and **qwen-max**. [Lean more](https://help.aliyun.com/zh/dashscope/developer-reference/model-introduction)
+- **Novita AI**: Access **Llama**, **Mistral**, and other leading open-source models at cheapest prices. Engage in uncensored role-play, spark creative discussions, and foster unrestricted innovation. **Pay For What You Use.** [Learn more](https://novita.ai/llm-api?utm_source=lobechat&utm_medium=ch&utm_campaign=api)
+
+At the same time, we are also planning to support more model service providers, such as Replicate and Perplexity, to further enrich our service provider library. If you would like LobeChat to support your favorite service provider, feel free to join our [community discussion](https://github.com/lobehub/lobe-chat/discussions/1284).
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-local]][docs-feat-local]
+
+### `3` [Local Large Language Model (LLM) Support][docs-feat-local]
+
+To meet the specific needs of users, LobeChat also supports the use of local models based on [Ollama](https://ollama.ai), allowing users to flexibly use their own or third-party models.
+
+> \[!TIP]
+>
+> Learn more about [📘 Using Ollama in LobeChat][docs-usage-ollama] by checking it out.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-vision]][docs-feat-vision]
+
+### `4` [Model Visual Recognition][docs-feat-vision]
+
+LobeChat now supports OpenAI's latest [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) model with visual recognition capabilities,
+a multimodal intelligence that can perceive visuals. Users can easily upload or drag and drop images into the dialogue box,
+and the agent will be able to recognize the content of the images and engage in intelligent conversation based on this,
+creating smarter and more diversified chat scenarios.
+
+This feature opens up new interactive methods, allowing communication to transcend text and include a wealth of visual elements.
+Whether it's sharing images in daily use or interpreting images within specific industries, the agent provides an outstanding conversational experience.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-tts]][docs-feat-tts]
+
+### `5` [TTS & STT Voice Conversation][docs-feat-tts]
+
+LobeChat supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text messages into clear voice outputs,
+allowing users to interact with our conversational agent as if they were talking to a real person. Users can choose from a variety of voices to pair with the agent.
+
+Moreover, TTS offers an excellent solution for those who prefer auditory learning or desire to receive information while busy.
+In LobeChat, we have meticulously selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds.
+Users can choose the voice that suits their personal preferences or specific scenarios, resulting in a personalized communication experience.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-t2i]][docs-feat-t2i]
+
+### `6` [Text to Image Generation][docs-feat-t2i]
+
+With support for the latest text-to-image generation technology, LobeChat now allows users to invoke image creation tools directly within conversations with the agent. By leveraging the capabilities of AI tools such as [`DALL-E 3`](https://openai.com/dall-e-3), [`MidJourney`](https://www.midjourney.com/), and [`Pollinations`](https://pollinations.ai/), the agents are now equipped to transform your ideas into images.
+
+This enables a more private and immersive creative process, allowing for the seamless integration of visual storytelling into your personal dialogue with the agent.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-plugin]][docs-feat-plugin]
+
+### `7` [Plugin System (Function Calling)][docs-feat-plugin]
+
+The plugin ecosystem of LobeChat is an important extension of its core functionality, greatly enhancing the practicality and flexibility of the LobeChat assistant.
+
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+By utilizing plugins, LobeChat assistants can obtain and process real-time information, such as searching for web information and providing users with instant and relevant news.
+
+In addition, these plugins are not limited to news aggregation, but can also extend to other practical functions, such as quickly searching documents, generating images, obtaining data from various platforms like Bilibili, Steam, and interacting with various third-party services.
+
+> \[!TIP]
+>
+> Learn more about [📘 Plugin Usage][docs-usage-plugin] by checking it out.
+
+<!-- PLUGIN LIST -->
+
+| Recent Submits                                                                                                                     | Description                                                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| [Tongyi wanxiang Image Generator](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **YoungTx** on **2024-08-09**</sup> | This plugin uses Alibaba's Tongyi Wanxiang model to generate images based on text prompts.<br/>`image` `tongyi` `wanxiang`                |
+| [Shopping tools](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **shoppingtools** on **2024-07-19**</sup>            | Search for products on eBay & AliExpress, find eBay events & coupons. Get prompt examples.<br/>`shopping` `e-bay` `ali-express` `coupons` |
+| [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-06-27**</sup>             | Realtime stock, crypto and other investment data.<br/>`stock` `analyze`                                                                   |
+| [Search1API](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **fatwang2** on **2024-05-06**</sup>                     | Search aggregation service, specifically designed for LLMs<br/>`web` `search`                                                             |
+
+> 📊 Total plugins: [<kbd>**50**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+
+ <!-- PLUGIN LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-agent]][docs-feat-agent]
+
+### `8` [Agent Market (GPTs)][docs-feat-agent]
+
+In LobeChat Agent Marketplace, creators can discover a vibrant and innovative community that brings together a multitude of well-designed agents,
+which not only play an important role in work scenarios but also offer great convenience in learning processes.
+Our marketplace is not just a showcase platform but also a collaborative space. Here, everyone can contribute their wisdom and share the agents they have developed.
+
+> \[!TIP]
+>
+> By [🤖/🏪 Submit Agents][submit-agents-link], you can easily submit your agent creations to our platform.
+> Importantly, LobeChat has established a sophisticated automated internationalization (i18n) workflow,
+> capable of seamlessly translating your agent into multiple language versions.
+> This means that no matter what language your users speak, they can experience your agent without barriers.
+
+> \[!IMPORTANT]
+>
+> We welcome all users to join this growing ecosystem and participate in the iteration and optimization of agents.
+> Together, we can create more interesting, practical, and innovative agents, further enriching the diversity and practicality of the agent offerings.
+
+<!-- AGENT LIST -->
+
+| Recent Submits                                                                                                                                                                           | Description                                                                                                                                                                                                             |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Contract Clause Refiner v1.0](https://chat-preview.lobehub.com/market?agent=business-contract)<br/><sup>By **[houhoufm](https://github.com/houhoufm)** on **2024-09-24**</sup>          | Output: {Optimize contract clauses for professional and concise expression}<br/>`contract-optimization` `legal-consultation` `copywriting` `terminology` `project-management`                                           |
+| [Meeting Assistant v1.0](https://chat-preview.lobehub.com/market?agent=meeting)<br/><sup>By **[houhoufm](https://github.com/houhoufm)** on **2024-09-24**</sup>                          | Professional meeting report assistant, distilling meeting key points into report sentences<br/>`meeting-reports` `writing` `communication` `workflow` `professional-skills`                                             |
+| [Stable Album Cover Prompter](https://chat-preview.lobehub.com/market?agent=title-bpm-stimmung)<br/><sup>By **[MellowTrixX](https://github.com/MellowTrixX)** on **2024-09-24**</sup>    | Professional graphic designer for front cover design specializing in creating visual concepts and designs for melodic techno music albums.<br/>`album-cover` `prompt` `stable-diffusion` `cover-design` `cover-prompts` |
+| [Advertising Copywriting Master](https://chat-preview.lobehub.com/market?agent=advertising-copywriting-master)<br/><sup>By **[leter](https://github.com/leter)** on **2024-09-23**</sup> | Specializing in product function analysis and advertising copywriting that resonates with user values<br/>`advertising-copy` `user-values` `marketing-strategy`                                                         |
+
+> 📊 Total agents: [<kbd>**392**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+
+ <!-- AGENT LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-database]][docs-feat-database]
+
+### `9` [Support Local / Remote Database][docs-feat-database]
+
+LobeChat supports the use of both server-side and local databases. Depending on your needs, you can choose the appropriate deployment solution:
+
+- **Local database**: suitable for users who want more control over their data and privacy protection. LobeChat uses CRDT (Conflict-Free Replicated Data Type) technology to achieve multi-device synchronization. This is an experimental feature aimed at providing a seamless data synchronization experience.
+- **Server-side database**: suitable for users who want a more convenient user experience. LobeChat supports PostgreSQL as a server-side database. For detailed documentation on how to configure the server-side database, please visit [Configure Server-side Database](https://lobehub.com/docs/self-hosting/advanced/server-database).
+
+Regardless of which database you choose, LobeChat can provide you with an excellent user experience.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-auth]][docs-feat-auth]
+
+### `10` [Support Multi-User Management][docs-feat-auth]
+
+LobeChat supports multi-user management and provides two main user authentication and management solutions to meet different needs:
+
+- **next-auth**: LobeChat integrates `next-auth`, a flexible and powerful identity verification library that supports multiple authentication methods, including OAuth, email login, credential login, etc. With `next-auth`, you can easily implement user registration, login, session management, social login, and other functions to ensure the security and privacy of user data.
+
+- [**Clerk**](https://go.clerk.com/exgqLG0): For users who need more advanced user management features, LobeChat also supports `Clerk`, a modern user management platform. `Clerk` provides richer functions, such as multi-factor authentication (MFA), user profile management, login activity monitoring, etc. With `Clerk`, you can get higher security and flexibility, and easily cope with complex user management needs.
+
+Regardless of which user management solution you choose, LobeChat can provide you with an excellent user experience and powerful functional support.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-pwa]][docs-feat-pwa]
+
+### `11` [Progressive Web App (PWA)][docs-feat-pwa]
+
+We deeply understand the importance of providing a seamless experience for users in today's multi-device environment.
+Therefore, we have adopted Progressive Web Application ([PWA](https://support.google.com/chrome/answer/9658361)) technology,
+a modern web technology that elevates web applications to an experience close to that of native apps.
+
+Through PWA, LobeChat can offer a highly optimized user experience on both desktop and mobile devices while maintaining its lightweight and high-performance characteristics.
+Visually and in terms of feel, we have also meticulously designed the interface to ensure it is indistinguishable from native apps,
+providing smooth animations, responsive layouts, and adapting to different device screen resolutions.
+
+> \[!NOTE]
+>
+> If you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:
+>
+> - Launch the Chrome or Edge browser on your computer.
+> - Visit the LobeChat webpage.
+> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon.
+> - Follow the instructions on the screen to complete the PWA Installation.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-mobile]][docs-feat-mobile]
+
+### `12` [Mobile Device Adaptation][docs-feat-mobile]
+
+We have carried out a series of optimization designs for mobile devices to enhance the user's mobile experience. Currently, we are iterating on the mobile user experience to achieve smoother and more intuitive interactions. If you have any suggestions or ideas, we welcome you to provide feedback through GitHub Issues or Pull Requests.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-theme]][docs-feat-theme]
+
+### `13` [Custom Themes][docs-feat-theme]
+
+As a design-engineering-oriented application, LobeChat places great emphasis on users' personalized experiences,
+hence introducing flexible and diverse theme modes, including a light mode for daytime and a dark mode for nighttime.
+Beyond switching theme modes, a range of color customization options allow users to adjust the application's theme colors according to their preferences.
+Whether it's a desire for a sober dark blue, a lively peach pink, or a professional gray-white, users can find their style of color choices in LobeChat.
+
+> \[!TIP]
+>
+> The default configuration can intelligently recognize the user's system color mode and automatically switch themes to ensure a consistent visual experience with the operating system.
+> For users who like to manually control details, LobeChat also offers intuitive setting options and a choice between chat bubble mode and document mode for conversation scenarios.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+### `*` What's more
+
+Beside these features, LobeChat also have much better basic technique underground:
+
+- [x] 💨 **Quick Deployment**: Using the Vercel platform or docker image, you can deploy with just one click and complete the process within 1 minute without any complex configuration.
+- [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
+- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy.
+- [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience.
+- [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more.
+
+> ✨ more features will be added when LobeChat evolve.
+
+---
+
+> \[!NOTE]
+>
+> You can find our upcoming [Roadmap][github-project-link] plans in the Projects section.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⚡️ Performance
+
+> \[!NOTE]
+>
+> The complete list of reports can be found in the [📘 Lighthouse Reports][docs-lighthouse]
+
+|                   Desktop                   |                   Mobile                   |
+| :-----------------------------------------: | :----------------------------------------: |
+|              ![][chat-desktop]              |              ![][chat-mobile]              |
+| [📑 Lighthouse Report][chat-desktop-report] | [📑 Lighthouse Report][chat-mobile-report] |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🛳 Self Hosting
+
+LobeChat provides Self-Hosted Version with Vercel and [Docker Image][docker-release-link]. This allows you to deploy your own chatbot within a few minutes without any prior knowledge.
+
+> \[!TIP]
+>
+> Learn more about [📘 Build your own LobeChat][docs-self-hosting] by checking it out.
+
+### `A` Deploying with Vercel, Zeabur or Sealos
+
+If you want to deploy this service yourself on either Vercel or Zeabur, you can follow these steps:
+
+- Prepare your [OpenAI API Key](https://platform.openai.com/account/api-keys).
+- Click the button below to start deployment: Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section.
+- After deployment, you can start using it.
+- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas; binding a custom domain can connect directly.
+
+<div align="center">
+
+|           Deploy with Vercel            |                     Deploy with Zeabur                      |                     Deploy with Sealos                      |                       Deploy with RepoCloud                       |
+| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------------: |
+| [![][deploy-button-image]][deploy-link] | [![][deploy-on-zeabur-button-image]][deploy-on-zeabur-link] | [![][deploy-on-sealos-button-image]][deploy-on-sealos-link] | [![][deploy-on-repocloud-button-image]][deploy-on-repocloud-link] |
+
+</div>
+
+#### After Fork
+
+After fork, only retain the upstream sync action and disable other actions in your repository on GitHub.
+
+#### Keep Updated
+
+If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available." This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to detect updates accurately.
+
+> \[!TIP]
+>
+> We suggest you redeploy using the following steps, [📘 Auto Sync With Latest][docs-upstream-sync]
+
+<br/>
+
+### `B` Deploying with Docker
+
+[![][docker-release-shield]][docker-release-link]
+[![][docker-size-shield]][docker-size-link]
+[![][docker-pulls-shield]][docker-pulls-link]
+
+We provide a Docker image for deploying the LobeChat service on your own private device. Use the following command to start the LobeChat service:
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!TIP]
+>
+> If you need to use the OpenAI service through a proxy, you can configure the proxy address using the `OPENAI_PROXY_URL` environment variable:
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!NOTE]
+>
+> For detailed instructions on deploying with Docker, please refer to the [📘 Docker Deployment Guide][docs-docker]
+
+<br/>
+
+### Environment Variable
+
+This project provides some additional configuration items set with environment variables:
+
+| Environment Variable | Required | Description                                                                                                                                                               | Example                                                                                                              |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `OPENAI_API_KEY`     | Yes      | This is the API key you apply on the OpenAI account page                                                                                                                  | `sk-xxxxxx...xxxxxx`                                                                                                 |
+| `OPENAI_PROXY_URL`   | No       | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL                             | `https://api.chatanywhere.cn` or `https://aihubmix.com/v1` <br/>The default value is<br/>`https://api.openai.com/v1` |
+| `ACCESS_CODE`        | No       | Add a password to access this service; you can set a long password to avoid leaking. If this value contains a comma, it is a password array.                              | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`                                                            |
+| `OPENAI_MODEL_LIST`  | No       | Used to control the model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model, separated by commas. | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`                                                                                |
+
+> \[!NOTE]
+>
+> The complete list of environment variables can be found in the [📘 Environment Variables][docs-env-var]
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 📦 Ecosystem
+
+| NPM                               | Repository                              | Description                                                                                           | Version                                   |
+| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| [@lobehub/ui][lobe-ui-link]       | [lobehub/lobe-ui][lobe-ui-github]       | Open-source UI component library dedicated to building AIGC web applications.                         | [![][lobe-ui-shield]][lobe-ui-link]       |
+| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | Popular AI / LLM Model Brand SVG Logo and Icon Collection.                                            | [![][lobe-icons-shield]][lobe-icons-link] |
+| [@lobehub/tts][lobe-tts-link]     | [lobehub/lobe-tts][lobe-tts-github]     | High-quality & reliable TTS/STT React Hooks library                                                   | [![][lobe-tts-shield]][lobe-tts-link]     |
+| [@lobehub/lint][lobe-lint-link]   | [lobehub/lobe-lint][lobe-lint-github]   | Configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. | [![][lobe-lint-shield]][lobe-lint-link]   |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🧩 Plugins
+
+Plugins provide a means to extend the [Function Calling][docs-functionc-call] capabilities of LobeChat. They can be used to introduce new function calls and even new ways to render message results. If you are interested in plugin development, please refer to our [📘 Plugin Development Guide][docs-plugin-dev] in the Wiki.
+
+- [lobe-chat-plugins][lobe-chat-plugins]: This is the plugin index for LobeChat. It accesses index.json from this repository to display a list of available plugins for LobeChat to the user.
+- [chat-plugin-template][chat-plugin-template]: This is the plugin template for LobeChat plugin development.
+- [@lobehub/chat-plugin-sdk][chat-plugin-sdk]: The LobeChat Plugin SDK assists you in creating exceptional chat plugins for Lobe Chat.
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: The LobeChat Plugins Gateway is a backend service that provides a gateway for LobeChat plugins. We deploy this service using Vercel. The primary API POST /api/v1/runner is deployed as an Edge Function.
+
+> \[!NOTE]
+>
+> The plugin system is currently undergoing major development. You can learn more in the following issues:
+>
+> - [x] [**Plugin Phase 1**](https://github.com/lobehub/lobe-chat/issues/73): Implement separation of the plugin from the main body, split the plugin into an independent repository for maintenance, and realize dynamic loading of the plugin.
+> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture, and developer-friendly.
+> - [x] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication, and examples.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ Local Development
+
+You can use GitHub Codespaces for online development:
+
+[![][codespaces-shield]][codespaces-link]
+
+Or clone it for local development:
+
+```fish
+$ git clone https://github.com/lobehub/lobe-chat.git
+$ cd lobe-chat
+$ pnpm install
+$ pnpm dev
+```
+
+If you would like to learn more details, please feel free to look at our [📘 Development Guide][docs-dev-guide].
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤝 Contributing
+
+Contributions of all types are more than welcome; if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to get stuck in to show us what you’re made of.
+
+> \[!TIP]
+>
+> We are creating a technology-driven forum, fostering knowledge interaction and the exchange of ideas that may culminate in mutual inspiration and collaborative innovation.
+>
+> Help us make LobeChat better. Welcome to provide product design feedback, user experience discussions directly to us.
+>
+> **Principal Maintainers:** [@arvinxx](https://github.com/arvinxx) [@canisminor1990](https://github.com/canisminor1990)
+
+[![][pr-welcome-shield]][pr-welcome-link]
+[![][submit-agents-shield]][submit-agents-link]
+[![][submit-plugin-shield]][submit-plugin-link]
+
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ❤️ Sponsor
+
+Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🔗 More Products
+
+- **[🅰️ Lobe SD Theme][lobe-theme]:** Modern theme for Stable Diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
+- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** WebUI for Midjourney, leverages AI to quickly generate a wide array of rich and diverse images from text prompts, sparking creativity and enhancing conversations.
+- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-link]
+
+</details>
+
+Copyright © 2024 [LobeHub][profile-link]. <br />
+This project is [Apache 2.0](./LICENSE) licensed.
+
+<!-- LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[blog]: https://lobehub.com/blog
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[chat-plugin-sdk]: https://github.com/lobehub/chat-plugin-sdk
+[chat-plugin-template]: https://github.com/lobehub/chat-plugin-template
+[chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
+[codecov-link]: https://codecov.io/gh/lobehub/lobe-chat
+[codecov-shield]: https://img.shields.io/codecov/c/github/lobehub/lobe-chat?labelColor=black&style=flat-square&logo=codecov&logoColor=white
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg
+[deploy-button-image]: https://vercel.com/button
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY,ACCESS_CODE&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%7C%20Access%20Code%20can%20protect%20your%20website&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-on-repocloud-button-image]: https://d16t0pc4846x52.cloudfront.net/deploylobe.svg
+[deploy-on-repocloud-link]: https://repocloud.io/details/?app_id=248
+[deploy-on-sealos-button-image]: https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg
+[deploy-on-sealos-link]: https://cloud.sealos.io/?openapp=system-template%3FtemplateName%3Dlobe-chat
+[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg
+[deploy-on-zeabur-link]: https://zeabur.com/templates/VZGGTI
+[discord-link]: https://discord.gg/AYFPHvv2jT
+[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat?color=369eff&labelColor=black&style=flat-square
+[docs]: https://lobehub.com/docs/usage/start
+[docs-dev-guide]: https://github.com/lobehub/lobe-chat/wiki/index
+[docs-docker]: https://lobehub.com/docs/self-hosting/platform/docker
+[docs-env-var]: https://lobehub.com/docs/self-hosting/environment-variables
+[docs-feat-agent]: https://lobehub.com/docs/usage/features/agent-market
+[docs-feat-auth]: https://lobehub.com/docs/usage/features/auth
+[docs-feat-database]: https://lobehub.com/docs/usage/features/database
+[docs-feat-knowledgebase]: https://lobehub.com/blog/knowledge-base
+[docs-feat-local]: https://lobehub.com/docs/usage/features/local-llm
+[docs-feat-mobile]: https://lobehub.com/docs/usage/features/mobile
+[docs-feat-plugin]: https://lobehub.com/docs/usage/features/plugin-system
+[docs-feat-provider]: https://lobehub.com/docs/usage/features/multi-ai-providers
+[docs-feat-pwa]: https://lobehub.com/docs/usage/features/pwa
+[docs-feat-t2i]: https://lobehub.com/docs/usage/features/text-to-image
+[docs-feat-theme]: https://lobehub.com/docs/usage/features/theme
+[docs-feat-tts]: https://lobehub.com/docs/usage/features/tts
+[docs-feat-vision]: https://lobehub.com/docs/usage/features/vision
+[docs-functionc-call]: https://lobehub.com/blog/openai-function-call
+[docs-lighthouse]: https://github.com/lobehub/lobe-chat/wiki/Lighthouse
+[docs-plugin-dev]: https://lobehub.com/docs/usage/plugins/development
+[docs-self-hosting]: https://lobehub.com/docs/self-hosting/start
+[docs-upstream-sync]: https://lobehub.com/docs/self-hosting/advanced/upstream-sync
+[docs-usage-ollama]: https://lobehub.com/docs/usage/providers/ollama
+[docs-usage-plugin]: https://lobehub.com/docs/usage/plugins/basic
+[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
+[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-chat/release.yml
+[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-chat/test.yml
+[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
+[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-chat?color=c4f042&labelColor=black&style=flat-square
+[github-forks-link]: https://github.com/lobehub/lobe-chat/network/members
+[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-chat?color=8ae8ff&labelColor=black&style=flat-square
+[github-issues-link]: https://github.com/lobehub/lobe-chat/issues
+[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-chat?color=ff80eb&labelColor=black&style=flat-square
+[github-license-link]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
+[github-license-shield]: https://img.shields.io/badge/license-apache%202.0-white?labelColor=black&style=flat-square
+[github-project-link]: https://github.com/lobehub/lobe-chat/projects
+[github-release-link]: https://github.com/lobehub/lobe-chat/releases
+[github-release-shield]: https://img.shields.io/github/v/release/lobehub/lobe-chat?color=369eff&labelColor=black&logo=github&style=flat-square
+[github-releasedate-link]: https://github.com/lobehub/lobe-chat/releases
+[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-chat?labelColor=black&style=flat-square
+[github-stars-link]: https://github.com/lobehub/lobe-chat/network/stargazers
+[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-chat?color=ffcb47&labelColor=black&style=flat-square
+[github-trending-shield]: https://trendshift.io/api/badge/repositories/2256
+[github-trending-url]: https://trendshift.io/repositories/2256
+[image-banner]: https://github.com/lobehub/lobe-chat/assets/28616219/9f155dff-4737-429f-9cad-a70a1a860c5f
+[image-feat-agent]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png
+[image-feat-auth]: https://github.com/lobehub/lobe-chat/assets/17870709/8ce70e15-40df-451e-b700-66090fe5b8c2
+[image-feat-database]: https://github.com/lobehub/lobe-chat/assets/17870709/c27a0234-a4e9-40e5-8bcb-42d5ce7e40f9
+[image-feat-knowledgebase]: https://github.com/user-attachments/assets/77e58e1c-c82f-4341-b159-f4eeede9967f
+[image-feat-local]: https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c
+[image-feat-mobile]: https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp
+[image-feat-plugin]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png
+[image-feat-privoder]: https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551
+[image-feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp
+[image-feat-t2i]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png
+[image-feat-theme]: https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp
+[image-feat-tts]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png
+[image-feat-vision]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png
+[image-overview]: https://github.com/lobehub/lobe-chat/assets/17870709/56b95d48-f573-41cd-8b38-387bf88bc4bf
+[image-star]: https://github.com/lobehub/lobe-chat/assets/17870709/cb06b748-513f-47c2-8740-d876858d7855
+[issues-link]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
+[lobe-chat-plugins]: https://github.com/lobehub/lobe-chat-plugins
+[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
+[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-icons-github]: https://github.com/lobehub/lobe-icons
+[lobe-icons-link]: https://www.npmjs.com/package/@lobehub/icons
+[lobe-icons-shield]: https://img.shields.io/npm/v/@lobehub/icons?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-lint-github]: https://github.com/lobehub/lobe-lint
+[lobe-lint-link]: https://www.npmjs.com/package/@lobehub/lint
+[lobe-lint-shield]: https://img.shields.io/npm/v/@lobehub/lint?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-midjourney-webui]: https://github.com/lobehub/lobe-midjourney-webui
+[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[lobe-tts-github]: https://github.com/lobehub/lobe-tts
+[lobe-tts-link]: https://www.npmjs.com/package/@lobehub/tts
+[lobe-tts-shield]: https://img.shields.io/npm/v/@lobehub/tts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-ui-github]: https://github.com/lobehub/lobe-ui
+[lobe-ui-link]: https://www.npmjs.com/package/@lobehub/ui
+[lobe-ui-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[official-site]: https://lobehub.com
+[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
+[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
+[profile-link]: https://github.com/lobehub
+[share-linkedin-link]: https://linkedin.com/feed
+[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square
+[share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
+[share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
+[share-reddit-link]: https://www.reddit.com/submit?title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
+[share-telegram-link]: https://t.me/share/url"?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black&logo=telegram&logoColor=white&style=flat-square
+[share-weibo-link]: http://service.weibo.com/share/share.php?sharesource=weibo&title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-weibo-shield]: https://img.shields.io/badge/-share%20on%20weibo-black?labelColor=black&logo=sinaweibo&logoColor=white&style=flat-square
+[share-whatsapp-link]: https://api.whatsapp.com/send?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat%20%23chatbot%20%23chatGPT%20%23openAI
+[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
+[share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become ❤️ LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
+[submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
+[submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
+[submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins
+[submit-plugin-shield]: https://img.shields.io/badge/🧩/🏪_submit_plugin-%E2%86%92-95f3d9?labelColor=black&style=for-the-badge
+[vercel-link]: https://chat-preview.lobehub.com
+[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square
+[vercel-shield-badge]: https://img.shields.io/badge/TRY%20LOBECHAT-ONLINE-55b467?labelColor=black&logo=vercel&style=for-the-badge

DigitalHumanWeb/README.zh-CN.md

@@ -0,0 +1,849 @@
+<div align="center"><a name="readme-top"></a>
+
+[![][image-banner]][vercel-link]
+
+<h1>Lobe Chat</h1>
+
+现代化设计的开源 ChatGPT/LLMs 聊天应用与开发框架<br/>
+支持语音合成、多模态、可扩展的（[function call][docs-functionc-call]）插件系统<br/>
+一键**免费**拥有你自己的 ChatGPT/Gemini/Claude/Ollama 应用
+
+[English](./README.md) · **简体中文** · [日本語](./README.ja-JP.md) · [官网][official-site] · [更新日志](./CHANGELOG.md) · [文档][docs] · [博客][blog] · [反馈问题][github-issues-link]
+
+<!-- SHIELD GROUP -->
+
+[![][github-release-shield]][github-release-link]
+[![][docker-release-shield]][docker-release-link]
+[![][vercel-shield]][vercel-link]
+[![][discord-shield]][discord-link]<br/>
+[![][codecov-shield]][codecov-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]
+[![][github-releasedate-shield]][github-releasedate-link]<br/>
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]<br>
+[![][sponsor-shield]][sponsor-link]
+
+**分享 LobeChat 给你的好友**
+
+[![][share-x-shield]][share-x-link]
+[![][share-telegram-shield]][share-telegram-link]
+[![][share-whatsapp-shield]][share-whatsapp-link]
+[![][share-reddit-shield]][share-reddit-link]
+[![][share-weibo-shield]][share-weibo-link]
+[![][share-mastodon-shield]][share-mastodon-link]
+
+<sup>探索私人生产力的未来。在个体崛起的时代中为你打造.</sup>
+
+[![][github-trending-shield]][github-trending-url]
+[![][github-hello-shield]][github-hello-url]
+
+[![][image-overview]][vercel-link]
+
+</div>
+
+<details>
+<summary><kbd>目录树</kbd></summary>
+
+#### TOC
+
+- [👋🏻 开始使用 & 交流](#-开始使用--交流)
+- [✨ 特性一览](#-特性一览)
+  - [`1` 文件上传 / 知识库](#1-文件上传--知识库)
+  - [`2` 多模型服务商支持](#2-多模型服务商支持)
+  - [`3` 支持本地大语言模型 (LLM)](#3-支持本地大语言模型-llm)
+  - [`4` 模型视觉识别 (Model Visual)](#4-模型视觉识别-model-visual)
+  - [`5` TTS & STT 语音会话](#5-tts--stt-语音会话)
+  - [`6` Text to Image 文生图](#6-text-to-image-文生图)
+  - [`7` 插件系统 (Tools Calling)](#7-插件系统-tools-calling)
+  - [`8` 助手市场 (GPTs)](#8-助手市场-gpts)
+  - [`9` 支持本地 / 远程数据库](#9-支持本地--远程数据库)
+  - [`10` 支持多用户管理](#10-支持多用户管理)
+  - [`11` 渐进式 Web 应用 (PWA)](#11-渐进式-web-应用-pwa)
+  - [`12` 移动设备适配](#12-移动设备适配)
+  - [`13` 自定义主题](#13-自定义主题)
+  - [更多特性](#更多特性)
+- [⚡️ 性能测试](#️-性能测试)
+- [🛳 开箱即用](#-开箱即用)
+  - [`A` 使用 Vercel、Zeabur 或 Sealos 部署](#a-使用-vercelzeabur-或-sealos-部署)
+  - [`B` 使用 Docker 部署](#b-使用-docker-部署)
+  - [环境变量](#环境变量)
+  - [获取 OpenAI API Key](#获取-openai-api-key)
+- [📦 生态系统](#-生态系统)
+- [🧩 插件体系](#-插件体系)
+- [⌨️ 本地开发](#️-本地开发)
+- [🤝 参与贡献](#-参与贡献)
+- [❤ 社区赞助](#-社区赞助)
+- [🔗 更多工具](#-更多工具)
+
+####
+
+<br/>
+
+</details>
+
+## 👋🏻 开始使用 & 交流
+
+我们是一群充满热情的设计工程师，希望为 AIGC 提供现代化的设计组件和工具，并以开源的方式分享。
+同时通过 Bootstrapping 的方式，我们希望能够为开发者和用户提供一个更加开放、更加透明友好的产品生态。
+
+不论普通用户与专业开发者，LobeHub 旨在成为所有人的 AI Agent 实验场。LobeChat 目前正在积极开发中，有任何需求或者问题，欢迎提交 [issues][issues-link]
+
+| [![][vercel-shield-badge]][vercel-link]   | 无需安装或注册！访问我们的网站，快速体验                                     |
+| :---------------------------------------- | :--------------------------------------------------------------------------- |
+| [![][discord-shield-badge]][discord-link] | 加入我们的 Discord 社区！这是你可以与开发者和其他 LobeHub 热衷用户交流的地方 |
+
+> \[!IMPORTANT]
+>
+> **收藏项目**，你将从 GitHub 上无延迟地接收所有发布通知～⭐️
+
+[![][image-star]][github-stars-link]
+
+<details><summary><kbd>Star History</kbd></summary>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&theme=dark&type=Date">
+    <img src="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&type=Date">
+  </picture>
+</details>
+
+## ✨ 特性一览
+
+[![][image-feat-knowledgebase]][docs-feat-knowledgebase]
+
+### `1` [文件上传 / 知识库][docs-feat-knowledgebase]
+
+LobeChat 支持文件上传与知识库功能，你可以上传文件、图片、音频、视频等多种类型的文件，以及创建知识库，方便用户管理和查找文件。同时在对话中使用文件和知识库功能，实现更加丰富的对话体验。
+
+<https://github.com/user-attachments/assets/faa8cf67-e743-4590-8bf6-ebf6ccc34175>
+
+> \[!TIP]
+>
+> 查阅 [📘 LobeChat 知识库上线 —— 此刻起，跬步千里](https://lobehub.com/zh/blog/knowledge-base) 了解详情。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-privoder]][docs-feat-provider]
+
+### `2` [多模型服务商支持][docs-feat-provider]
+
+在 LobeChat 的不断发展过程中，我们深刻理解到在提供 AI 会话服务时模型服务商的多样性对于满足社区需求的重要性。因此，我们不再局限于单一的模型服务商，而是拓展了对多种模型服务商的支持，以便为用户提供更为丰富和多样化的会话选择。
+
+通过这种方式，LobeChat 能够更灵活地适应不同用户的需求，同时也为开发者提供了更为广泛的选择空间。
+
+#### 已支持的模型服务商
+
+我们已经实现了对以下模型服务商的支持：
+
+- **AWS Bedrock**：集成了 AWS Bedrock 服务，支持了 **Claude / LLama2** 等模型，提供了强大的自然语言处理能力。[了解更多](https://aws.amazon.com/cn/bedrock)
+- **Google AI (Gemini Pro、Gemini Vision)**：接入了 Google 的 **Gemini** 系列模型，包括 Gemini 和 Gemini Pro，以支持更高级的语言理解和生成。[了解更多](https://deepmind.google/technologies/gemini/)
+- **Anthropic (Claude)**：接入了 Anthropic 的 **Claude** 系列模型，包括 Claude 3 和 Claude 2，多模态突破，超长上下文，树立行业新基准。[了解更多](https://www.anthropic.com/claude)
+- **ChatGLM**：加入了智谱的 **ChatGLM** 系列模型（GLM-4/GLM-4-vision/GLM-3-turbo），为用户提供了另一种高效的会话模型选择。[了解更多](https://www.zhipuai.cn/)
+- **Moonshot AI (月之暗面)**：集成了 Moonshot 系列模型，这是一家来自中国的创新性 AI 创业公司，旨在提供更深层次的会话理解。[了解更多](https://www.moonshot.cn/)
+- **Together.ai**：集成部署了数百种开源模型和向量模型，无需本地部署即可随时访问这些模型。[了解更多](https://www.together.ai/)
+- **01.AI (零一万物)**：集成了零一万物模型，系列 API 具备较快的推理速度，这不仅缩短了处理时间，同时也保持了出色的模型效果。[了解更多](https://www.lingyiwanwu.com/)
+- **Groq**：接入了 Groq 的 AI 模型，高效处理消息序列，生成回应，胜任多轮对话及单次交互任务。[了解更多](https://groq.com/)
+- **OpenRouter**：其支持包括 **Claude 3**，**Gemma**，**Mistral**，**Llama2**和**Cohere**等模型路由，支持智能路由优化，提升使用效率，开放且灵活。[了解更多](https://openrouter.ai/)
+- **Minimax**: 接入了 Minimax 的 AI 模型，包括 MoE 模型 **abab6**，提供了更多的选择空间。[了解更多](https://www.minimaxi.com/)
+- **DeepSeek**: 接入了 DeepSeek 的 AI 模型，包括最新的 **DeepSeek-V2**，提供兼顾性能与价格的模型。[了解更多](https://www.deepseek.com/)
+- **Qwen**: 接入了 Qwen 的 AI 模型，包括最新的 **qwen-turbo**，**qwen-plus** 和 **qwen-max** 等模型。[了解更多](https://help.aliyun.com/zh/dashscope/developer-reference/model-introduction)
+
+同时，我们也在计划支持更多的模型服务商，如 Replicate 和 Perplexity 等，以进一步丰富我们的服务商库。如果你希望让 LobeChat 支持你喜爱的服务商，欢迎加入我们的[社区讨论](https://github.com/lobehub/lobe-chat/discussions/1284)。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-local]][docs-feat-local]
+
+### `3` [支持本地大语言模型 (LLM)][docs-feat-local]
+
+为了满足特定用户的需求，LobeChat 还基于 [Ollama](https://ollama.ai) 支持了本地模型的使用，让用户能够更灵活地使用自己的或第三方的模型。
+
+> \[!TIP]
+>
+> 查阅 [📘 在 LobeChat 中使用 Ollama][docs-usage-ollama] 获得更多信息
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-vision]][docs-feat-vision]
+
+### `4` [模型视觉识别 (Model Visual)][docs-feat-vision]
+
+LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型，这是一个具备视觉识别能力的多模态应用。
+用户可以轻松上传图片或者拖拽图片到对话框中，助手将能够识别图片内容，并在此基础上进行智能对话，构建更智能、更多元化的聊天场景。
+
+这一特性打开了新的互动方式，使得交流不再局限于文字，而是可以涵盖丰富的视觉元素。无论是日常使用中的图片分享，还是在特定行业内的图像解读，助手都能提供出色的对话体验。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-tts]][docs-feat-tts]
+
+### `5` [TTS & STT 语音会话][docs-feat-tts]
+
+LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Speech-to-Text，STT）技术，这使得我们的应用能够将文本信息转化为清晰的语音输出，用户可以像与真人交谈一样与我们的对话助手进行交流。
+用户可以从多种声音中选择，给助手搭配合适的音源。 同时，对于那些倾向于听觉学习或者想要在忙碌中获取信息的用户来说，TTS 提供了一个极佳的解决方案。
+
+在 LobeChat 中，我们精心挑选了一系列高品质的声音选项 (OpenAI Audio, Microsoft Edge Speech)，以满足不同地域和文化背景用户的需求。用户可以根据个人喜好或者特定场景来选择合适的语音，从而获得个性化的交流体验。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-t2i]][docs-feat-t2i]
+
+### `6` [Text to Image 文生图][docs-feat-t2i]
+
+支持最新的文本到图片生成技术，LobeChat 现在能够让用户在与助手对话中直接调用文生图工具进行创作。
+通过利用 [`DALL-E 3`](https://openai.com/dall-e-3)、[`MidJourney`](https://www.midjourney.com/) 和 [`Pollinations`](https://pollinations.ai/) 等 AI 工具的能力， 助手们现在可以将你的想法转化为图像。
+同时可以更私密和沉浸式地完成你的创作过程。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-plugin]][docs-feat-plugin]
+
+### `7` [插件系统 (Tools Calling)][docs-feat-plugin]
+
+LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地增强了 ChatGPT 的实用性和灵活性。
+
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+通过利用插件，ChatGPT 能够实现实时信息的获取和处理，例如自动获取最新新闻头条，为用户提供即时且相关的资讯。
+
+此外，这些插件不仅局限于新闻聚合，还可以扩展到其他实用的功能，如快速检索文档、生成图象、获取电商平台数据，以及其他各式各样的第三方服务。
+
+> 通过文档了解更多 [📘 插件使用][docs-usage-plugin]
+
+<!-- PLUGIN LIST -->
+
+| 最近新增                                                                                                               | 插件描述                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| [通义万象图像生成器](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **YoungTx** on **2024-08-09**</sup>  | 此插件使用阿里巴巴的通义万象模型根据文本提示生成图像。<br/>`图像` `通义` `万象`                                    |
+| [购物工具](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **shoppingtools** on **2024-07-19**</sup>      | 在 eBay 和 AliExpress 上搜索产品，查找 eBay 活动和优惠券。获取快速示例。<br/>`购物` `e-bay` `ali-express` `优惠券` |
+| [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-06-27**</sup> | 实时股票、加密货币和其他投资数据。<br/>`股票` `分析`                                                               |
+| [Search1API](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **fatwang2** on **2024-05-06**</sup>         | 搜索聚合服务，专为 LLMs 设计<br/>`web` `search`                                                                    |
+
+> 📊 Total plugins: [<kbd>**50**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+
+ <!-- PLUGIN LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-agent]][docs-feat-agent]
+
+### `8` [助手市场 (GPTs)][docs-feat-agent]
+
+在 LobeChat 的助手市场中，创作者们可以发现一个充满活力和创新的社区，它汇聚了众多精心设计的助手，这些助手不仅在工作场景中发挥着重要作用，也在学习过程中提供了极大的便利。
+我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的智慧，分享个人开发的助手。
+
+> \[!TIP]
+>
+> 通过 [🤖/🏪 提交助手][submit-agents-link] ，你可以轻松地将你的助手作品提交到我们的平台。我们特别强调的是，LobeChat 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的助手转化为多种语言版本。
+> 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的助手。
+
+> \[!IMPORTANT]
+>
+> 我欢迎所有用户加入这个不断成长的生态系统，共同参与到助手的迭代与优化中来。共同创造出更多有趣、实用且具有创新性的助手，进一步丰富助手的多样性和实用性。
+
+<!-- AGENT LIST -->
+
+| 最近新增                                                                                                                                                                         | 助手说明                                                                                                              |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| [合同条款精炼师 v1.0](https://chat-preview.lobehub.com/market?agent=business-contract)<br/><sup>By **[houhoufm](https://github.com/houhoufm)** on **2024-09-24**</sup>           | 输出: {优化合同条款，专业简洁表达}<br/>`合同优化` `法律咨询` `文案撰写` `专业术语` `项目管理`                         |
+| [会议助手 v1.0](https://chat-preview.lobehub.com/market?agent=meeting)<br/><sup>By **[houhoufm](https://github.com/houhoufm)** on **2024-09-24**</sup>                           | 专业会议汇报助手，提炼会议要点成汇报句子<br/>`会议汇报` `撰写` `沟通` `工作流程` `专业技能`                           |
+| [稳定专辑封面提示生成器](https://chat-preview.lobehub.com/market?agent=title-bpm-stimmung)<br/><sup>By **[MellowTrixX](https://github.com/MellowTrixX)** on **2024-09-24**</sup> | 专业的平面设计师，专注于为旋律科技音乐专辑创建视觉概念和设计。<br/>`专辑封面` `提示` `稳定扩散` `封面设计` `封面提示` |
+| [广告文案创作大师](https://chat-preview.lobehub.com/market?agent=advertising-copywriting-master)<br/><sup>By **[leter](https://github.com/leter)** on **2024-09-23**</sup>       | 擅长产品功能分析与用户价值观广告文案创作<br/>`广告文案` `用户价值观` `营销策略`                                       |
+
+> 📊 Total agents: [<kbd>**392**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+
+ <!-- AGENT LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-database]][docs-feat-database]
+
+### `9` [支持本地 / 远程数据库][docs-feat-database]
+
+LobeChat 支持同时使用服务端数据库和本地数据库。根据您的需求，您可以选择合适的部署方案：
+
+- 本地数据库：适合希望对数据有更多掌控感和隐私保护的用户。LobeChat 采用了 CRDT (Conflict-Free Replicated Data Type) 技术，实现了多端同步功能。这是一项实验性功能，旨在提供无缝的数据同步体验。
+- 服务端数据库：适合希望更便捷使用体验的用户。LobeChat 支持 PostgreSQL 作为服务端数据库。关于如何配置服务端数据库的详细文档，请前往 [配置服务端数据库](https://lobehub.com/zh/docs/self-hosting/advanced/server-database)。
+
+无论您选择哪种数据库，LobeChat 都能为您提供卓越的用户体验。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-auth]][docs-feat-auth]
+
+### `10` [支持多用户管理][docs-feat-auth]
+
+LobeChat 支持多用户管理，提供了两种主要的用户认证和管理方案，以满足不同需求：
+
+- **next-auth**：LobeChat 集成了 `next-auth`，一个灵活且强大的身份验证库，支持多种身份验证方式，包括 OAuth、邮件登录、凭证登录等。通过 `next-auth`，您可以轻松实现用户的注册、登录、会话管理以及社交登录等功能，确保用户数据的安全性和隐私性。
+
+- [**Clerk**](https://go.clerk.com/exgqLG0)：对于需要更高级用户管理功能的用户，LobeChat 还支持 `Clerk`，一个现代化的用户管理平台。`Clerk` 提供了更丰富的功能，如多因素认证 (MFA)、白名单、用户管理、登录活动监控等。通过 `Clerk`，您可以获得更高的安全性和灵活性，轻松应对生产级的用户管理需求。
+
+您可以根据自己的需求，选择合适的用户管理方案。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-pwa]][docs-feat-pwa]
+
+### `11` [渐进式 Web 应用 (PWA)][docs-feat-pwa]
+
+我们深知在当今多设备环境下为用户提供无缝体验的重要性。为此，我们采用了渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术，
+这是一种能够将网页应用提升至接近原生应用体验的现代 Web 技术。通过 PWA，LobeChat 能够在桌面和移动设备上提供高度优化的用户体验，同时保持轻量级和高性能的特点。
+在视觉和感觉上，我们也经过精心设计，以确保它的界面与原生应用无差别，提供流畅的动画、响应式布局和适配不同设备的屏幕分辨率。
+
+> \[!NOTE]
+>
+> 若您未熟悉 PWA 的安装过程，您可以按照以下步骤将 LobeChat 添加为您的桌面应用（也适用于移动设备）：
+>
+> - 在电脑上运行 Chrome 或 Edge 浏览器 .
+> - 访问 LobeChat 网页 .
+> - 在地址栏的右上角，单击 <kbd>安装</kbd> 图标 .
+> - 根据屏幕上的指示完成 PWA 的安装 .
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-mobile]][docs-feat-mobile]
+
+### `12` [移动设备适配][docs-feat-mobile]
+
+针对移动设备进行了一系列的优化设计，以提升用户的移动体验。目前，我们正在对移动端的用户体验进行版本迭代，以实现更加流畅和直观的交互。如果您有任何建议或想法，我们非常欢迎您通过 GitHub Issues 或者 Pull Requests 提供反馈。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-theme]][docs-feat-theme]
+
+### `13` [自定义主题][docs-feat-theme]
+
+作为设计工程师出身，LobeChat 在界面设计上充分考虑用户的个性化体验，因此引入了灵活多变的主题模式，其中包括日间的亮色模式和夜间的深色模式。
+除了主题模式的切换，还提供了一系列的颜色定制选项，允许用户根据自己的喜好来调整应用的主题色彩。无论是想要沉稳的深蓝，还是希望活泼的桃粉，或者是专业的灰白，用户都能够在 LobeChat 中找到匹配自己风格的颜色选择。
+
+> \[!TIP]
+>
+> 默认配置能够智能地识别用户系统的颜色模式，自动进行主题切换，以确保应用界面与操作系统保持一致的视觉体验。对于喜欢手动调控细节的用户，LobeChat 同样提供了直观的设置选项，针对聊天场景也提供了对话气泡模式和文档模式的选择。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+### 更多特性
+
+除了上述功能特性以外，LobeChat 所具有的设计和技术能力将为你带来更多使用保障：
+
+- [x] 💎 **精致 UI 设计**：经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA，提供更加接近原生应用的体验。
+- [x] 🗣️ **流畅的对话体验**：流式响应带来流畅的对话体验，并且支持完整的 Markdown 渲染，包括代码高亮、LaTex 公式、Mermaid 流程图等。
+- [x] 💨 **快速部署**：使用 Vercel 平台或者我们的 Docker 镜像，只需点击一键部署按钮，即可在 1 分钟内完成部署，无需复杂的配置过程。
+- [x] 🔒 **隐私安全**：所有数据保存在用户浏览器本地，保证用户的隐私安全。
+- [x] 🌐 **自定义域名**：如果用户拥有自己的域名，可以将其绑定到平台上，方便在任何地方快速访问对话助手。
+
+> ✨ 随着产品迭代持续更新，我们将会带来更多更多令人激动的功能！
+
+---
+
+> \[!NOTE]
+>
+> 你可以在 Projects 中找到我们后续的 [Roadmap][github-project-link] 计划
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⚡️ 性能测试
+
+> \[!NOTE]
+>
+> 完整测试报告可见 [📘 Lighthouse 性能测试][docs-lighthouse]
+
+|                    Desktop                    |                    Mobile                    |
+| :-------------------------------------------: | :------------------------------------------: |
+|               ![][chat-desktop]               |               ![][chat-mobile]               |
+| [📑 Lighthouse 测试报告][chat-desktop-report] | [📑 Lighthouse 测试报告][chat-mobile-report] |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🛳 开箱即用
+
+LobeChat 提供了 Vercel 的 自托管版本 和 [Docker 镜像][docker-release-link]，这使你可以在几分钟内构建自己的聊天机器人，无需任何基础知识。
+
+> \[!TIP]
+>
+> 完整教程请查阅 [📘 构建属于自己的 Lobe Chat][docs-self-hosting]
+
+### `A` 使用 Vercel、Zeabur 或 Sealos 部署
+
+如果想在 Vercel 或 Zeabur 上部署该服务，可以按照以下步骤进行操作：
+
+- 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys) 。
+- 点击下方按钮开始部署： 直接使用 GitHub 账号登录即可，记得在环境变量页填入 `OPENAI_API_KEY` （必填） and `ACCESS_CODE`（推荐）；
+- 部署完毕后，即可开始使用；
+- 绑定自定义域名（可选）：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。目前 Zeabur 提供的域名还未被污染，大多数地区都可以直连。
+
+<div align="center">
+
+|            使用 Vercel 部署             |                      使用 Zeabur 部署                       |                      使用 Sealos 部署                       |
+| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |
+| [![][deploy-button-image]][deploy-link] | [![][deploy-on-zeabur-button-image]][deploy-on-zeabur-link] | [![][deploy-on-sealos-button-image]][deploy-on-sealos-link] |
+
+</div>
+
+#### Fork 之后
+
+在 Fork 后，请只保留 "upstream sync" Action 并在你 fork 的 GitHub Repo 中禁用其他 Action。
+
+#### 保持更新
+
+如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。
+
+> \[!TIP]
+>
+> 我们建议按照 [📘 自动同步更新][docs-upstream-sync] 步骤重新部署。
+
+<br/>
+
+### `B` 使用 Docker 部署
+
+[![][docker-release-shield]][docker-release-link]
+[![][docker-size-shield]][docker-size-link]
+[![][docker-pulls-shield]][docker-pulls-link]
+
+我们提供了 Docker 镜像，供你在自己的私有设备上部署 LobeChat 服务。使用以下命令即可使用一键启动 LobeChat 服务：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!TIP]
+>
+> 如果你需要通过代理使用 OpenAI 服务，你可以使用 `OPENAI_PROXY_URL` 环境变量来配置代理地址：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!NOTE]
+>
+> 有关 Docker 部署的详细说明，详见 [📘 使用 Docker 部署][docs-docker]
+
+<br/>
+
+### 环境变量
+
+本项目提供了一些额外的配置项，使用环境变量进行设置：
+
+| 环境变量            | 类型 | 描述                                                                                                                          | 示例                                                                                                   |
+| ------------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `OPENAI_API_KEY`    | 必选 | 这是你在 OpenAI 账户页面申请的 API 密钥                                                                                       | `sk-xxxxxx...xxxxxx`                                                                                   |
+| `OPENAI_PROXY_URL`  | 可选 | 如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL                                        | `https://api.chatanywhere.cn` 或 `https://aihubmix.com/v1`<br/>默认值:<br/>`https://api.openai.com/v1` |
+| `ACCESS_CODE`       | 可选 | 添加访问此服务的密码，你可以设置一个长密码以防被爆破，该值用逗号分隔时为密码数组                                              | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`                                              |
+| `OPENAI_MODEL_LIST` | 可选 | 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。 | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`                                                                  |
+
+> \[!NOTE]
+>
+> 完整环境变量可见 [📘 环境变量][docs-env-var]
+
+<br/>
+
+### 获取 OpenAI API Key
+
+API Key 是使用 LobeChat 进行大语言模型会话的必要信息，本节以 OpenAI 模型服务商为例，简要介绍获取 API Key 的方式。
+
+#### `A` 通过 OpenAI 官方渠道
+
+- 注册一个 [OpenAI 账户](https://platform.openai.com/signup)，你需要使用国际手机号、非大陆邮箱进行注册；
+- 注册完毕后，前往 [API Keys](https://platform.openai.com/api-keys) 页面，点击 `Create new secret key` 创建新的 API Key:
+
+| 步骤 1：打开创建窗口                                                                                                                               | 步骤 2：创建 API Key                                                                                                                               | 步骤 3：获取 API Key                                                                                                                               |
+| -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png" height="200"/> | <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png" height="200"/> | <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png" height="200"/> |
+
+- 将此 API Key 填写到 LobeChat 的 API Key 配置中，即可开始使用。
+
+> \[!TIP]
+>
+> 账户注册后，一般有 5 美元的免费额度，但有效期只有三个月。
+> 如果你希望长期使用你的 API Key，你需要完成支付的信用卡绑定。由于 OpenAI 只支持外币信用卡，因此你需要找到合适的支付渠道，此处不再详细展开。
+
+<br/>
+
+#### `B` 通过 OpenAI 第三方代理商
+
+如果你发现注册 OpenAI 账户或者绑定外币信用卡比较麻烦，可以考虑借助一些知名的 OpenAI 第三方代理商来获取 API Key，这可以有效降低获取 OpenAI API Key 的门槛。但与此同时，一旦使用三方服务，你可能也需要承担潜在的风险，
+请根据你自己的实际情况自行决策。以下是常见的第三方模型代理商列表，供你参考：
+
+|                                                                                                                                                   | 服务商       | 特性说明                                                        | Proxy 代理地址            | 链接                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | --------------------------------------------------------------- | ------------------------- | ------------------------------- |
+| <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/296272721-c3ac0bf3-e433-4496-89c4-ebdc20689c17.jpg" width="48" /> | **AiHubMix** | 使用 OpenAI 企业接口，全站模型价格为官方 **86 折**（含 GPT-4 ） | `https://aihubmix.com/v1` | [获取](https://lobe.li/XHnZIUP) |
+
+> \[!WARNING]
+>
+> **免责申明**: 在此推荐的 OpenAI API Key 由第三方代理商提供，所以我们不对 API Key 的 **有效性** 和 **安全性** 负责，请你自行承担购买和使用 API Key 的风险。
+
+> \[!NOTE]
+>
+> 如果你是模型服务商，并认为自己的服务足够稳定且价格实惠，欢迎联系我们，我们会在自行体验和测试后酌情推荐。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 📦 生态系统
+
+| NPM                               | 仓库                                    | 描述                                                                                     | 版本                                      |
+| --------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- |
+| [@lobehub/ui][lobe-ui-link]       | [lobehub/lobe-ui][lobe-ui-github]       | 构建 AIGC 网页应用程序而设计的开源 UI 组件库                                             | [![][lobe-ui-shield]][lobe-ui-link]       |
+| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集                                           | [![][lobe-icons-shield]][lobe-icons-link] |
+| [@lobehub/tts][lobe-tts-link]     | [lobehub/lobe-tts][lobe-tts-github]     | AI TTS / STT 语音合成 / 识别 React Hooks 库                                              | [![][lobe-tts-shield]][lobe-tts-link]     |
+| [@lobehub/lint][lobe-lint-link]   | [lobehub/lobe-lint][lobe-lint-github]   | LobeHub 代码样式规范 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release | [![][lobe-lint-shield]][lobe-lint-link]   |
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🧩 插件体系
+
+插件提供了扩展 LobeChat [Function Calling][docs-functionc-call] 能力的方法。可以用于引入新的 Function Calling，甚至是新的消息结果渲染方式。如果你对插件开发感兴趣，请在 Wiki 中查阅我们的 [📘 插件开发指引][docs-plugin-dev] 。
+
+- [lobe-chat-plugins][lobe-chat-plugins]：插件索引从该仓库的 index.json 中获取插件列表并显示给用户。
+- [chat-plugin-template][chat-plugin-template]：插件开发模版，你可以通过项目模版快速新建插件项目。
+- [@lobehub/chat-plugin-sdk][chat-plugin-sdk]：插件 SDK 可帮助您创建出色的 Lobe Chat 插件。
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]：插件网关是一个后端服务，作为 LobeChat 插件的网关。我们使用 Vercel 部署此服务。主要的 API POST /api/v1/runner 被部署为 Edge Function。
+
+> \[!NOTE]
+>
+> 插件系统目前正在进行重大开发。您可以在以下 Issues 中了解更多信息:
+>
+> - [x] [**插件一期**](https://github.com/lobehub/lobe-chat/issues/73): 实现插件与主体分离，将插件拆分为独立仓库维护，并实现插件的动态加载
+> - [x] [**插件二期**](https://github.com/lobehub/lobe-chat/issues/97): 插件的安全性与使用的稳定性，更加精准地呈现异常状态，插件架构的可维护性与开发者友好
+> - [x] [**插件三期**](https://github.com/lobehub/lobe-chat/issues/149)：更高阶与完善的自定义能力，支持插件鉴权与示例
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ 本地开发
+
+可以使用 GitHub Codespaces 进行在线开发：
+
+[![][codespaces-shield]][codespaces-link]
+
+或者使用以下命令进行本地开发：
+
+```fish
+$ git clone https://github.com/lobehub/lobe-chat.git
+$ cd lobe-chat
+$ pnpm install
+$ pnpm run dev
+```
+
+如果你希望了解更多详情，欢迎可以查阅我们的 [📘 开发指南][docs-dev-guide]
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤝 参与贡献
+
+我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub [Issues][github-issues-link] 和 [Projects][github-project-link]，大展身手，向我们展示你的奇思妙想。
+
+> \[!TIP]
+>
+> 我们希望创建一个技术分享型社区，一个可以促进知识共享、想法交流，激发彼此鼓励和协作的环境。
+> 同时欢迎联系我们提供产品功能和使用体验反馈，帮助我们将 LobeChat 建设得更好。
+>
+> **组织维护者:** [@arvinxx](https://github.com/arvinxx) [@canisminor1990](https://github.com/canisminor1990)
+
+[![][pr-welcome-shield]][pr-welcome-link]
+[![][submit-agents-shield]][submit-agents-link]
+[![][submit-plugin-shield]][submit-plugin-link]
+
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ❤ 社区赞助
+
+每一分支持都珍贵无比，汇聚成我们支持的璀璨银河！你就像一颗划破夜空的流星，瞬间点亮我们前行的道路。感谢你对我们的信任 —— 你的支持笔就像星辰导航，一次又一次地为项目指明前进的光芒。
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🔗 更多工具
+
+- **[🅰️ Lobe SD Theme][lobe-theme]:** Stable Diffusion WebUI 的现代主题，精致的界面设计，高度可定制的 UI，以及提高效率的功能。
+- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** Midjourney WebUI, 能够根据文本提示快速生成丰富多样的图像，激发创造力，增强对话交流。
+- **[🌏 Lobe i18n][lobe-i18n]:** Lobe i18n 是一个由 ChatGPT 驱动的 i18n（国际化）翻译过程的自动化工具。它支持自动分割大文件、增量更新，以及为 OpenAI 模型、API 代理和温度提供定制选项的功能。
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit 是一个 CLI 工具，它利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-link]
+
+</details>
+
+Copyright © 2023 [LobeHub][profile-link]. <br />
+This project is [Apache 2.0](./LICENSE) licensed.
+
+<!-- LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[blog]: https://lobehub.com/zh/blog
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[chat-plugin-sdk]: https://github.com/lobehub/chat-plugin-sdk
+[chat-plugin-template]: https://github.com/lobehub/chat-plugin-template
+[chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
+[codecov-link]: https://codecov.io/gh/lobehub/lobe-chat
+[codecov-shield]: https://img.shields.io/codecov/c/github/lobehub/lobe-chat?labelColor=black&style=flat-square&logo=codecov&logoColor=white
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg
+[deploy-button-image]: https://vercel.com/button
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY,ACCESS_CODE&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%7C%20Access%20Code%20can%20protect%20your%20website&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-on-sealos-button-image]: https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg
+[deploy-on-sealos-link]: https://cloud.sealos.io/?openapp=system-template%3FtemplateName%3Dlobe-chat
+[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg
+[deploy-on-zeabur-link]: https://zeabur.com/templates/VZGGTI
+[discord-link]: https://discord.gg/AYFPHvv2jT
+[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat?color=369eff&labelColor=black&style=flat-square
+[docs]: https://lobehub.com/zh/docs/usage/start
+[docs-dev-guide]: https://github.com/lobehub/lobe-chat/wiki/index
+[docs-docker]: https://lobehub.com/docs/self-hosting/platform/docker
+[docs-env-var]: https://lobehub.com/docs/self-hosting/environment-variables
+[docs-feat-agent]: https://lobehub.com/docs/usage/features/agent-market
+[docs-feat-auth]: https://lobehub.com/docs/usage/features/auth
+[docs-feat-database]: https://lobehub.com/docs/usage/features/database
+[docs-feat-knowledgebase]: https://lobehub.com/blog/knowledge-base
+[docs-feat-local]: https://lobehub.com/docs/usage/features/local-llm
+[docs-feat-mobile]: https://lobehub.com/docs/usage/features/mobile
+[docs-feat-plugin]: https://lobehub.com/docs/usage/features/plugin-system
+[docs-feat-provider]: https://lobehub.com/docs/usage/features/multi-ai-providers
+[docs-feat-pwa]: https://lobehub.com/docs/usage/features/pwa
+[docs-feat-t2i]: https://lobehub.com/docs/usage/features/text-to-image
+[docs-feat-theme]: https://lobehub.com/docs/usage/features/theme
+[docs-feat-tts]: https://lobehub.com/docs/usage/features/tts
+[docs-feat-vision]: https://lobehub.com/docs/usage/features/vision
+[docs-functionc-call]: https://lobehub.com/zh/blog/openai-function-call
+[docs-lighthouse]: https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN
+[docs-plugin-dev]: https://lobehub.com/docs/usage/plugins/development
+[docs-self-hosting]: https://lobehub.com/docs/self-hosting/start
+[docs-upstream-sync]: https://lobehub.com/docs/self-hosting/advanced/upstream-sync
+[docs-usage-ollama]: https://lobehub.com/docs/usage/providers/ollama
+[docs-usage-plugin]: https://lobehub.com/docs/usage/plugins/basic
+[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
+[github-action-release-link]: https://github.com/lobehub/lobe-chat/actions/workflows/release.yml
+[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-action-test-link]: https://github.com/lobehub/lobe-chat/actions/workflows/test.yml
+[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
+[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-chat?color=c4f042&labelColor=black&style=flat-square
+[github-forks-link]: https://github.com/lobehub/lobe-chat/network/members
+[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-chat?color=8ae8ff&labelColor=black&style=flat-square
+[github-hello-shield]: https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=39701baf5a734cb894ec812248a5655a&claim_uid=HxYvFN34htJzGCD&theme=dark&theme=neutral&theme=dark&theme=neutral
+[github-hello-url]: https://hellogithub.com/repository/39701baf5a734cb894ec812248a5655a
+[github-issues-link]: https://github.com/lobehub/lobe-chat/issues
+[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-chat?color=ff80eb&labelColor=black&style=flat-square
+[github-license-link]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
+[github-license-shield]: https://img.shields.io/badge/license-apache%202.0-white?labelColor=black&style=flat-square
+[github-project-link]: https://github.com/lobehub/lobe-chat/projects
+[github-release-link]: https://github.com/lobehub/lobe-chat/releases
+[github-release-shield]: https://img.shields.io/github/v/release/lobehub/lobe-chat?color=369eff&labelColor=black&logo=github&style=flat-square
+[github-releasedate-link]: https://github.com/lobehub/lobe-chat/releases
+[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-chat?labelColor=black&style=flat-square
+[github-stars-link]: https://github.com/lobehub/lobe-chat/network/stargazers
+[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-chat?color=ffcb47&labelColor=black&style=flat-square
+[github-trending-shield]: https://trendshift.io/api/badge/repositories/2256
+[github-trending-url]: https://trendshift.io/repositories/2256
+[image-banner]: https://github.com/lobehub/lobe-chat/assets/28616219/9f155dff-4737-429f-9cad-a70a1a860c5f
+[image-feat-agent]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png
+[image-feat-auth]: https://github.com/lobehub/lobe-chat/assets/17870709/8ce70e15-40df-451e-b700-66090fe5b8c2
+[image-feat-database]: https://github.com/lobehub/lobe-chat/assets/17870709/c27a0234-a4e9-40e5-8bcb-42d5ce7e40f9
+[image-feat-knowledgebase]: https://github.com/user-attachments/assets/77e58e1c-c82f-4341-b159-f4eeede9967f
+[image-feat-local]: https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c
+[image-feat-mobile]: https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp
+[image-feat-plugin]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png
+[image-feat-privoder]: https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551
+[image-feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp
+[image-feat-t2i]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png
+[image-feat-theme]: https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp
+[image-feat-tts]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png
+[image-feat-vision]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png
+[image-overview]: https://github.com/lobehub/lobe-chat/assets/17870709/56b95d48-f573-41cd-8b38-387bf88bc4bf
+[image-star]: https://github.com/lobehub/lobe-chat/assets/17870709/cb06b748-513f-47c2-8740-d876858d7855
+[issues-link]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
+[lobe-chat-plugins]: https://github.com/lobehub/lobe-chat-plugins
+[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
+[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-icons-github]: https://github.com/lobehub/lobe-icons
+[lobe-icons-link]: https://www.npmjs.com/package/@lobehub/icons
+[lobe-icons-shield]: https://img.shields.io/npm/v/@lobehub/icons?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-lint-github]: https://github.com/lobehub/lobe-lint
+[lobe-lint-link]: https://www.npmjs.com/package/@lobehub/lint
+[lobe-lint-shield]: https://img.shields.io/npm/v/@lobehub/lint?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-midjourney-webui]: https://github.com/lobehub/lobe-midjourney-webui
+[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[lobe-tts-github]: https://github.com/lobehub/lobe-tts
+[lobe-tts-link]: https://www.npmjs.com/package/@lobehub/tts
+[lobe-tts-shield]: https://img.shields.io/npm/v/@lobehub/tts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-ui-github]: https://github.com/lobehub/lobe-ui
+[lobe-ui-link]: https://www.npmjs.com/package/@lobehub/ui
+[lobe-ui-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[official-site]: https://lobehub.com
+[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
+[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
+[profile-link]: https://github.com/lobehub
+[share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
+[share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
+[share-reddit-link]: https://www.reddit.com/submit?title=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
+[share-telegram-link]: https://t.me/share/url"?text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black&logo=telegram&logoColor=white&style=flat-square
+[share-weibo-link]: http://service.weibo.com/share/share.php?sharesource=weibo&title=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-weibo-shield]: https://img.shields.io/badge/-share%20on%20weibo-black?labelColor=black&logo=sinaweibo&logoColor=white&style=flat-square
+[share-whatsapp-link]: https://api.whatsapp.com/send?text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat%20%23chatbot%20%23chatGPT%20%23openAI
+[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
+[share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
+[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become ❤ LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
+[submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
+[submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
+[submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins
+[submit-plugin-shield]: https://img.shields.io/badge/🧩/🏪_submit_plugin-%E2%86%92-95f3d9?labelColor=black&style=for-the-badge
+[vercel-link]: https://chat-preview.lobehub.com
+[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square
+[vercel-shield-badge]: https://img.shields.io/badge/TRY%20LOBECHAT-ONLINE-55b467?labelColor=black&logo=vercel&style=for-the-badge

DigitalHumanWeb/__mocks__/zustand/traditional.ts

@@ -0,0 +1,25 @@
+import { act } from 'react-dom/test-utils';
+import { beforeEach } from 'vitest';
+import { createWithEqualityFn as actualCreate } from 'zustand/traditional';
+
+// a variable to hold reset functions for all stores declared in the app
+const storeResetFns = new Set<() => void>();
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+const createImpl = (createState: any) => {
+  const store = actualCreate(createState, Object.is);
+  const initialState = store.getState();
+  storeResetFns.add(() => store.setState(initialState, true));
+  return store;
+};
+
+// Reset all stores after each test run
+beforeEach(() => {
+  act(() => {
+    for (const resetFn of storeResetFns) {
+      resetFn();
+    }
+  });
+});
+
+export const createWithEqualityFn = (f: any) => (f === undefined ? createImpl : createImpl(f));

DigitalHumanWeb/codecov.yml

@@ -0,0 +1,11 @@
+coverage:
+  status:
+    project:
+      default: off
+      server:
+        flags:
+          - server
+      app:
+        flags:
+          - app
+    patch: off

DigitalHumanWeb/contributing/Basic/Add-New-Authentication-Providers.md

@@ -0,0 +1,193 @@
+# New Authentication Provider Guide
+
+LobeChat uses [Auth.js v5](https://authjs.dev/) as the external authentication service. Auth.js is an open-source authentication library that provides a simple way to implement authentication and authorization features. This document will introduce how to use Auth.js to implement a new authentication provider.
+
+### TOC
+
+- [Add New Authentication Provider](#add-new-authentication-provider)
+  - [Pre-requisites: Check the Official Provider List](#pre-requisites-check-the-official-provider-list)
+  - [Step 1: Add Authenticator Core Code](#step-1-add-authenticator-core-code)
+  - [Step 2: Update Server Configuration Code](#step-2-update-server-configuration-code)
+  - [Step 3: Change Frontend Pages](#step-3-change-frontend-pages)
+  - [Step 4: Configure the Environment Variables](#step-4-configure-the-environment-variables)
+  - [Step 5: Modify server-side user information processing logic](#step-5-modify-server-side-user-information-processing-logic)
+
+## Add New Authentication Provider
+
+To add a new authentication provider in LobeChat (for example, adding Okta), you need to follow the steps below:
+
+### Pre-requisites: Check the Official Provider List
+
+First, you need to check the [Auth.js Provider List](https://authjs.dev/reference/core/providers) to see if your provider is already supported. If yes, you can directly use the SDK provided by Auth.js to implement the authentication feature.
+
+Next, I will use [Okta](https://authjs.dev/reference/core/providers/okta) as an example to introduce how to add a new authentication provider.
+
+### Step 1: Add Authenticator Core Code
+
+Open the `src/app/api/auth/next-auth.ts` file and import `next-auth/providers/okta`.
+
+```ts
+import { NextAuth } from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+import Okta from 'next-auth/providers/okta';
+
+// Import Okta provider
+```
+
+Add the predefined server configuration.
+
+```ts
+// Import server configuration
+const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    // ... Other providers
+
+    Okta({
+      clientId: OKTA_CLIENT_ID,
+      clientSecret: OKTA_CLIENT_SECRET,
+      issuer: OKTA_ISSUER,
+    }),
+  ],
+});
+```
+
+### Step 2: Update Server Configuration Code
+
+Open the `src/config/server/app.ts` file and add Okta-related environment variables in the `getAppConfig` function.
+
+```ts
+export const getAppConfig = () => {
+  // ... Other code
+
+  return {
+    // ... Other environment variables
+
+    OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID || '',
+    OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET || '',
+    OKTA_ISSUER: process.env.OKTA_ISSUER || '',
+  };
+};
+```
+
+### Step 3: Change Frontend Pages
+
+Modify the `signIn` function parameter in `src/Features/Conversation/Error/OAuthForm.tsx` and \`src/app/settings/common/Common.tsx
+
+The default is `auth0`, which you can change to `okta` to switch to the Okta provider, or remove this parameter to support all added authentication services
+
+This value is the id of the Auth.js provider, and you can read the source code of the corresponding `next-auth/providers` module to read the default ID.
+
+### Step 4: Configure the Environment Variables
+
+Add `OKTA_CLIENT_ID`、`OKTA_CLIENT_SECRET`、`OKTA_ISSUER` environment variables when you deploy.
+
+### Step 5: Modify server-side user information processing logic
+
+#### Get user information in the frontend
+
+Use the `useOAuthSession()` method in the frontend page to get the user information `user` returned by the backend:
+
+```ts
+import { useOAuthSession } from '@/hooks/useOAuthSession';
+
+const { user, isOAuthLoggedIn } = useOAuthSession();
+```
+
+The default type of `user` is `User`, and the type definition is:
+
+```ts
+interface User {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+```
+
+#### Modify user `id` handling logic
+
+The `user.id` is used to identify users. When introducing a new OAuth identity provider, you need to handle the information carried in the OAuth callback in `src/app/api/auth/next-auth.ts`. You need to select the user's `id` from this information. Before that, we need to understand the data processing sequence of `Auth.js`:
+
+```txt
+authorize --> jwt --> session
+```
+
+By default, in the `jwt --> session` process, `Auth.js` will [automatically assign the user `id` to `account.providerAccountId` based on the login type](https://authjs.dev/reference/core/types#provideraccountid). If you need to select a different value as the user `id`, you need to implement the following handling logic:
+
+```ts
+callbacks: {
+  async jwt({ token, account, profile }) {
+    if (account) {
+      // You can select a different value from `account` or `profile`
+      token.userId = account.providerAccountId;
+    }
+    return token;
+  },
+},
+```
+
+#### Customize `session` return
+
+If you want to carry more information about `profile` and `account` in the `session`, according to the data processing order mentioned above in `Auth.js`, you must first copy this information to the `token`. For example, add the user avatar URL `profile.picture` to the `session`:
+
+```diff
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        token.userId = account.providerAccountId;
++       token.avatar = profile.picture;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.userId ?? session.user.id;
++       session.user.avatar = token.avatar;
+      }
+      return session;
+    },
+  },
+```
+
+Then supplement the type definition for the new parameters:
+
+```ts
+declare module '@auth/core/jwt' {
+  interface JWT {
+    // ...
+    avatar?: string;
+  }
+}
+
+declare module 'next-auth' {
+  interface User {
+    avatar?: string;
+  }
+}
+```
+
+> [More built-in type extensions in Auth.js](https://authjs.dev/getting-started/typescript#module-augmentation)
+
+#### Differentiate multiple authentication providers in the processing logic
+
+If you have configured multiple authentication providers and their `userId` mappings are different, you can use the `account.provider` parameter in the `jwt` method to get the default id of the identity provider and enter different processing logic.
+
+```ts
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        if (account.provider === 'authing')
+          token.userId = account.providerAccountId ?? token.sub;
+        else if (acount.provider === 'auth0')
+          token.userId = profile.sub ?? token.sub;
+        else
+          // other providers
+      }
+      return token;
+    },
+  }
+```
+
+Now, you can use Okta as your provider to implement the authentication feature in LobeChat.

DigitalHumanWeb/contributing/Basic/Add-New-Authentication-Providers.zh-CN.md

@@ -0,0 +1,192 @@
+# 新身份验证方式开发指南
+
+LobeChat 使用 [Auth.js v5](https://authjs.dev/) 作为外部身份验证服务。Auth.js 是一个开源的身份验证库，它提供了一种简单的方式来实现身份验证和授权功能。本文档将介绍如何使用 Auth.js 来实现新的身份验证方式。
+
+### TOC
+
+- [添加新的身份验证提供者](#添加新的身份验证提供者)
+  - [准备工作：查阅官方的提供者列表](#准备工作查阅官方的提供者列表)
+  - [步骤 1: 新增关键代码](#步骤-1-新增关键代码)
+  - [步骤 2: 更新服务端配置代码](#步骤-2-更新服务端配置代码)
+  - [步骤 3: 修改前端页面](#步骤-3-修改前端页面)
+  - [步骤 4: 配置环境变量](#步骤-4-配置环境变量)
+  - [步骤 5: 修改服务端用户信息处理逻辑](#步骤-5-修改服务端用户信息处理逻辑)
+
+## 添加新的身份验证提供者
+
+为了在 LobeChat 中添加新的身份验证提供者（例如添加 Okta)，你需要完成以下步骤：
+
+### 准备工作：查阅官方的提供者列表
+
+首先，你需要查阅 [Auth.js 提供者列表](https://authjs.dev/reference/core/providers) 来了解是否你的提供者已经被支持。如果你的提供者已经被支持，你可以直接使用 Auth.js 提供的 SDK 来实现身份验证功能。
+
+接下来我会以 [Okta](https://authjs.dev/reference/core/providers/okta) 为例来介绍如何添加新的身份验证提供者
+
+### 步骤 1: 新增关键代码
+
+打开 `src/app/api/auth/next-auth.ts` 文件，引入 `next-auth/providers/okta`
+
+```ts
+import { NextAuth } from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+import Okta from 'next-auth/providers/okta';
+
+// 引入 Okta 提供者
+```
+
+新增预定义的服务端配置
+
+```ts
+// 导入服务器配置
+const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    // ... 其他提供者
+
+    Okta({
+      clientId: OKTA_CLIENT_ID,
+      clientSecret: OKTA_CLIENT_SECRET,
+      issuer: OKTA_ISSUER,
+    }),
+  ],
+});
+```
+
+### 步骤 2: 更新服务端配置代码
+
+打开 `src/config/server/app.ts` 文件，在 `getAppConfig` 函数中新增 Okta 相关的环境变量
+
+```ts
+export const getAppConfig = () => {
+  // ... 其他代码
+
+  return {
+    // ... 其他环境变量
+
+    OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID || '',
+    OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET || '',
+    OKTA_ISSUER: process.env.OKTA_ISSUER || '',
+  };
+};
+```
+
+### 步骤 3: 修改前端页面
+
+修改在 `src/features/Conversation/Error/OAuthForm.tsx` 及 `src/app/settings/common/Common.tsx` 中的 `signIn` 函数参数
+
+默认为 `auth0`，你可以将其修改为 `okta` 以切换到 Okta 提供者，或删除该参数以支持所有已添加的身份验证服务
+
+该值为 Auth.js 提供者 的 id，你可以阅读相应的 `next-auth/providers` 模块源码以读取默认 ID
+
+### 步骤 4: 配置环境变量
+
+在部署时新增 Okta 相关的环境变量 `OKTA_CLIENT_ID`、`OKTA_CLIENT_SECRET`、`OKTA_ISSUER`，并填入相应的值，即可使用
+
+### 步骤 5: 修改服务端用户信息处理逻辑
+
+#### 在前端获取用户信息
+
+在前端页面中使用 `useOAuthSession()` 方法获取后端返回的用户信息 `user`：
+
+```ts
+import { useOAuthSession } from '@/hooks/useOAuthSession';
+
+const { user, isOAuthLoggedIn } = useOAuthSession();
+```
+
+默认的 `user` 类型为 `User`，类型定义为：
+
+```ts
+interface User {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+```
+
+#### 修改用户 `id` 处理逻辑
+
+`user.id` 用于标识用户。当引入新身份 OAuth 提供者后，您需要在 `src/app/api/auth/next-auth.ts` 中处理 OAuth 回调所携带的信息。您需要从中选取用户的 `id`。在此之前，我们需要了解 `Auth.js` 的数据处理顺序：
+
+```txt
+authorize --> jwt --> session
+```
+
+默认情况下，在 `jwt --> session` 过程中，`Auth.js` 会[自动根据登陆类型](https://authjs.dev/reference/core/types#provideraccountid)将用户 `id` 赋值到 `account.providerAccountId` 中。 如果您需要选取其他值作为用户 `id` ，您需要实现以下处理逻辑。
+
+```ts
+  callbacks: {
+    async jwt({ token, account, profile }) {
+      if (account) {
+        // 您可以从 `account` 或 `profile` 中选取其他值
+        token.userId = account.providerAccountId;
+      }
+      return token;
+    },
+  },
+```
+
+#### 自定义 `session` 返回
+
+如果您想在 `session` 中携带更多关于 `profile` 及 `account` 的信息，根据上面提到的 `Auth.js` 数据处理顺序，那必须先将该信息复制到 `token` 上。
+示例：把用户头像 URL：`profile.picture` 添加到`session` 中：
+
+```diff
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        token.userId = account.providerAccountId;
++       token.avatar = profile.picture;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.userId ?? session.user.id;
++       session.user.avatar = token.avatar;
+      }
+      return session;
+    },
+  },
+```
+
+然后补充对新增参数的类型定义：
+
+```ts
+declare module '@auth/core/jwt' {
+  interface JWT {
+    // ...
+    avatar?: string;
+  }
+}
+
+declare module 'next-auth' {
+  interface User {
+    avatar?: string;
+  }
+}
+```
+
+> [更多`Auth.js`内置类型拓展](https://authjs.dev/getting-started/typescript#module-augmentation)
+
+#### 在处理逻辑中区分多个身份验证提供者
+
+如果您配置了多个身份验证提供者，并且他们的 `userId` 映射各不相同，可以在 `jwt` 方法中的 `account.provider` 参数获取身份提供者的默认 id ，从而进入不同的处理逻辑。
+
+```ts
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        if (account.provider === 'Authing')
+          token.userId = account.providerAccountId ?? token.sub;
+        else if (acount.provider === 'Okta')
+          token.userId = profile.sub ?? token.sub;
+        else
+          // other providers
+      }
+      return token;
+    },
+  }
+```

DigitalHumanWeb/contributing/Basic/Architecture.md

@@ -0,0 +1,47 @@
+# Architecture Design
+
+LobeChat is an AI conversation application built on the Next.js framework, aiming to provide an AI productivity platform that enables users to interact with AI through natural language. The following is an overview of the architecture design of LobeChat:
+
+#### TOC
+
+- [Application Architecture Overview](#application-architecture-overview)
+- [Frontend Architecture](#frontend-architecture)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents Market](#agents-market)
+- [Plugin Market](#plugin-market)
+- [Security and Performance Optimization](#security-and-performance-optimization)
+- [Development and Deployment Process](#development-and-deployment-process)
+
+## Application Architecture Overview
+
+The overall architecture of LobeChat consists of the frontend, EdgeRuntime API, Agents Market, Plugin Market, and independent plugins. These components collaborate to provide a complete AI experience.
+
+## Frontend Architecture
+
+The frontend of LobeChat adopts the Next.js framework, leveraging its powerful server-side rendering (SSR) capability and routing functionality. The frontend utilizes a stack of technologies, including the antd component library, lobe-ui AIGC component library, zustand state management, swr request library, i18next internationalization library, and more. These technologies collectively support the functionality and features of LobeChat.
+
+The components in the frontend architecture include app, components, config, const, features, helpers, hooks, layout, locales, migrations, prompts, services, store, styles, types, and utils. Each component has specific responsibilities and collaborates with others to achieve different functionalities.
+
+## Edge Runtime API
+
+The Edge Runtime API is one of the core components of LobeChat, responsible for handling the core logic of AI conversations. It provides interaction interfaces with the AI engine, including natural language processing, intent recognition, and response generation. The EdgeRuntime API communicates with the frontend, receiving user input and returning corresponding responses.
+
+## Agents Market
+
+The Agents Market is a crucial part of LobeChat, providing various AI agents for different scenarios to handle specific tasks and domains. The Agents Market also offers functionality for discovering and uploading agents, allowing users to find agents created by others and easily share their own agents in the market.
+
+## Plugin Market
+
+The Plugin Market is another key component of LobeChat, offering various plugins to extend the functionality and features of LobeChat. Plugins can be independent functional modules or integrated with agents from the Agents Market. During conversations, the assistant automatically identifies user input, recognizes suitable plugins, and passes them to the corresponding plugins for processing and returns the results.
+
+## Security and Performance Optimization
+
+LobeChat's security strategy includes authentication and permission management. Users need to authenticate before using LobeChat, and operations are restricted based on the user's permissions.
+
+To optimize performance, LobeChat utilizes Next.js SSR functionality to achieve fast page loading and response times. Additionally, a series of performance optimization measures are implemented, including code splitting, caching, and resource compression.
+
+## Development and Deployment Process
+
+LobeChat's development process includes version control, testing, continuous integration, and continuous deployment. The development team uses version control systems for code management and conducts unit and integration testing to ensure code quality. Continuous integration and deployment processes ensure rapid delivery and deployment of code.
+
+The above is a brief introduction to the architecture design of LobeChat, detailing the responsibilities and collaboration of each component, as well as the impact of design decisions on application functionality and performance.

DigitalHumanWeb/contributing/Basic/Architecture.zh-CN.md

@@ -0,0 +1,47 @@
+# 架构设计
+
+LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介稿：
+
+#### TOC
+
+- [应用架构概览](#应用架构概览)
+- [前端架构](#前端架构)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents 市场](#agents-市场)
+- [插件市场](#插件市场)
+- [安全性和性能优化](#安全性和性能优化)
+- [开发和部署流程](#开发和部署流程)
+
+## 应用架构概览
+
+LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的 AI 体验。
+
+## 前端架构
+
+LobeChat 的前端采用 Next.js 框架，利用其强大的 SSR（服务器端渲染）能力和路由功能。前端使用了一系列技术栈，包括 antd 组件库和 lobe-ui AIGC 组件库、zustand 状态管理、swr 请求库、i18next 国际化库等。这些技术栈共同支持了 LobeChat 的功能和特性。
+
+前端架构中的组件包括 app、components、config、const、features、helpers、hooks、layout、locales、migrations、prompts、services、store、styles、types 和 utils。每个组件都有特定的职责，并与其他组件协同工作，以实现不同的功能。
+
+## Edge Runtime API
+
+Edge Runtime API 是 LobeChat 的核心组件之一，负责处理 AI 会话的核心逻辑。它提供了与 AI 引擎的交互接口，包括自然语言处理、意图识别和回复生成等。EdgeRuntime API 与前端进行通信，接收用户的输入并返回相应的回复。
+
+## Agents 市场
+
+Agents 市场是 LobeChat 的一个重要组成部分，它提供了各种不同场景的 AI Agent，用于处理特定的任务和领域。Agents 市场还提供了使用和上传 Agent 的功能，使用户能够发现其他人制作的 Agent ，也可以一键分享自己的 Agent 到市场上。
+
+## 插件市场
+
+插件市场是 LobeChat 的另一个关键组件，它提供了各种插件，用于扩展 LobeChat 的功能和特性。插件可以是独立的功能模块，也可以与 Agents 市场的 Agent 进行集成。在会话中，助手将自动识别用户的输入，并识别适合的插件并传递给相应的插件进行处理，并返回处理结果。
+
+## 安全性和性能优化
+
+LobeChat 的安全性策略包括身份验证和权限管理。用户需要进行身份验证后才能使用 LobeChat，同时根据用户的权限进行相应的操作限制。
+
+为了优化性能，LobeChat 使用了 Next.js 的 SSR 功能，实现了快速的页面加载和响应时间。此外，还采用了一系列的性能优化措施，包括代码分割、缓存和资源压缩等。
+
+## 开发和部署流程
+
+LobeChat 的开发流程包括版本控制、测试、持续集成和持续部署。开发团队使用版本控制系统进行代码管理，并进行单元测试和集成测试以确保代码质量。持续集成和持续部署流程确保了代码的快速交付和部署。
+
+以上是 LobeChat 的架构设计介绍简介，详细解释了各个组件的职责和协作方式，以及设计决策对应用功能和性能的影响。

DigitalHumanWeb/contributing/Basic/Chat-API.md

@@ -0,0 +1,136 @@
+# Conversation API Implementation Logic
+
+The implementation of LobeChat's large model AI mainly relies on OpenAI's API, including the core conversation API on the backend and the integrated API on the frontend. Next, we will introduce the implementation approach and code for the backend and frontend separately.
+
+#### TOC
+
+- [Backend Implementation](#backend-implementation)
+  - [Core Conversation API](#core-conversation-api)
+  - [Conversation Result Processing](#conversation-result-processing)
+- [Frontend Implementation](#frontend-implementation)
+  - [Frontend Integration](#frontend-integration)
+  - [Using Streaming to Get Results](#using-streaming-to-get-results)
+
+## Backend Implementation
+
+The following code removes authentication, error handling, and other logic, retaining only the core functionality logic.
+
+### Core Conversation API
+
+In the file `src/app/api/openai/chat/handler.ts`, we define a `POST` method, which first parses the payload data from the request (i.e., the conversation content sent by the client), and then retrieves the authorization information from the request. Then, we create an `openai` object and call the `createChatCompletion` method, which is responsible for sending the conversation request to OpenAI and returning the result.
+
+```ts
+export const POST = async (req: Request) => {
+  const payload = await req.json();
+
+  const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
+
+  const openai = createOpenai(apiKey, endpoint);
+
+  return createChatCompletion({ openai, payload });
+};
+```
+
+### Conversation Result Processing
+
+In the file `src/app/api/openai/chat/createChatCompletion.ts`, we define the `createChatCompletion` method, which first preprocesses the payload data, then calls OpenAI's `chat.completions.create` method to send the request, and uses the `OpenAIStream` from the [Vercel AI SDK](https://sdk.vercel.ai/docs) to convert the returned result into a streaming response.
+
+```ts
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  const { messages, ...params } = payload;
+
+  const formatMessages = messages.map((m) => ({
+    content: m.content,
+    name: m.name,
+    role: m.role,
+  }));
+
+  const response = await openai.chat.completions.create(
+    {
+      messages: formatMessages,
+      ...params,
+      stream: true,
+    },
+    { headers: { Accept: '*/*' } },
+  );
+  const stream = OpenAIStream(response);
+  return new StreamingTextResponse(stream);
+};
+```
+
+## Frontend Implementation
+
+### Frontend Integration
+
+In the `src/services/chatModel.ts` file, we define the `fetchChatModel` method, which first preprocesses the payload data, then sends a POST request to the `/chat` endpoint on the backend, and returns the request result.
+
+```ts
+export const fetchChatModel = (
+  { plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
+  options?: FetchChatModelOptions,
+) => {
+  const payload = merge(
+    {
+      model: initialLobeAgentConfig.model,
+      stream: true,
+      ...initialLobeAgentConfig.params,
+    },
+    params,
+  );
+
+  const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
+    usePluginStore.getState(),
+  );
+
+  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
+
+  return fetch(OPENAI_URLS.chat, {
+    body: JSON.stringify({ ...payload, functions }),
+    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+    method: 'POST',
+    signal: options?.signal,
+  });
+};
+```
+
+### Using Streaming to Get Results
+
+In the `src/utils/fetch.ts` file, we define the `fetchSSE` method, which uses a streaming approach to retrieve data. When a new data chunk is read, it calls the `onMessageHandle` callback function to process the data chunk, achieving a typewriter-like output effect.
+
+```ts
+export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
+  const response = await fetchFn();
+
+  if (!response.ok) {
+    const chatMessageError = await getMessageError(response);
+
+    options.onErrorHandle?.(chatMessageError);
+    return;
+  }
+
+  const returnRes = response.clone();
+
+  const data = response.body;
+
+  if (!data) return;
+
+  const reader = data.getReader();
+  const decoder = new TextDecoder();
+
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    const chunkValue = decoder.decode(value);
+
+    options.onMessageHandle?.(chunkValue);
+  }
+
+  return returnRes;
+};
+```
+
+The above is the core implementation of the LobeChat session API. With an understanding of these core codes, further expansion and optimization of LobeChat's AI functionality can be achieved.

DigitalHumanWeb/contributing/Basic/Chat-API.zh-CN.md

@@ -0,0 +1,174 @@
+# 会话 API 实现逻辑
+
+LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的核心会话 API 和前端的集成 API。接下来，我们将分别介绍后端和前端的实现思路和代码。
+
+#### TOC
+
+- [后端实现](#后端实现)
+  - [核心会话 API](#核心会话-api)
+  - [会话结果处理](#会话结果处理)
+- [前端实现](#前端实现)
+  - [前端集成](#前端集成)
+  - [使用流式获取结果](#使用流式获取结果)
+
+## 后端实现
+
+以下代码中移除了鉴权、错误处理等逻辑，仅保留了核心的主要功能逻辑。
+
+### 核心会话 API
+
+在 `src/app/api/openai/chat/route.ts` 中，定义了一个处理 POST 请求的方法，主要负责从请求体中提取 `OpenAIChatStreamPayload` 类型的 payload，并使用 `createBizOpenAI` 函数根据请求和模型信息创建 OpenAI 实例。随后，该方法调用 `createChatCompletion` 来处理实际的会话，并返回响应结果。如果创建 OpenAI 实例过程中出现错误，则直接返回错误响应。
+
+```ts
+export const POST = async (req: Request) => {
+  const payload = (await req.json()) as OpenAIChatStreamPayload;
+
+  const openaiOrErrResponse = createBizOpenAI(req, payload.model);
+
+  // if resOrOpenAI is a Response, it means there is an error,just return it
+  if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
+
+  return createChatCompletion({ openai: openaiOrErrResponse, payload });
+};
+```
+
+### 会话结果处理
+
+而在 `src/app/api/openai/chat/createChatCompletion.ts` 文件中，`createChatCompletion` 方法主要负责与 OpenAI API 进行交互，处理会话请求。它首先对 payload 中的消息进行预处理，然后通过 `openai.chat.completions.create` 方法发送 API 请求，并使用 `OpenAIStream` 将返回的响应转换为流式格式。如果在 API 调用过程中出现错误，方法将生成并处理相应的错误响应。
+
+```ts
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  // 预处理消息
+  const { messages, ...params } = payload;
+  // 发送 API 请求
+  try {
+    const response = await openai.chat.completions.create(
+      {
+        messages,
+        ...params,
+        stream: true,
+      } as unknown as OpenAI.ChatCompletionCreateParamsStreaming,
+      { headers: { Accept: '*/*' } },
+    );
+    const stream = OpenAIStream(response);
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    // 检查错误是否为 OpenAI APIError
+    if (error instanceof OpenAI.APIError) {
+      let errorResult: any;
+      // 如果错误是 OpenAI APIError，那么会有一个 error 对象
+      if (error.error) {
+        errorResult = error.error;
+      } else if (error.cause) {
+        errorResult = error.cause;
+      }
+      // 如果没有其他请求错误，错误对象是一个类似 Response 的对象
+      else {
+        errorResult = { headers: error.headers, stack: error.stack, status: error.status };
+      }
+      console.error(errorResult);
+      // 返回错误响应
+      return createErrorResponse(ChatErrorType.OpenAIBizError, {
+        endpoint: openai.baseURL,
+        error: errorResult,
+      });
+    }
+    console.error(error);
+    return createErrorResponse(ChatErrorType.InternalServerError, {
+      endpoint: openai.baseURL,
+      error: JSON.stringify(error),
+    });
+  }
+};
+```
+
+## 前端实现
+
+### 前端集成
+
+在 `src/services/chat.ts` 文件中，我们定义了 `ChatService` 类。这个类提供了一些方法来处理与 OpenAI 聊天 API 的交互。
+
+`createAssistantMessage` 方法用于创建一个新的助手消息。它接收一个包含插件、消息和其他参数的对象，以及一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，预处理消息和工具，然后调用 `getChatCompletion` 方法获取聊天完成任务。
+
+`getChatCompletion` 方法用于获取聊天完成任务。它接收一个 `OpenAIChatStreamPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，然后发送 POST 请求到 OpenAI 的聊天 API。
+
+`runPluginApi` 方法用于运行插件 API 并获取结果。它接收一个 `PluginRequestPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会从工具存储中获取状态，通过插件标识符获取插件设置和清单，然后发送 POST 请求到插件的网关 URL。
+
+`fetchPresetTaskResult` 方法用于获取预设任务的结果。它使用 `fetchAIFactory` 工厂函数创建一个新的函数，这个函数接收一个聊天完成任务的参数，并返回一个 Promise。当 Promise 解析时，返回的结果是聊天完成任务的结果。
+
+`processMessages` 方法用于处理聊天消息。它接收一个聊天消息数组，一个可选的模型名称，和一个可选的工具数组。这个方法会处理消息内容，将输入的 `messages` 数组映射为 `OpenAIChatMessage` 类型的数组，如果存在启用的工具，将工具的系统角色添加到系统消息中。
+
+```ts
+class ChatService {
+  // 创建一个新的助手消息
+  createAssistantMessage(params: object, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取聊天完成任务
+  getChatCompletion(payload: OpenAIChatStreamPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 运行插件 API 并获取结果
+  runPluginApi(payload: PluginRequestPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取预设任务的结果
+  fetchPresetTaskResult() {
+    // 实现细节...
+  }
+
+  // 处理聊天消息
+  processMessages(messages: ChatMessage[], modelName?: string, tools?: Tool[]) {
+    // 实现细节...
+  }
+}
+```
+
+### 使用流式获取结果
+
+在 `src/utils/fetch.ts` 文件中，我们定义了 `fetchSSE` 方法，该方法使用流式方法获取数据，当读取到新的数据块时，会调用 `onMessageHandle` 回调函数处理数据块，进而实现打字机输出效果。
+
+```ts
+export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
+  const response = await fetchFn();
+
+  // 如果不 ok 说明有请求错误
+  if (!response.ok) {
+    const chatMessageError = await getMessageError(response);
+
+    options.onErrorHandle?.(chatMessageError);
+    return;
+  }
+
+  const returnRes = response.clone();
+
+  const data = response.body;
+
+  if (!data) return;
+  let output = '';
+  const reader = data.getReader();
+  const decoder = new TextDecoder();
+
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    const chunkValue = decoder.decode(value, { stream: true });
+
+    output += chunkValue;
+    options.onMessageHandle?.(chunkValue);
+  }
+
+  await options?.onFinish?.(output);
+
+  return returnRes;
+};
+```
+
+以上就是 LobeChat 会话 API 的核心实现。在理解了这些核心代码的基础上，便可以进一步扩展和优化 LobeChat 的 AI 功能。

DigitalHumanWeb/contributing/Basic/Contributing-Guidelines.md

@@ -0,0 +1,83 @@
+# Code Style and Contribution Guidelines
+
+Welcome to the Code Style and Contribution Guidelines for LobeChat. This guide will help you understand our code standards and contribution process, ensuring code consistency and smooth project progression.
+
+## TOC
+
+- [Code Style](#code-style)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [remarklint](#remarklint)
+  - [stylelint](#stylelint)
+- [Contribution Process](#contribution-process)
+  - [Gitmoji](#gitmoji)
+  - [Semantic Release](#semantic-release)
+  - [Commitlint](#commitlint)
+  - [How to Contribute](#how-to-contribute)
+
+## Code Style
+
+In LobeChat, we use the `@lobehub/lint` package to maintain a unified code style. This package incorporates configurations for `ESLint`, `Prettier`, `remarklint`, and `stylelint` to ensure that our JavaScript, Markdown, and CSS files adhere to the same coding standards.
+
+### ESLint
+
+We use ESLint to check for issues in our JavaScript code. You can find the `.eslintrc.js` file in the project's root directory, which contains our extensions and custom rules for the ESLint configuration of `@lobehub/lint`.
+
+To ensure your code aligns with the project's standards, run ESLint before committing your code.
+
+### Prettier
+
+Prettier is responsible for code formatting to maintain consistency. Our Prettier configuration can be found in `.prettierrc.js`, imported from `@lobehub/lint`.
+
+It's recommended to configure your editor to run Prettier automatically upon saving files or manually run it before committing.
+
+### remarklint
+
+For Markdown files, we use remarklint to ensure consistent document formatting. You can find the corresponding configuration file in the project.
+
+### stylelint
+
+We utilize stylelint to standardize the style of our CSS code. In the configuration file for stylelint, we have made some custom rule adjustments based on `@lobehub/lint` configuration.
+
+Ensure that your style code passes stylelint checks before committing.
+
+## Contribution Process
+
+LobeChat follows the gitmoji and semantic release as our code submission and release process.
+
+### Gitmoji
+
+When committing code, please use gitmoji to label your commit messages. This helps other contributors quickly understand the content and purpose of your submission.
+
+Gitmoji commit messages use specific emojis to represent the type or intent of the commit. Here's an example:
+
+```
+📝 Update README with contribution guidelines
+
+- Added section about code style preferences
+- Included instructions for running tests
+- Corrected typos and improved formatting
+```
+
+In this example, the 📝 emoji represents a documentation update. The commit message clearly describes the changes and provides specific details.
+
+### Semantic Release
+
+We use semantic release to automate version control and release processes. Ensure that your commit messages adhere to the semantic release specifications so that when the code is merged into the main branch, the system can automatically create a new version and release it.
+
+### Commitlint
+
+To ensure consistency in commit messages, we use `commitlint` to check the format of commit messages. You can find the relevant rules in the `.commitlintrc.js` configuration file.
+
+Before committing your code, ensure that your commit messages adhere to our standards.
+
+### How to Contribute
+
+1. Fork the project to your account.
+2. Create a new branch for development.
+3. After completing the development, ensure that your code passes the aforementioned code style checks.
+4. Commit your changes and use appropriate gitmoji to label your commit message.
+5. Create a Pull Request to the main branch of the original project.
+6. Await code review and make necessary modifications based on feedback.
+
+Thank you for following these guidelines, as they help us maintain the quality and consistency of the project. We look forward to your contributions!

DigitalHumanWeb/contributing/Basic/Contributing-Guidelines.zh-CN.md

@@ -0,0 +1,85 @@
+# 代码风格与贡献指南
+
+欢迎来到 LobeChat 的代码风格与贡献指南。本指南将帮助您理解我们的代码规范和贡献流程，确保代码的一致性和项目的顺利进行。
+
+## TOC
+
+- [代码风格](#代码风格)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [remarklint](#remarklint)
+  - [stylelint](#stylelint)
+- [贡献流程](#贡献流程)
+  - [Gitmoji](#gitmoji)
+  - [Semantic Release](#semantic-release)
+  - [Commitlint](#commitlint)
+  - [如何贡献](#如何贡献)
+
+## 代码风格
+
+在 LobeChat 中，我们使用 `@lobehub/lint` 程序包来统一代码风格。该程序包内置了 `ESLint`、`Prettier`、`remarklint` 和 `stylelint` 的配置，以确保我们的 JavaScript、Markdown 和 CSS 文件遵循相同的编码标准。
+
+### ESLint
+
+我们的项目使用 ESLint 来检查 JavaScript 代码中的问题。您可以在项目根目录下找到 `.eslintrc.js` 文件，其中包含了我们对 `@lobehub/lint` 的 ESLint 配置的扩展和自定义规则。
+
+为了与 Next.js 框架兼容，我们在配置中添加了 `plugin:@next/next/recommended`。此外，我们禁用了一些规则，以适应我们项目的特定需求。
+
+请在提交代码前运行 ESLint，以确保您的代码符合项目规范。
+
+### Prettier
+
+Prettier 负责代码格式化，以保证代码的一致性。您可以在 `.prettierrc.js` 中找到我们的 Prettier 配置，它是从 `@lobehub/lint` 导入的。
+
+在保存文件时，建议您配置您的编辑器以自动运行 Prettier，或者在提交前手动运行它。
+
+### remarklint
+
+对于 Markdown 文件，我们使用 remarklint 来确保文档格式的统一。您可以在项目中找到相应的配置文件。
+
+### stylelint
+
+我们使用 stylelint 来规范 CSS 代码的风格。在 `stylelint` 的配置文件中，我们基于 `@lobehub/lint` 的配置进行了一些自定义规则的调整。
+
+确保您的样式代码在提交前通过了 stylelint 的检查。
+
+## 贡献流程
+
+LobeChat 采用 gitmoji 和 semantic release 作为我们的代码提交和发布流程。
+
+### Gitmoji
+
+在提交代码时，请使用 gitmoji 来标注您的提交信息。这有助于其他贡献者快速理解您提交的内容和目的。
+
+Gitmoji commit messages 使用特定的 emoji 来表示提交的类型或意图。以下是一个示例：
+
+```
+📝 Update README with contribution guidelines
+
+- Added section about code style preferences
+- Included instructions for running tests
+- Corrected typos and improved formatting
+```
+
+在这个示例中，📝 emoji 代表了文档的更新。提交信息清晰地描述了更改的内容，提供了具体的细节。
+
+### Semantic Release
+
+我们使用 semantic release 来自动化版本控制和发布流程。请确保您的提交信息遵循 semantic release 的规范，这样当代码合并到主分支后，系统就可以自动创建新的版本并发布。
+
+### Commitlint
+
+为了确保提交信息的一致性，我们使用 `commitlint` 来检查提交信息格式。您可以在 `.commitlintrc.js` 配置文件中找到相关规则。
+
+在您提交代码之前，请确保您的提交信息遵循我们的规范。
+
+### 如何贡献
+
+1. Fork 项目到您的账户。
+2. 创建一个新的分支进行开发。
+3. 开发完成后，确保您的代码通过了上述的代码风格检查。
+4. 提交您的更改，并使用合适的 gitmoji 标注您的提交信息。
+5. 创建一个 Pull Request 到原项目的主分支。
+6. 等待代码审查，并根据反馈进行必要的修改。
+
+感谢您遵循这些指导原则，它们有助于我们维护项目的质量和一致性。我们期待您的贡献！

DigitalHumanWeb/contributing/Basic/Feature-Development-Frontend.md

@@ -0,0 +1,126 @@
+# How to Develop a New Feature
+
+LobeChat is built on the Next.js framework and uses TypeScript as the primary development language. When developing a new feature, we need to follow a certain development process to ensure the quality and stability of the code. The general process can be divided into the following five steps:
+
+1. Routing: Define routes (`src/app`).
+2. Data Structure: Define data structures (`src/types`).
+3. Business Logic Implementation: Zustand store (`src/store`).
+4. Page Display: Write static components/pages (`src/app/<new-page>/features/<new-feature>.tsx`).
+5. Function Binding: Bind the store with page triggers (`const [state, function] = useNewStore(s => [s.state, s.function])`).
+
+Taking the "Chat Messages" feature as an example, here are the brief steps to implement this feature:
+
+#### TOC
+
+- [1. Define Routes](#1-define-routes)
+- [2. Define Data Structure](#2-define-data-structure)
+- [3. Create Zustand Store](#3-create-zustand-store)
+- [4. Create Page and Components](#4-create-page-and-components)
+- [5. Function Binding](#5-function-binding)
+
+## 1. Define Routes
+
+In the `src/app` directory, we need to define a new route to host the "Chat Messages" page. Generally, we would create a new folder under `src/app`, for example, `chat`, and create a `page.tsx` file within this folder to export a React component as the main body of the page.
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. Define Data Structure
+
+In the `src/types` directory, we need to define the data structure for "Chat Messages". For example, we create a `chat.ts` file and define the `ChatMessage` type within it:
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. Create Zustand Store
+
+In the `src/store` directory, we need to create a new Zustand Store to manage the state of "Chat Messages". For example, we create a `chatStore.ts` file and define a Zustand Store within it:
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. Create Page and Components
+
+In `src/app/<new-page>/features/<new-feature>.tsx`, we need to create a new page or component to display "Chat Messages". In this file, we can use the Zustand Store created earlier and Ant Design components to build the UI:
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. Function Binding
+
+In a page or component, we need to bind the Zustand Store's state and methods to the UI. In the example above, we have already bound the `messages` state to the `dataSource` property of the list. Now, we also need a method to add new messages. We can define this method in the Zustand Store and then use it in the page or component:
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+The above is the step to implement the "chat message" feature in LobeChat. Of course, in the actual development of LobeChat, the business requirements and scenarios faced in real situations are far more complex than the above demo. Please develop according to the actual situation.

DigitalHumanWeb/contributing/Basic/Feature-Development-Frontend.zh-CN.md

@@ -0,0 +1,126 @@
+# 如何开发一个新功能：前端实现
+
+LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
+
+1. 路由：定义路由 (`src/app`)
+2. 数据结构： 定义数据结构 ( `src/types` )
+3. 业务功能实现： zustand store (`src/store`)
+4. 页面展示：书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
+5. 功能绑定：绑定 store 与页面的触发 (`const  [state,function]= useNewStore(s=>[s.state,s.function])`)
+
+我们以 "会话消息" 功能为例，以下是实现这个功能的简要步骤：
+
+#### TOC
+
+- [1. 定义路由](#1-定义路由)
+- [2. 定义数据结构](#2-定义数据结构)
+- [3. 创建 Zustand Store](#3-创建-zustand-store)
+- [4. 创建页面与组件](#4-创建页面与组件)
+- [5. 功能绑定](#5-功能绑定)
+
+## 1. 定义路由
+
+在 `src/app` 目录下，我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说，我们会在 `src/app` 下创建一个新的文件夹，例如 `chat`，并且在这个文件夹中创建 `page.tsx`文件，在该文件中导出 React 组件作为页面的主体。
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. 定义数据结构
+
+在 `src/types` 目录下，我们需要定义 "会话消息" 的数据结构。例如，我们创建一个 `chat.ts` 文件，并在其中定义 `ChatMessage` 类型：
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. 创建 Zustand Store
+
+在 `src/store` 目录下，我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如，我们创建一个 `chatStore.ts` 文件，并在其中定义一个 Zustand Store：
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. 创建页面与组件
+
+在 `src/app/<new-page>/features/<new-feature>.tsx` 中，我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中，我们可以使用上面创建的 Zustand Store，以及 Ant Design 的组件来构建 UI：
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. 功能绑定
+
+在页面或组件中，我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中，我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在，我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法，然后在页面或组件中使用它：
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然，在 LobeChat 的实际开发中，真实场景所面临的业务诉求和场景远比上述 demo 复杂，请根据实际情况进行开发。

DigitalHumanWeb/contributing/Basic/Feature-Development.md

@@ -0,0 +1,713 @@
+# Complete Guide to LobeChat Feature Development
+
+This document aims to guide developers on how to develop a complete feature requirement in LobeChat.
+
+We will use the implementation of sessionGroup as an example: [✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055), and explain the complete implementation process through the following six main sections:
+
+1. [Data Model / Database Definition](#1-data-model--database-definition)
+2. [Service Implementation / Model Implementation](#2-service-implementation--model-implementation)
+3. [Frontend Data Flow Store Implementation](#3-frontend-data-flow-store-implementation)
+4. [UI Implementation and Action Binding](#4-ui-implementation-and-action-binding)
+5. [Data Migration](#5-data-migration)
+6. [Data Import and Export](#6-data-import-and-export)
+
+## 1. Data Model / Database Definition
+
+To implement the Session Group feature, it is necessary to define the relevant data model and indexes at the database level.
+
+Define a new sessionGroup table in 3 steps:
+
+### 1. Establish Data Model Schema
+
+Define the data model of `DB_SessionGroup` in `src/database/schema/sessionGroup.ts`:
+
+```typescript
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
+
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
+```
+
+### 2. Create Database Indexes
+
+Since a new table needs to be added, an index needs to be added to the database schema for the `sessionGroup` table.
+
+Add `dbSchemaV4` in `src/database/core/schema.ts`:
+
+```diff
+// ... previous implementations
+
+// ************************************** //
+// ******* Version 3 - 2023-12-06 ******* //
+// ************************************** //
+// - Added `plugin` table
+
+export const dbSchemaV3 = {
+  ...dbSchemaV2,
+  plugins:
+    '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
+};
+
++ // ************************************** //
++ // ******* Version 4 - 2024-01-21 ******* //
++ // ************************************** //
++ // - Added `sessionGroup` table
+
++ export const dbSchemaV4 = {
++   ...dbSchemaV3,
++   sessionGroups: '&id, name, sort, createdAt, updatedAt',
++   sessions: '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
+```
+
+> \[!Note]
+>
+> In addition to `sessionGroups`, the definition of `sessions` has also been modified here due to data migration. However, as this section only focuses on schema definition and does not delve into the implementation of data migration, please refer to section five for details.
+
+> \[!Important]
+>
+> If you are unfamiliar with the need to create indexes here and the syntax of schema definition, you may need to familiarize yourself with the basics of Dexie.js. You can refer to the [📘 Local Database](./Local-Database.zh-CN) section for relevant information.
+
+### 3. Add the sessionGroups Table to the Local DB
+
+Extend the local database class to include the new `sessionGroups` table:
+
+```diff
+
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+
+interface LobeDBSchemaMap {
+  files: DB_File;
+  messages: DB_Message;
+  plugins: DB_Plugin;
++ sessionGroups: DB_SessionGroup;
+  sessions: DB_Session;
+  topics: DB_Topic;
+}
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
++ public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
++   this.version(4).stores(dbSchemaV4);
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
++   this.sessionGroups = this.table('sessionGroups');
+  }
+}
+```
+
+As a result, you can now view the `sessionGroups` table in the `LOBE_CHAT_DB` in `Application` -> `Storage` -> `IndexedDB`.
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
+
+## 2. Service Implementation / Model Implementation
+
+### Define Model
+
+When building the LobeChat application, the Model is responsible for interacting with the database. It defines how to read, insert, update, and delete data from the database, as well as defining specific business logic.
+
+In `src/database/model/sessionGroup.ts`, the `SessionGroupModel` is defined as follows:
+
+```typescript
+import { BaseModel } from '@/database/client/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/client/schemas/sessionGroup';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessions', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  // ... Implementation of other CRUD methods
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
+```
+
+### Service Implementation
+
+In LobeChat, the Service layer is mainly responsible for communicating with the backend service, encapsulating business logic, and providing data to other layers in the frontend. `SessionService` is a service class specifically handling business logic related to sessions. It encapsulates operations such as creating sessions, querying sessions, and updating sessions.
+
+To maintain code maintainability and extensibility, we place the logic related to session grouping in the `SessionService`. This helps to keep the business logic of the session domain cohesive. When business requirements increase or change, it becomes easier to modify and extend within this domain.
+
+`SessionService` implements session group-related request logic by calling methods from `SessionGroupModel`. The following is the implementation of Session Group-related request logic in `sessionService`:
+
+```typescript
+class SessionService {
+  // ... Omitted session business logic
+
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
+
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  // ... Other SessionGroup related implementations
+}
+```
+
+## 3. Frontend Data Flow Store Implementation
+
+In the LobeChat application, the Store module is used to manage the frontend state of the application. The Actions within it are functions that trigger state updates, usually by calling methods in the service layer to perform actual data processing operations and then updating the state in the Store. We use `zustand` as the underlying dependency for the Store module. For a detailed practical introduction to state management, you can refer to [📘 Best Practices for State Management](../State-Management/State-Management-Intro.zh-CN.md).
+
+### sessionGroup CRUD
+
+CRUD operations for session groups are the core behaviors for managing session group data. In `src/store/session/slice/sessionGroup`, we will implement the state logic related to session groups, including adding, deleting, updating session groups, and their sorting.
+
+The following are the methods of the `SessionGroupAction` interface that need to be implemented in the `action.ts` file:
+
+```ts
+export interface SessionGroupAction {
+  // Add session group
+  addSessionGroup: (name: string) => Promise<string>;
+  // Remove session group
+  removeSessionGroup: (id: string) => Promise<void>;
+  // Update session group ID for a session
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  // Update session group name
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  // Update session group sorting
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+```
+
+Taking the `addSessionGroup` method as an example, we first call the `createSessionGroup` method of `sessionService` to create a new session group, and then use the `refreshSessions` method to refresh the sessions state:
+
+```ts
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  // Implement the logic for adding a session group
+  addSessionGroup: async (name) => {
+    // Call the createSessionGroup method in the service layer and pass in the session group name
+    const id = await sessionService.createSessionGroup(name);
+    // Call the get method to get the current Store state and execute the refreshSessions method to refresh the session data
+    await get().refreshSessions();
+    // Return the ID of the newly created session group
+    return id;
+  },
+  // ... Other action implementations
+});
+```
+
+With the above implementation, we can ensure that after adding a new session group, the application's state will be updated in a timely manner, and the relevant components will receive the latest state and re-render. This approach improves the predictability and maintainability of the data flow, while also simplifying communication between components.
+
+### Sessions Group Logic Refactoring
+
+This requirement involves upgrading the Sessions feature to transform it from a single list to three different groups: `pinnedSessions` (pinned list), `customSessionGroups` (custom groups), and `defaultSessions` (default list).
+
+To handle these groups, we need to refactor the implementation logic of `useFetchSessions`. Here are the key changes:
+
+1. Use the `sessionService.getGroupedSessions` method to call the backend API and retrieve the grouped session data.
+2. Save the retrieved data into three different state fields: `pinnedSessions`, `customSessionGroups`, and `defaultSessions`.
+
+#### `useFetchSessions` Method
+
+This method is defined in `createSessionSlice` as follows:
+
+```typescript
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  // ... other methods
+  useFetchSessions: () =>
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      onSuccess: (data) => {
+        set(
+          {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
+            isSessionsFirstFetchFinished: true,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
+          },
+          false,
+          n('useFetchSessions/onSuccess', data),
+        );
+      },
+    }),
+});
+```
+
+After successfully retrieving the data, we use the `set` method to update the `customSessionGroups`, `defaultSessions`, `pinnedSessions`, and `sessions` states. This ensures that the states are synchronized with the latest session data.
+
+#### `sessionService.getGroupedSessions` Method
+
+The `sessionService.getGroupedSessions` method is responsible for calling the backend API `SessionModel.queryWithGroups()`.
+
+```typescript
+class SessionService {
+  // ... other SessionGroup related implementations
+
+  async getGroupedSessions(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+}
+```
+
+#### `SessionModel.queryWithGroups` Method
+
+This method is the core method called by `sessionService.getGroupedSessions`, and it is responsible for querying and organizing session data. The code is as follows:
+
+```typescript
+class _SessionModel extends BaseModel {
+  // ... other methods
+
+  /**
+   * Query session data and categorize sessions based on groups.
+   * @returns {Promise<ChatSessionList>} An object containing all sessions and categorized session lists.
+   */
+  async queryWithGroups(): Promise<ChatSessionList> {
+    // Query session group data
+    const groups = await SessionGroupModel.query();
+    // Query custom session groups based on session group IDs
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    // Query default session list
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    // Query pinned sessions
+    const pinnedItems = await this.getPinnedSessions();
+
+    // Query all sessions
+    const all = await this.query();
+    // Combine and return all sessions and their group information
+    return {
+      all, // Array containing all sessions
+      customGroup: groups.map((group) => ({ ...group, children: customGroups[group.id] })), // Custom groups
+      default: defaultItems, // Default session list
+      pinned: pinnedItems, // Pinned session list
+    };
+  }
+}
+```
+
+The `queryWithGroups` method first queries all session groups, then based on the IDs of these groups, it queries custom session groups, as well as default and pinned sessions. Finally, it returns an object containing all sessions and categorized session lists.
+
+### Adjusting sessions selectors
+
+Due to changes in the logic of grouping within sessions, we need to adjust the logic of the `sessions` selectors to ensure they can correctly handle the new data structure.
+
+Original selectors:
+
+```ts
+// Default group
+const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+
+// Pinned group
+const pinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
+
+// Unpinned group
+const unpinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
+```
+
+Revised:
+
+```ts
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
+```
+
+Since all data retrieval in the UI is implemented using syntax like `useSessionStore(sessionSelectors.defaultSessions)`, we only need to modify the selector implementation of `defaultSessions` to complete the data structure change. The data retrieval code in the UI layer does not need to be changed at all, which can greatly reduce the cost and risk of refactoring.
+
+> !\[Important]
+>
+> If you are not familiar with the concept and functionality of selectors, you can refer to the section [📘 Data Storage and Retrieval Module](./State-Management-Selectors.en-US) for relevant information.
+
+## 4. UI Implementation and Action Binding
+
+Bind Store Action in the UI component to implement interactive logic, for example `CreateGroupModal`:
+
+```tsx
+const CreateGroupModal = () => {
+  // ... Other logic
+
+  const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+    s.updateSessionGroupId,
+    s.addSessionGroup,
+  ]);
+
+  return (
+    <Modal
+      onOk={async () => {
+        // ... Other logic
+        const groupId = await addCustomGroup(name);
+        await updateSessionGroup(sessionId, groupId);
+      }}
+    >
+      {/* ... */}
+    </Modal>
+  );
+};
+```
+
+## 5. Data Migration
+
+In the process of software development, data migration is an inevitable issue, especially when the existing data structure cannot meet the new business requirements. For this iteration of SessionGroup, we need to handle the migration of the `group` field in the `session`, which is a typical data migration case.
+
+### Issues with the Old Data Structure
+
+In the old data structure, the `group` field was used to mark whether the session was "pinned" or belonged to a "default" group. However, when support for multiple session groups is needed, the original data structure becomes inflexible.
+
+For example:
+
+```
+before   pin:  group = abc
+after    pin:  group = pinned
+after  unpin:  group = default
+```
+
+From the above example, it can be seen that once a session is unpinned from the "pinned" state, the `group` field cannot be restored to its original `abc` value. This is because we do not have a separate field to maintain the pinned state. Therefore, we have introduced a new field `pinned` to indicate whether the session is pinned, while the `group` field will be used solely to identify the session group.
+
+### Migration Strategy
+
+The core logic of this migration is as follows:
+
+- When the user's `group` field is `pinned`, set their `pinned` field to `true`, and set the group to `default`.
+
+However, data migration in LobeChat typically involves two parts: **configuration file migration** and **database migration**. Therefore, the above logic will need to be implemented separately in these two areas.
+
+#### Configuration File Migration
+
+For configuration file migration, we recommend performing it before database migration, as configuration file migration is usually easier to test and validate. LobeChat's file migration configuration is located in the `src/migrations/index.ts` file, which defines the various versions of configuration file migration and their corresponding migration scripts.
+
+```diff
+// Current latest version number
+- export const CURRENT_CONFIG_VERSION = 2;
++ export const CURRENT_CONFIG_VERSION = 3;
+
+// Historical version upgrade module
+const ConfigMigrations = [
++ /**
++ * 2024.01.22
++  * from `group = pinned` to `pinned:true`
++  */
++ MigrationV2ToV3,
+  /**
+   * 2023.11.27
+   * Migrate from single key database to dexie-based relational structure
+   */
+  MigrationV1ToV2,
+  /**
+   * 2023.07.11
+   * just the first version, Nothing to do
+   */
+  MigrationV0ToV1,
+];
+```
+
+The logic for this configuration file migration is defined in `src/migrations/FromV2ToV3/index.ts`, simplified as follows:
+
+```ts
+export class MigrationV2ToV3 implements Migration {
+  // Specify the version from which to upgrade
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
+  };
+}
+```
+
+It can be seen that the migration implementation is very simple. However, it is important to ensure the correctness of the migration, so corresponding test cases need to be written in `src/migrations/FromV2ToV3/migrations.test.ts`:
+
+```ts
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
+
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
+```
+
+```markdown
+
+```
+
+Unit tests require the use of `fixtures` to fix the test data. The test cases include verification logic for two parts: 1) the correctness of a single migration (v2 -> v3) and 2) the correctness of a complete migration (v1 -> v3).
+
+> \[!Important]
+>
+> The version number in the configuration file may not match the database version number, as database version updates do not always involve changes to the data structure (such as adding tables or fields), while configuration file version updates usually involve data migration.
+
+````
+
+#### Database Migration
+
+Database migration needs to be implemented in the `LocalDB` class, which is defined in the `src/database/core/db.ts` file. The migration process involves adding a new `pinned` field for each record in the `sessions` table and resetting the `group` field:
+
+```diff
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
+    this.version(4)
+      .stores(dbSchemaV4)
++     .upgrade((trans) => this.upgradeToV4(trans));
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
+  }
+
++  /**
++   * 2024.01.22
++   *
++   * DB V3 to V4
++   * from `group = pinned` to `pinned:true`
++   */
++  upgradeToV4 = async (trans: Transaction) => {
++    const sessions = trans.table('sessions');
++    await sessions.toCollection().modify((session) => {
++      // translate boolean to number
++      session.pinned = session.group === 'pinned' ? 1 : 0;
+      session.group = 'default';
+    });
++  };
+}
+````
+
+This is our data migration strategy. When performing the migration, it is essential to ensure the correctness of the migration script and validate the migration results through thorough testing.
+
+## 6. Data Import and Export
+
+In LobeChat, the data import and export feature is designed to ensure that users can migrate their data between different devices. This includes session, topic, message, and settings data. In the implementation of the Session Group feature, we also need to handle data import and export to ensure that the complete exported data can be restored exactly the same on other devices.
+
+The core implementation of data import and export is in the `ConfigService` in `src/service/config.ts`, with key methods as follows:
+
+| Method Name           | Description                |
+| --------------------- | -------------------------- |
+| `importConfigState`   | Import configuration data  |
+| `exportAgents`        | Export all agent data      |
+| `exportSessions`      | Export all session data    |
+| `exportSingleSession` | Export single session data |
+| `exportSingleAgent`   | Export single agent data   |
+| `exportSettings`      | Export settings data       |
+| `exportAll`           | Export all data            |
+
+### Data Export
+
+In LobeChat, when a user chooses to export data, the current session, topic, message, and settings data are packaged into a JSON file and provided for download. The standard structure of this JSON file is as follows:
+
+```json
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
+```
+
+Where:
+
+- `exportType`: Identifies the type of data being exported, currently including `sessions`, `agent`, `settings`, and `all`.
+- `state`: Stores the actual data, with different data types for different `exportType`.
+- `version`: Indicates the data version.
+
+In the implementation of the Session Group feature, we need to add `sessionGroups` data to the `state` field. This way, when users export data, their Session Group data will also be included.
+
+For example, when exporting sessions, the relevant implementation code modification is as follows:
+
+```diff
+class ConfigService {
+  // ... Other code omitted
+
+  exportSessions = async () => {
+    const sessions = await sessionService.getAllSessions();
++   const sessionGroups = await sessionService.getSessionGroups();
+    const messages = await messageService.getAllMessages();
+    const topics = await topicService.getAllTopics();
+
+-   const config = createConfigFile('sessions', { messages, sessions, topics });
++   const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
+
+    exportConfigFile(config, 'sessions');
+  };
+}
+```
+
+### Data Import
+
+The data import functionality is implemented through `ConfigService.importConfigState`. When users choose to import data, they need to provide a JSON file that conforms to the above structure specification. The `importConfigState` method accepts the data of the configuration file and imports it into the application.
+
+In the implementation of the Session Group feature, we need to handle the `sessionGroups` data during the data import process. This way, when users import data, their Session Group data will also be imported correctly.
+
+The following is the modified code for the import implementation in `importConfigState`:
+
+```diff
+class ConfigService {
+  // ... Other code omitted
+
++ importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
++   return sessionService.batchCreateSessionGroups(sessionGroups);
++ };
+
+  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
+    switch (config.exportType) {
+      case 'settings': {
+        await this.importSettings(config.state.settings);
+
+        break;
+      }
+
+      case 'agents': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const data = await this.importSessions(config.state.sessions);
+        return {
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(data),
+        };
+      }
+
+      case 'all': {
+        await this.importSettings(config.state.settings);
+
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+
+      case 'sessions': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+    }
+  };
+}
+```
+
+One key point of the above modification is to import sessionGroup first, because if sessions are imported first and the corresponding SessionGroup Id is not found in the current database, the group of this session will default to be modified to the default value. This will prevent the correct association of the sessionGroup's ID with the session.
+
+This is the implementation of the LobeChat Session Group feature in the data import and export process. This approach ensures that users' Session Group data is correctly handled during the import and export process.
+
+## Summary
+
+The above is the complete implementation process of the LobeChat Session Group feature. Developers can refer to this document for the development and testing of related functionalities.

DigitalHumanWeb/contributing/Basic/Feature-Development.zh-CN.md

@@ -0,0 +1,707 @@
+# LobeChat 功能开发完全指南
+
+本文档旨在指导开发者了解如何在 LobeChat 中开发一块完整的功能需求。
+
+我们将以 sessionGroup 的实现为示例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) ， 通过以下六个主要部分来阐述完整的实现流程：
+
+1. [数据模型 / 数据库定义](#一数据模型--数据库定义)
+2. [Service 实现 / Model 实现](#二service-实现--model-实现)
+3. [前端数据流 Store 实现](#三前端数据流-store-实现)
+4. [UI 实现与 action 绑定](#四ui-实现与-action-绑定)
+5. [数据迁移](#五数据迁移)
+6. [数据导入导出](#六数据导入导出)
+
+## 一、数据模型 / 数据库定义
+
+为了实现 Session Group 功能，首先需要在数据库层面定义相关的数据模型和索引。
+
+定义一个新的 sessionGroup 表，分 3 步：
+
+### 1. 建立数据模型 schema
+
+在 `src/database/schema/sessionGroup.ts` 中定义 `DB_SessionGroup` 的数据模型：
+
+```typescript
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
+
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
+```
+
+### 2. 创建数据库索引
+
+由于要新增一个表，所以需要在在数据库 Schema 中，为 `sessionGroup` 表添加索引。
+
+在 `src/database/core/schema.ts` 中添加 `dbSchemaV4`:
+
+```diff
+// ... 前面的一些实现
+
+// ************************************** //
+// ******* Version 3 - 2023-12-06 ******* //
+// ************************************** //
+// - Added `plugin` table
+
+export const dbSchemaV3 = {
+  ...dbSchemaV2,
+  plugins:
+    '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
+};
+
++ // ************************************** //
++ // ******* Version 4 - 2024-01-21 ******* //
++ // ************************************** //
++ // - Added `sessionGroup` table
+
++ export const dbSchemaV4 = {
++   ...dbSchemaV3,
++   sessionGroups: '&id, name, sort, createdAt, updatedAt',
++   sessions: '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
+```
+
+> \[!Note]
+>
+> 除了 `sessionGroups` 外，此处也修改了 `sessions` 的定义，原因是存在数据迁移的情况。但由于本节只关注 schema 定义，不展开数据迁移部分实现，详情可见第五节。
+
+> \[!Important]
+>
+> 如果你不了解为何此处需要创建索引，以及不了解此处的 schema 的定义语法。你可能需要提前了解下 Dexie.js 相关的基础知识，可以查阅 [📘 本地数据库](./Local-Database.zh-CN) 部分了解相关内容。
+
+### 3. 在本地 DB 中加入 sessionGroups 表
+
+扩展本地数据库类以包含新的 `sessionGroups` 表：
+
+```diff
+
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+
+interface LobeDBSchemaMap {
+  files: DB_File;
+  messages: DB_Message;
+  plugins: DB_Plugin;
++ sessionGroups: DB_SessionGroup;
+  sessions: DB_Session;
+  topics: DB_Topic;
+}
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
++ public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
++   this.version(4).stores(dbSchemaV4);
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
++   this.sessionGroups = this.table('sessionGroups');
+  }
+}
+```
+
+如此一来，你就可以通过在 `Application` -> `Storage` -> `IndexedDB` 中查看到 `LOBE_CHAT_DB` 里的 `sessionGroups` 表了。
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
+
+## 二、Service 实现 / Model 实现
+
+### 定义 Model
+
+在构建 LobeChat 应用时，Model 负责与数据库的交互，它定义了如何读取、插入、更新和删除数据库的数据，定义具体的业务逻辑。
+
+在 `src/database/model/sessionGroup.ts` 中定义 `SessionGroupModel`：
+
+```typescript
+import { BaseModel } from '@/database/client/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/client/schemas/sessionGroup';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessions', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  // ... 其他 CRUD 方法的实现
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
+```
+
+### Service 实现
+
+在 LobeChat 中，Service 层主要负责与后端服务进行通信，封装业务逻辑，并提供数据给前端的其他层使用。`SessionService` 是一个专门处理与会话（Session）相关业务逻辑的服务类，它封装了创建会话、查询会话、更新会话等操作。
+
+为了保持代码的可维护性和可扩展性，我们将会话分组相关的服务逻辑放在 `SessionService` 中，这样可以使会话领域的业务逻辑保持内聚。当业务需求增加或变化时，我们可以更容易地在这个领域内进行修改和扩展。
+
+`SessionService` 通过调用 `SessionGroupModel` 的方法来实现对会话分组的管理。 在 `sessionService` 中实现 Session Group 相关的请求逻辑：
+
+```typescript
+class SessionService {
+  // ... 省略 session 业务逻辑
+
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
+
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  // ... 其他 SessionGroup 相关的实现
+}
+```
+
+## 三、前端数据流 Store 实现
+
+在 LobeChat 应用中，Store 是用于管理应用前端状态的模块。其中的 Action 是触发状态更新的函数，通常会调用服务层的方法来执行实际的数据处理操作，然后更新 Store 中的状态。我们采用了 `zustand` 作为 Store 模块的底层依赖，对于状态管理的详细实践介绍，可以查阅 [📘 状态管理最佳实践](../State-Management/State-Management-Intro.zh-CN.md)
+
+### sessionGroup CRUD
+
+会话组的 CRUD 操作是管理会话组数据的核心行为。在 `src/store/session/slice/sessionGroup` 中，我们将实现与会话组相关的状态逻辑，包括添加、删除、更新会话组及其排序。
+
+以下是 `action.ts` 文件中需要实现的 `SessionGroupAction` 接口方法：
+
+```ts
+export interface SessionGroupAction {
+  // 增加会话组
+  addSessionGroup: (name: string) => Promise<string>;
+  // 删除会话组
+  removeSessionGroup: (id: string) => Promise<void>;
+  // 更新会话的会话组 ID
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  // 更新会话组名称
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  // 更新会话组排序
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+```
+
+以 `addSessionGroup` 方法为例，我们首先调用 `sessionService` 的 `createSessionGroup` 方法来创建新的会话组，然后使用 `refreshSessions` 方法来刷新 sessions 状态：
+
+```ts
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  // 实现添加会话组的逻辑
+  addSessionGroup: async (name) => {
+    // 调用服务层的 createSessionGroup 方法并传入会话组名称
+    const id = await sessionService.createSessionGroup(name);
+    // 调用 get 方法获取当前的 Store 状态并执行 refreshSessions 方法刷新会话数据
+    await get().refreshSessions();
+    // 返回新创建的会话组 ID
+    return id;
+  },
+  // ... 其他 action 实现
+});
+```
+
+通过以上的实现，我们可以确保在添加新的会话组后，应用的状态会及时更新，且相关的组件会收到最新的状态并重新渲染。这种方式提高了数据流的可预测性和可维护性，同时也简化了组件之间的通信。
+
+### Sessions 分组逻辑改造
+
+本次需求改造需要对 Sessions 进行升级，从原来的单一列表变成了三个不同的分组：`pinnedSessions`（置顶列表）、`customSessionGroups`（自定义分组）和 `defaultSessions`（默认列表）。
+
+为了处理这些分组，我们需要改造 `useFetchSessions` 的实现逻辑。以下是关键的改动点：
+
+1. 使用 `sessionService.getGroupedSessions` 方法负责调用后端接口来获取分组后的会话数据；
+2. 将获取后的数据保存为三到不同的状态字段中：`pinnedSessions`、`customSessionGroups` 和 `defaultSessions`；
+
+#### `useFetchSessions` 方法
+
+该方法在 `createSessionSlice` 中定义，如下所示：
+
+```typescript
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  // ... 其他方法
+  useFetchSessions: () =>
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      onSuccess: (data) => {
+        set(
+          {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
+            isSessionsFirstFetchFinished: true,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
+          },
+          false,
+          n('useFetchSessions/onSuccess', data),
+        );
+      },
+    }),
+});
+```
+
+在成功获取数据后，我们使用 `set` 方法来更新 `customSessionGroups`、`defaultSessions`、`pinnedSessions` 和 `sessions` 状态。这将保证状态与最新的会话数据同步。
+
+#### getGroupedSessions
+
+使用 `sessionService.getGroupedSessions` 方法负责调用后端接口 `SessionModel.queryWithGroups()`
+
+```typescript
+class SessionService {
+  // ... 其他 SessionGroup 相关的实现
+
+  async getGroupedSessions(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+}
+```
+
+#### `SessionModel.queryWithGroups` 方法
+
+此方法是 `sessionService.getGroupedSessions` 调用的核心方法，它负责查询和组织会话数据，代码如下：
+
+```typescript
+class _SessionModel extends BaseModel {
+  // ... 其他方法
+
+  /**
+   * 查询会话数据，并根据会话组将会话分类。
+   * @returns {Promise<ChatSessionList>} 返回一个对象，其中包含所有会话以及分为不同组的会话列表。
+   */
+  async queryWithGroups(): Promise<ChatSessionList> {
+    // 查询会话组数据
+    const groups = await SessionGroupModel.query();
+    // 根据会话组ID查询自定义会话组
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    // 查询默认会话列表
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    // 查询置顶的会话
+    const pinnedItems = await this.getPinnedSessions();
+
+    // 查询所有会话
+    const all = await this.query();
+    // 组合并返回所有会话及其分组信息
+    return {
+      all, // 包含所有会话的数组
+      customGroup: groups.map((group) => ({ ...group, children: customGroups[group.id] })), // 自定义分组
+      default: defaultItems, // 默认会话列表
+      pinned: pinnedItems, // 置顶会话列表
+    };
+  }
+}
+```
+
+方法 `queryWithGroups` 首先查询所有会话组，然后基于这些组的 ID 查询自定义会话组，同时查询默认和固定的会话。最后，它返回一个包含所有会话和按组分类的会话列表对象。
+
+### sessions selectors 调整
+
+由于 sessions 中关于分组的逻辑发生了变化，因此我们需要调整 `sessions` 的 selectors 逻辑，以确保它们能够正确地处理新的数据结构。
+
+原有的 selectors:
+
+```ts
+// 默认分组
+const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+
+// 置顶分组
+const pinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
+
+// 未置顶分组
+const unpinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
+```
+
+修改后：
+
+```ts
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
+```
+
+由于在 UI 中的取数全部是通过 `useSessionStore(sessionSelectors.defaultSessions)` 这样的写法实现的，因此我们只需要修改 `defaultSessions` 的选择器实现，即可完成数据结构的变更。 UI 层的取数代码完全不用变更，可以大大降低重构的成本和风险。
+
+> !\[Important]
+>
+> 如果你对 Selectors 的概念和功能不太了解，可以查阅 [📘 数据存储取数模块](../State-Management/State-Management-Selectors.zh-CN.md) 部分了解相关内容。
+
+## 四、UI 实现与 action 绑定
+
+在 UI 组件中绑定 Store Action 实现交互逻辑，例如 `CreateGroupModal`：
+
+```tsx
+const CreateGroupModal = () => {
+  // ... 其他逻辑
+
+  const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+    s.updateSessionGroupId,
+    s.addSessionGroup,
+  ]);
+
+  return (
+    <Modal
+      onOk={async () => {
+        // ... 其他逻辑
+        const groupId = await addCustomGroup(name);
+        await updateSessionGroup(sessionId, groupId);
+      }}
+    >
+      {/* ... */}
+    </Modal>
+  );
+};
+```
+
+## 五、数据迁移
+
+在软件开发过程中，数据迁移是一个不可避免的问题，尤其是当现有的数据结构无法满足新的业务需求时。对于本次 SessionGroup 的迭代，我们需要处理 `session` 的 `group` 字段的迁移，这是一个典型的数据迁移案例。
+
+### 旧数据结构的问题
+
+在旧的数据结构中，`group` 字段被用来标记会话是否为 `pinned`（置顶）或属于某个 `default`（默认）分组。但是当需要支持多个会话分组时，原有的数据结构就显得不够灵活了。
+
+例如：
+
+```
+before   pin:  group = abc
+after    pin:  group = pinned
+after  unpin:  group = default
+```
+
+从上述示例中可以看出，一旦会话从置顶状态（`pinned`）取消置顶（`unpin`），`group` 字段将无法恢复为原来的 `abc` 值。这是因为我们没有一个独立的字段来维护置顶状态。因此，我们引入了一个新的字段 `pinned` 来表示会话是否被置顶，而 `group` 字段将仅用于标识会话分组。
+
+### 迁移策略
+
+本次迁移的核心逻辑只有一条：
+
+- 当用户的 `group` 字段为 `pinned` 时，将其 `pinned` 字段置为 `true`，同时将 group 设为 `default`;
+
+但 LobeChat 中的数据迁移通常涉及到 **配置文件迁移** 和 **数据库迁移** 两个部分。所以上述逻辑会需要分别在两块实现迁移。
+
+#### 配置文件迁移
+
+对于配置文件迁移，我们建议先于数据库迁移进行，因为配置文件迁移通常更容易进行测试和验证。LobeChat 的文件迁移配置位于 `src/migrations/index.ts` 文件中，其中定义了配置文件迁移的各个版本及对应的迁移脚本。
+
+```diff
+// 当前最新的版本号
+- export const CURRENT_CONFIG_VERSION = 2;
++ export const CURRENT_CONFIG_VERSION = 3;
+
+// 历史记录版本升级模块
+const ConfigMigrations = [
++ /**
++ * 2024.01.22
++  * from `group = pinned` to `pinned:true`
++  */
++ MigrationV2ToV3,
+  /**
+   * 2023.11.27
+   * 从单 key 数据库转换为基于 dexie 的关系型结构
+   */
+  MigrationV1ToV2,
+  /**
+   * 2023.07.11
+   * just the first version, Nothing to do
+   */
+  MigrationV0ToV1,
+];
+```
+
+本次的配置文件迁移逻辑定义在 `src/migrations/FromV2ToV3/index.ts` 中，简化如下：
+
+```ts
+export class MigrationV2ToV3 implements Migration {
+  // 指定从该版本开始向上升级
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
+  };
+}
+```
+
+可以看到迁移的实现非常简单。但重要的是，我们需要保证迁移的正确性，因此需要编写对应的测试用例 `src/migrations/FromV2ToV3/migrations.test.ts`：
+
+```ts
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
+
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
+```
+
+单测需要使用 `fixtures` 来固定测试数据，测试用例包含了两个部分的验证逻辑： 1） 单次迁移（v2 -> v3）和 2） 完整迁移（v1 -> v3）的正确性。
+
+> \[!Important]
+>
+> 配置文件的版本号可能与数据库版本号不一致，因为数据库版本的更新不总是伴随数据结构的变化（如新增表或字段），而配置文件的版本更新则通常涉及到数据迁移。
+
+#### 数据库迁移
+
+数据库迁移则需要在 `LocalDB` 类中实施，该类定义在 `src/database/core/db.ts` 文件中。迁移过程涉及到为 `sessions` 表的每条记录添加新的 `pinned` 字段，并重置 `group` 字段：
+
+```diff
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
+    this.version(4)
+      .stores(dbSchemaV4)
++     .upgrade((trans) => this.upgradeToV4(trans));
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
+  }
+
++  /**
++   * 2024.01.22
++   *
++   * DB V3 to V4
++   * from `group = pinned` to `pinned:true`
++   */
++  upgradeToV4 = async (trans: Transaction) => {
++    const sessions = trans.table('sessions');
++    await sessions.toCollection().modify((session) => {
++      // translate boolean to number
++      session.pinned = session.group === 'pinned' ? 1 : 0;
++      session.group = 'default';
++    });
++  };
+}
+```
+
+以上就是我们的数据迁移策略。在进行迁移时，务必确保迁移脚本的正确性，并通过充分的测试验证迁移结果。
+
+## 六、数据导入导出
+
+在 LobeChat 中，数据导入导出功能是为了确保用户可以在不同设备之间迁移他们的数据。这包括会话、话题、消息和设置等数据。在本次的 Session Group 功能实现中，我们也需要对数据导入导出进行处理，以确保当完整导出的数据在其他设备上可以一模一样恢复。
+
+数据导入导出的核心实现在 `src/service/config.ts` 的 `ConfigService` 中，其中的关键方法如下：
+
+| 方法名称              | 描述             |
+| --------------------- | ---------------- |
+| `importConfigState`   | 导入配置数据     |
+| `exportAgents`        | 导出所有助理数据 |
+| `exportSessions`      | 导出所有会话数据 |
+| `exportSingleSession` | 导出单个会话数据 |
+| `exportSingleAgent`   | 导出单个助理数据 |
+| `exportSettings`      | 导出设置数据     |
+| `exportAll`           | 导出所有数据     |
+
+### 数据导出
+
+在 LobeChat 中，当用户选择导出数据时，会将当前的会话、话题、消息和设置等数据打包成一个 JSON 文件并提供给用户下载。这个 JSON 文件的标准结构如下：
+
+```json
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
+```
+
+其中：
+
+- `exportType`： 标识导出数据的类型，目前有 `sessions`、 `agent` 、 `settings` 和 `all` 四种；
+- `state`： 存储实际的数据，不同 `exportType` 的数据类型也不同；
+- `version`： 标识数据的版本。
+
+在 Session Group 功能实现中，我们需要在 `state` 字段中添加 `sessionGroups` 数据。这样，当用户导出数据时，他们的 Session Group 数据也会被包含在内。
+
+以导出 sessions 为例，导出数据的相关实现代码修改如下：
+
+```diff
+class ConfigService {
+  // ... 省略其他
+
+  exportSessions = async () => {
+    const sessions = await sessionService.getAllSessions();
++   const sessionGroups = await sessionService.getSessionGroups();
+    const messages = await messageService.getAllMessages();
+    const topics = await topicService.getAllTopics();
+
+-   const config = createConfigFile('sessions', { messages, sessions, topics });
++   const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
+
+    exportConfigFile(config, 'sessions');
+  };
+}
+```
+
+### 数据导入
+
+数据导入的功能是通过 `ConfigService.importConfigState` 来实现的。当用户选择导入数据时，他们需要提供一个由 符合上述结构规范的 JSON 文件。`importConfigState` 方法接受配置文件的数据，并将其导入到应用中。
+
+在 Session Group 功能实现中，我们需要在导入数据的过程中处理 `sessionGroups` 数据。这样，当用户导入数据时，他们的 Session Group 数据也会被正确地导入。
+
+以下是 `importConfigState` 中导入实现的变更代码：
+
+```diff
+class ConfigService {
+  // ... 省略其他代码
+
++ importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
++   return sessionService.batchCreateSessionGroups(sessionGroups);
++ };
+
+  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
+    switch (config.exportType) {
+      case 'settings': {
+        await this.importSettings(config.state.settings);
+
+        break;
+      }
+
+      case 'agents': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const data = await this.importSessions(config.state.sessions);
+        return {
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(data),
+        };
+      }
+
+      case 'all': {
+        await this.importSettings(config.state.settings);
+
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+
+      case 'sessions': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+    }
+  };
+}
+```
+
+上述修改的一个要点是先进行 sessionGroup 的导入，因为如果先导入 session 时，如果没有在当前数据库中查到相应的 SessionGroup Id，那么这个 session 的 group 会兜底修改为默认值。这样就无法正确地将 sessionGroup 的 ID 与 session 进行关联。
+
+以上就是 LobeChat Session Group 功能在数据导入导出部分的实现。通过这种方式，我们可以确保用户的 Session Group 数据在导入导出过程中能够被正确地处理。
+
+## 总结
+
+以上就是 LobeChat Session Group 功能的完整实现流程。开发者可以参考本文档进行相关功能的开发和测试。

DigitalHumanWeb/contributing/Basic/Folder-Structure.md

@@ -0,0 +1,40 @@
+# Directory Structure
+
+The directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Main logic and state management related code for the application
+├── components # Reusable UI components
+├── config     # Application configuration files, including client-side and server-side environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Function modules related to business functions, such as agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility hooks reused throughout the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Internationalization language files
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # Common utility functions
+```
+
+## app
+
+In the `app` folder, we organize each route page according to the app router's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to separately handle the implementation of desktop and mobile code. Taking the file structure of the `welcome` page as an example:
+
+```bash
+welcome
+├── (desktop)               # Desktop implementation
+│   ├── features            # Desktop-specific features
+│   ├── index.tsx           # Main entry file for desktop
+│   └── layout.desktop.tsx  # Desktop layout component
+├── (mobile)                # Mobile implementation
+│   ├── features            # Mobile-specific features
+│   ├── index.tsx           # Main entry file for mobile
+│   └── layout.mobile.tsx   # Mobile layout component
+├── features                # This folder contains features code shared by both desktop and mobile, such as the Banner component
+│   └── Banner
+└── page.tsx                # This is the main entry file for the page, used to load desktop or mobile code based on the device type
+```
+
+In this way, we can clearly distinguish and manage desktop and mobile code, while also easily reusing code required on both devices, thereby improving development efficiency and maintaining code cleanliness and maintainability.

DigitalHumanWeb/contributing/Basic/Folder-Structure.zh-CN.md

@@ -0,0 +1,40 @@
+# 目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+## app
+
+在 `app` 文件夹中，我们将每个路由页面按照 app router 的 [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) 进行组织，以此来分别处理桌面端和移动端的代码实现。以 `welcome` 页面的文件结构为例：
+
+```bash
+welcome
+├── (desktop)               # 桌面端实现
+│   ├── features            # 桌面端特有的功能
+│   ├── index.tsx           # 桌面端的主入口文件
+│   └── layout.desktop.tsx  # 桌面端的布局组件
+├── (mobile)                # 移动端实现
+│   ├── features            # 移动端特有的功能
+│   ├── index.tsx           # 移动端的主入口文件
+│   └── layout.mobile.tsx   # 移动端的布局组件
+├── features                # 此文件夹包含双端共享的特性代码，如 Banner 组件
+│   └── Banner
+└── page.tsx                # 此为页面的主入口文件，用于根据设备类型选择加载桌面端或移动端的代码
+```
+
+通过这种方式，我们可以清晰地区分和管理桌面端和移动端的代码，同时也能方便地复用在两种设备上都需要的代码，从而提高开发效率并保持代码的整洁和可维护性。

DigitalHumanWeb/contributing/Basic/Intro.md

@@ -0,0 +1,111 @@
+# Technical Development Getting Started Guide
+
+Welcome to the LobeChat Technical Development Getting Started Guide. LobeChat is an AI conversation application built on the Next.js framework, incorporating a range of technology stacks to achieve diverse functionalities and features. This guide will detail the main technical components of LobeChat and how to configure and use these technologies in your development environment.
+
+#### TOC
+
+- [Basic Technology Stack](#basic-technology-stack)
+- [Folder Directory Structure](#folder-directory-structure)
+- [Local Development Environment Setup](#local-development-environment-setup)
+- [Code Style and Contribution Guide](#code-style-and-contribution-guide)
+- [Internationalization Implementation Guide](#internationalization-implementation-guide)
+- [Appendix: Resources and References](#appendix-resources-and-references)
+
+## Basic Technology Stack
+
+The core technology stack of LobeChat is as follows:
+
+- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler.
+- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, along with [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
+- **State Management**: We selected [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
+- **Network Requests**: We use [swr](https://swr.vercel.app/), a React Hooks library for data fetching.
+- **Routing**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/).
+- **Internationalization**: We use [i18next](https://www.i18next.com/) to support multiple languages in the application.
+- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that complements Ant Design.
+- **Unit Testing**: We use [vitest](https://github.com/vitest-dev/vitest) for unit testing.
+
+## Folder Directory Structure
+
+The folder directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Code related to the main logic and state management of the application
+├── components # Reusable UI components
+├── config     # Application configuration files, including client and server environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Business-related feature modules, such as Agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility Hooks reusable across the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Language files for internationalization
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # General utility functions
+```
+
+For a detailed introduction to the directory structure, see: [Folder Directory Structure](Folder-Structure.zh-CN.md)
+
+## Local Development Environment Setup
+
+This section outlines setting up the development environment and local development. Before starting, please ensure that Node.js, Git, and your chosen package manager (Bun or PNPM) are installed in your local environment.
+
+We recommend using WebStorm as your integrated development environment (IDE).
+
+1. **Get the code**: Clone the LobeChat code repository locally:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Enter the project directory and install the required dependencies:
+
+```bash
+cd lobe-chat
+# If you use Bun
+bun install
+# If you use PNPM
+pnpm install
+```
+
+3. **Run and debug**: Start the local development server and begin your development journey:
+
+```bash
+# Start the development server with Bun
+bun run dev
+# Visit http://localhost:3010 to view the application
+```
+
+> \[!IMPORTANT]\
+> If you encounter the error "Could not find 'stylelint-config-recommended'" when installing dependencies with `npm`, please reinstall the dependencies using `pnpm` or `bun`.
+
+Now, you should be able to see the welcome page of LobeChat in your browser. For a detailed environment setup guide, please refer to [Development Environment Setup Guide](Setup-Development.zh-CN.md).
+
+## Code Style and Contribution Guide
+
+In the LobeChat project, we place great emphasis on the quality and consistency of the code. For this reason, we have established a series of code style standards and contribution processes to ensure that every developer can smoothly participate in the project. Here are the code style and contribution guidelines you need to follow as a developer.
+
+- **Code Style**: We use `@lobehub/lint` to unify the code style, including ESLint, Prettier, remarklint, and stylelint configurations. Please adhere to our code standards to maintain code consistency and readability.
+- **Contribution Process**: We use gitmoji and semantic release for code submission and release processes. Please use gitmoji to annotate your commit messages and ensure compliance with the semantic release standards so that our automation systems can correctly handle version control and releases.
+
+All contributions will undergo code review. Maintainers may suggest modifications or requirements. Please respond actively to review comments and make timely adjustments. We look forward to your participation and contribution.
+
+For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guide](Contributing-Guidelines.zh-CN.md).
+
+## Internationalization Implementation Guide
+
+LobeChat uses `i18next` and `lobe-i18n` to implement multilingual support, ensuring a global user experience.
+
+Internationalization files are located in `src/locales`, containing the default language (Chinese). We generate other language JSON files automatically through `lobe-i18n`.
+
+If you want to add a new language, follow specific steps detailed in [New Language Addition Guide](../Internationalization/Add-New-Locale.zh-CN.md). We encourage you to participate in our internationalization efforts to provide better services to global users.
+
+For a detailed guide on internationalization implementation, please refer to [Internationalization Implementation Guide](../Internationalization/Internationalization-Implementation.zh-CN.md).
+
+## Appendix: Resources and References
+
+To support developers in better understanding and using the technology stack of LobeChat, we provide a comprehensive list of resources and references — [LobeChat Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - Visit our maintained list of resources, including tutorials, articles, and other useful links.
+
+We encourage developers to utilize these resources to deepen their learning and enhance their skills, join community discussions through [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) or [Discord](https://discord.com/invite/AYFPHvv2jT), ask questions, or share your experiences.
+
+If you have any questions or need further assistance, please do not hesitate to contact us through the above channels.

DigitalHumanWeb/contributing/Basic/Intro.zh-CN.md

@@ -0,0 +1,111 @@
+# 技术开发上手指南
+
+欢迎来到 LobeChat 技术开发上手指南。LobeChat 是一款基于 Next.js 框架构建的 AI 会话应用，它汇集了一系列的技术栈，以实现多样化的功能和特性。本指南将详细介绍 LobeChat 的主要技术组成，以及如何在你的开发环境中配置和使用这些技术。
+
+#### TOC
+
+- [基础技术栈](#基础技术栈)
+- [文件夹目录架构](#文件夹目录架构)
+- [本地开发环境设置](#本地开发环境设置)
+- [代码风格与贡献指南](#代码风格与贡献指南)
+- [国际化实现指南](#国际化实现指南)
+- [附录：资源与参考](#附录资源与参考)
+
+## 基础技术栈
+
+LobeChat 的核心技术栈如下：
+
+- **框架**：我们选择了 [Next.js](https://nextjs.org/)，这是一款强大的 React 框架，为我们的项目提供了服务端渲染、路由框架、Router Handler 等关键功能。
+- **组件库**：我们使用了 [Ant Design (antd)](https://ant.design/) 作为基础组件库，同时引入了 [lobe-ui](https://github.com/lobehub/lobe-ui) 作为我们的业务组件库。
+- **状态管理**：我们选用了 [zustand](https://github.com/pmndrs/zustand)，一款轻量级且易于使用的状态管理库。
+- **网络请求**：我们采用 [swr](https://swr.vercel.app/)，这是一款用于数据获取的 React Hooks 库。
+- **路由**：路由管理我们直接使用 [Next.js](https://nextjs.org/) 自身提供的解决方案。
+- **国际化**：我们使用 [i18next](https://www.i18next.com/) 来实现应用的多语言支持。
+- **样式**：我们使用 [antd-style](https://github.com/ant-design/antd-style)，这是一款与 Ant Design 配套的 CSS-in-JS 库。
+- **单元测试**：我们使用 [vitest](https://github.com/vitest-dev/vitest) 进行单元测试。
+
+## 文件夹目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN.md)
+
+## 本地开发环境设置
+
+本节将概述搭建开发环境并进行本地开发。 在开始之前，请确保你的本地环境中已安装 Node.js、Git 以及你选择的包管理器（Bun 或 PNPM）。
+
+我们推荐使用 WebStorm 作为你的集成开发环境（IDE）。
+
+1. **获取代码**：克隆 LobeChat 的代码库到本地：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：进入项目目录，并安装所需依赖：
+
+```bash
+cd lobe-chat
+# 如果你使用 Bun
+bun install
+# 如果你使用 PNPM
+pnpm install
+```
+
+3. **运行与调试**：启动本地开发服务器，开始你的开发之旅：
+
+```bash
+# 使用 Bun 启动开发服务器
+bun run dev
+# 访问 http://localhost:3010 查看应用
+```
+
+> \[!IMPORTANT]\
+> 如果使用`npm`安装依赖出现`Could not find "stylelint-config-recommended"`错误，请使用 `pnpm` 或者 `bun` 重新安装依赖。
+
+现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN.md)。
+
+## 代码风格与贡献指南
+
+在 LobeChat 项目中，我们十分重视代码的质量和一致性。为此，我们制定了一系列的代码风格规范和贡献流程，以确保每位开发者都能顺利地参与到项目中。以下是你作为开发者需要遵守的代码风格和贡献准则。
+
+- **代码风格**：我们使用 `@lobehub/lint` 统一代码风格，包括 ESLint、Prettier、remarklint 和 stylelint 配置。请遵守我们的代码规范，以保持代码的一致性和可读性。
+- **贡献流程**：我们采用 gitmoji 和 semantic release 作为代码提交和发布流程。请使用 gitmoji 标注您的提交信息，并确保遵循 semantic release 的规范，以便我们的自动化系统能够正确处理版本控制和发布。
+
+所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
+
+详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN.md)。
+
+## 国际化实现指南
+
+LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户全球化体验。
+
+国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
+
+如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](../Internationalization/Add-New-Locale.zh-CN.md)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
+
+详细的国际化实现指南指南，请参考 [国际化实现指南](../Internationalization/Internationalization-Implementation.zh-CN.md)。
+
+## 附录：资源与参考
+
+为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
+
+我们鼓励开发者利用这些资源深入学习和提升技能，通过 [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) 或者 [Discord](https://discord.com/invite/AYFPHvv2jT) 加入社区讨论，提出问题或分享你的经验。
+
+如果你有任何疑问，或者需要进一步的帮助，请不要犹豫，请通过上述渠道与我们联系。

DigitalHumanWeb/contributing/Basic/Resources.md

@@ -0,0 +1,19 @@
+# Resources and References
+
+The design and development of LobeChat would not have been possible without the excellent projects in the community and ecosystem. We have used or referred to some outstanding resources and guides in the design and development process. Here are some key reference resources for developers to refer to during the development and learning process:
+
+1. **OpenAI API Guide**: We use OpenAI's API to access and process AI conversation data. You can check out the [OpenAI API Guide](https://platform.openai.com/docs/api-reference/introduction) for more details.
+
+2. **OpenAI SDK**: We use OpenAI's Node.js SDK to interact with OpenAI's API. You can view the source code and documentation on the [OpenAI SDK](https://github.com/openai/openai-node) GitHub repository.
+
+3. **AI SDK**: We use Vercel's AI SDK to access and process AI conversation data. You can refer to the documentation of [AI SDK](https://sdk.vercel.ai/docs) for more details.
+
+4. **LangChain**: Our early conversation feature was implemented based on LangChain. You can visit [LangChain](https://langchain.com) to learn more about it.
+
+5. **Chat-Next-Web**: Chat Next Web is an excellent project, and some of LobeChat's features and workflows are referenced from its implementation. You can view the source code and documentation on the [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) GitHub repository.
+
+6. **Next.js Documentation**: Our project is built on Next.js, and you can refer to the [Next.js Documentation](https://nextjs.org/docs) for more information about Next.js.
+
+7. **FlowGPT**: FlowGPT is currently the world's largest Prompt community, and some of the agents in LobeChat come from active authors in FlowGPT. You can visit [FlowGPT](https://flowgpt.com/) to learn more about it.
+
+We will continue to update and supplement this list to provide developers with more reference resources.

DigitalHumanWeb/contributing/Basic/Resources.zh-CN.md

@@ -0,0 +1,19 @@
+# 资源与参考
+
+LobeChat 的设计和开发离不开社区和生态中的优秀项目。我们在设计和开发过程中使用或参考了一些优秀的资源和指南。以下是一些主要的参考资源，供开发者在开发和学习过程中参考：
+
+1. **OpenAI API 指南**：我们使用 OpenAI 的 API 来获取和处理 AI 的会话数据。你可以查看 [OpenAI API 指南](https://platform.openai.com/docs/api-reference/introduction) 了解更多详情。
+
+2. **OpenAI SDK**：我们使用 OpenAI 的 Node.js SDK 来与 OpenAI 的 API 交互。你可以在 [OpenAI SDK](https://github.com/openai/openai-node) 的 GitHub 仓库中查看源码和文档。
+
+3. **AI SDK**：我们使用 Vercel 的 AI SDK 来获取和处理 AI 的会话数据。你可以查看 [AI SDK](https://sdk.vercel.ai/docs) 的文档来了解更多详情。
+
+4. **LangChain**：我们早期的会话功能是基于 LangChain 实现的。你可以访问 [LangChain](https://langchain.com) 来了解更多关于它的信息。
+
+5. **Chat-Next-Web**：Chat Next Web 是一个优秀的项目，LobeChat 的部分功能、Workflow 等参考了它的实现。你可以在 [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) 的 GitHub 仓库中查看源码和文档。
+
+6. **Next.js 文档**：我们的项目是基于 Next.js 构建的，你可以查看 [Next.js 文档](https://nextjs.org/docs) 来了解更多关于 Next.js 的信息。
+
+7. **FlowGPT**：FlowGPT 是目前全球最大的 Prompt 社区，LobeChat 中的一些 Agent 来自 FlowGPT 的活跃作者。你可以访问 [FlowGPT](https://flowgpt.com/) 来了解更多关于它的信息。
+
+我们会持续更新和补充这个列表，为开发者提供更多的参考资源。

DigitalHumanWeb/contributing/Basic/Setup-Development.md

@@ -0,0 +1,69 @@
+# Environment Setup Guide
+
+Welcome to the LobeChat development environment setup guide.
+
+#### TOC
+
+- [Online Development](#online-development)
+- [Local Development](#local-development)
+  - [Development Environment Requirements](#development-environment-requirements)
+  - [Project Setup](#project-setup)
+
+## Online Development
+
+If you have access to GitHub Codespaces, you can click the button below to enter the online development environment with just one click:
+
+[![][codespaces-shield]][codespaces-link]
+
+## Local Development
+
+Before starting development on LobeChat, you need to install and configure some necessary software and tools in your local environment. This document will guide you through these steps.
+
+### Development Environment Requirements
+
+First, you need to install the following software:
+
+- Node.js: LobeChat is built on Node.js, so you need to install Node.js. We recommend installing the latest stable version.
+- Yarn: We use Yarn as the preferred package manager. You can download and install it from the Yarn official website.
+- PNPM: We use PNPM as an auxiliary package manager. You can download and install it from the PNPM official website.
+- Git: We use Git for version control. You can download and install it from the Git official website.
+- IDE: You can choose your preferred integrated development environment (IDE). We recommend using WebStorm, a powerful IDE particularly suitable for TypeScript development.
+
+### Project Setup
+
+After installing the above software, you can start setting up the LobeChat project.
+
+1. **Get the code**: First, you need to clone the LobeChat codebase from GitHub. Run the following command in the terminal:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Then, navigate to the project directory and use Yarn to install the project's dependencies:
+
+```bash
+cd lobe-chat
+yarn install
+```
+
+If you are using PNPM, you can execute:
+
+```bash
+cd lobe-chat
+pnpm install
+```
+
+3. **Start the development server**: After installing the dependencies, you can start the development server:
+
+```bash
+yarn run dev
+```
+
+Now, you can open `http://localhost:3010` in your browser, and you should see the welcome page of LobeChat. This indicates that you have successfully set up the development environment.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+During the development process, if you encounter any issues with environment setup or have any questions about LobeChat development, feel free to ask us at any time. We look forward to seeing your contributions!
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

DigitalHumanWeb/contributing/Basic/Setup-Development.zh-CN.md

@@ -0,0 +1,69 @@
+# 环境设置指南
+
+欢迎阅读 LobeChat 的开发环境设置指南。
+
+#### TOC
+
+- [在线开发](#在线开发)
+- [本地开发](#本地开发)
+  - [开发环境需求](#开发环境需求)
+  - [项目设置](#项目设置)
+
+## 在线开发
+
+如果你有 GitHub Codespaces 的使用权限，可以点击下方按钮一键进入在线开发环境：
+
+[![][codespaces-shield]][codespaces-link]
+
+## 本地开发
+
+在开始开发 LobeChat 之前，你需要在本地环境中安装和配置一些必要的软件和工具。本文档将指导你完成这些步骤。
+
+### 开发环境需求
+
+首先，你需要安装以下软件：
+
+- Node.js：LobeChat 是基于 Node.js 构建的，因此你需要安装 Node.js。我们建议安装最新的稳定版。
+- Bun：我们使用 Bun 作为首选包管理器。你可以从 Bun 的官方网站上下载并安装。
+- PNPM：我们使用 PNPM 作为辅助包管理器。你可以从 pnpm 的官方网站上下载并安装。
+- Git：我们使用 Git 进行版本控制。你可以从 Git 的官方网站上下载并安装。
+- IDE：你可以选择你喜欢的集成开发环境（IDE）。我们推荐使用 WebStorm，它是一款功能强大的 IDE，特别适合 TypeScript 开发。
+
+### 项目设置
+
+完成上述软件的安装后，你可以开始设置 LobeChat 项目了。
+
+1. **获取代码**：首先，你需要从 GitHub 上克隆 LobeChat 的代码库。在终端中运行以下命令：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：然后，进入项目目录，并使用 bun 安装项目的依赖包：
+
+```bash
+cd lobe-chat
+bun i
+```
+
+如果你使用 pnpm ，可以执行:
+
+```bash
+cd lobe-chat
+pnpm i
+```
+
+3. **启动开发服务器**：安装完依赖后，你可以启动开发服务器：
+
+```bash
+bun run dev
+```
+
+现在，你可以在浏览器中打开 `http://localhost:3010`，你应该能看到 LobeChat 的欢迎页面。这表明你已经成功地设置了开发环境。
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+在开发过程中，如果你在环境设置上遇到任何问题，或者有任何关于 LobeChat 开发的问题，欢迎随时向我们提问。我们期待看到你的贡献！
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

DigitalHumanWeb/contributing/Basic/Test.md

@@ -0,0 +1,87 @@
+# Testing Guide
+
+LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:
+
+#### TOC
+
+- [Unit Testing](#unit-testing)
+- [🚧 End-to-End Testing](#-end-to-end-testing)
+- [Development Testing](#development-testing)
+  - [1. Unit Testing](#1-unit-testing)
+- [Testing Strategy](#testing-strategy)
+
+## Unit Testing
+
+Unit testing is used to test the functionality of independent units in the application, such as components, functions, utility functions, etc. We use [vitest][vitest-url] for unit testing.
+
+To run unit tests, you can use the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and generate a test report.
+
+We encourage developers to write corresponding unit tests while writing code to ensure the quality and stability of the code.
+
+## 🚧 End-to-End Testing
+
+End-to-end testing is used to test the functionality and performance of the application in a real environment. It simulates real user operations and verifies the application's performance in different scenarios.
+
+Currently, there is no integrated end-to-end testing in LobeChat. We will gradually introduce end-to-end testing in subsequent iterations.
+
+## Development Testing
+
+### 1. Unit Testing
+
+Unit testing is conducted on the smallest testable units in the application, usually functions, components, or modules. In LobeChat, we use [vitest][vitest-url] for unit testing.
+
+#### Writing Test Cases
+
+Before writing unit tests, you need to create a directory with the same name as the file to be tested and name the test file `<filename>.test.ts`. For example, if you want to test the `src/utils/formatDate.ts` file, the test file should be named `src/utils/formatDate.test.ts`.
+
+In the test file, you can use the `describe` and `it` functions to organize and write test cases. The `describe` function is used to create a test suite, and the `it` function is used to write specific test cases.
+
+```typescript
+import { formatNumber } from './formatNumber';
+
+describe('formatNumber', () => {
+  it('should format number with comma separator', () => {
+    const result = formatNumber(1000);
+    expect(result).toBe('1,000');
+  });
+
+  it('should return the same number if it is less than 1000', () => {
+    const result = formatNumber(500);
+    expect(result).toBe('500');
+  });
+});
+```
+
+In test cases, you can use the `expect` function to assert whether the test results meet expectations. The `expect` function can be used with various matchers, such as `toBe`, `toEqual`, `toBeTruthy`, etc.
+
+#### Running Unit Tests
+
+Execute unit tests by running the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and output the test results.
+
+## Testing Strategy
+
+To write effective test cases, you can consider the following testing strategies:
+
+- **Boundary Testing**: Test the boundary conditions of inputs, such as minimum value, maximum value, empty value, etc.
+- **Exception Testing**: Test the code handling exceptional cases, such as error handling, fallback in exceptional situations, etc.
+- **Functional Testing**: Test whether various functional modules of the application work properly, including user interaction, data processing, etc.
+- **Compatibility Testing**: Test the compatibility of the application on different browsers and devices.
+- **Performance Testing**: Test the performance of the application under different loads, such as response time, resource utilization, etc.
+
+Also, ensure that your test cases have good coverage, covering critical code and functionality in the application.
+
+By properly writing and executing unit tests, integration tests, and end-to-end tests, you can improve the quality and stability of the application and promptly identify and fix potential issues.
+
+[vitest-url]: https://vitest.dev/

DigitalHumanWeb/contributing/Basic/Test.zh-CN.md

@@ -0,0 +1,87 @@
+# 测试指南
+
+LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
+
+#### TOC
+
+- [单元测试](#单元测试)
+- [🚧 端到端测试](#-端到端测试)
+- [开发测试](#开发测试)
+  - [1. 单元测试](#1-单元测试)
+- [测试策略](#测试策略)
+
+## 单元测试
+
+单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 [vitest][vitest-url] 进行单元测试。
+
+要运行单元测试，可以使用以下命令：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并生成测试报告。
+
+我们鼓励开发者在编写代码时，同时编写对应的单元测试，以确保代码的质量和稳定性。
+
+## 🚧 端到端测试
+
+端到端测试用于测试应用在真实环境中的功能和性能。它模拟用户的真实操作，并验证应用在不同场景下的表现。
+
+在 LobeChat 中，目前暂时没有集成端到端测试，我们会在后续迭代中逐步引入端到端测试。
+
+## 开发测试
+
+### 1. 单元测试
+
+单元测试是针对应用中的最小可测试单元进行的测试，通常是针对函数、组件或模块进行的测试。在 LobeChat 中，我们使用 [vitest][vitest-url] 进行单元测试。
+
+#### 编写测试用例
+
+在编写单元测试之前，您需要创建一个与被测试文件相同的目录，并将测试文件命名为 `<filename>.test.ts`。例如，如果要测试 `src/utils/formatDate.ts` 文件，测试文件应命名为 `src/utils/formatDate.test.ts`。
+
+在测试文件中，您可以使用 `describe` 和 `it` 函数来组织和编写测试用例。`describe` 函数用于创建测试套件，`it` 函数用于编写具体的测试用例。
+
+```typescript
+import { formatNumber } from './formatNumber';
+
+describe('formatNumber', () => {
+  it('should format number with comma separator', () => {
+    const result = formatNumber(1000);
+    expect(result).toBe('1,000');
+  });
+
+  it('should return the same number if it is less than 1000', () => {
+    const result = formatNumber(500);
+    expect(result).toBe('500');
+  });
+});
+```
+
+在测试用例中，您可以使用 `expect` 函数来断言测试结果是否符合预期。`expect` 函数可以与各种匹配器（matchers）一起使用，例如 `toBe`、`toEqual`、`toBeTruthy` 等。
+
+#### 运行单元测试
+
+通过运行以下命令来执行单元测试：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并输出测试结果。
+
+## 测试策略
+
+为了编写有效的测试用例，您可以考虑以下测试策略：
+
+- **边界条件测试**：测试输入的边界条件，例如最小值、最大值、空值等。
+- **异常情况测试**：测试处理异常情况的代码，例如错误处理、异常情况下的回退等。
+- **功能测试**：测试应用的各个功能模块是否正常工作，包括用户交互、数据处理等。
+- **兼容性测试**：测试应用在不同浏览器和设备上的兼容性。
+- **性能测试**：测试应用在不同负载下的性能表现，例如响应时间、资源占用等。
+
+同时，请确保您的测试用例具有良好的覆盖率，覆盖到应用中的关键代码和功能。
+
+通过合理编写和执行单元测试、集成测试和端到端测试，您可以提高应用的质量和稳定性，并及时发现和修复潜在的问题。
+
+[vitest-url]: https://vitest.dev/

DigitalHumanWeb/contributing/Home.md

@@ -0,0 +1,87 @@
+<div align="center">
+
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
+<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/robot.webp">
+
+<h1>Lobe Chat Contributing Wiki</h1>
+
+LobeChat is an open-source, extensible ([Function Calling][fc-url]), high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
+
+[Usage Documents](https://lobehub.com/docs) | [使用指南](https://lobehub.com/docs)
+
+</div>
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+<!-- DOCS LIST -->
+
+### 🤯 Basic
+
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
+- [Code Style and Contribution Guidelines](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines) | [代码风格与贡献指南](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines.zh-CN)
+- [Complete Guide to LobeChat Feature Development](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [LobeChat 功能开发完全指南](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [如何开发一个新功能：前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
+- [New Authentication Provider Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers) | [新身份验证方式开发指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers.zh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Intro) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Intro.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
+
+<br/>
+
+### 🌎 Internationalization
+
+- [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
+- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+
+<br/>
+
+### ⌨️ State Management
+
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors.zh-CN)
+
+<br/>
+
+### 🤖 Agents
+
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+
+<br/>
+
+### 🧩 Plugins
+
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [插件索引与提交](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [插件 SDK 文档](https://chat-plugin-sdk.lobehub.com)
+
+<br/>
+
+### 📊 Others
+
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse) | [Lighthouse 测试报告](https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN)
+
+<br/>
+
+ <!-- DOCS LIST -->
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-url]
+
+</details>
+
+Copyright © 2023 [LobeHub][profile-url]. <br />
+This project is [MIT][license-url] licensed.
+
+<!-- LINK GROUP -->
+
+[fc-url]: https://sspai.com/post/81986
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
+[fossa-license-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
+[license-url]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
+[profile-url]: https://github.com/lobehub

DigitalHumanWeb/contributing/Internationalization/Add-New-Locale.md

@@ -0,0 +1,62 @@
+# New Locale Guide
+
+LobeChat uses [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution, which allows for quick addition of new language support in the application.
+
+## TOC
+
+- [Adding New Language Support](#adding-new-language-support)
+  - [Step 1: Update the Internationalization Configuration File](#step-1-update-the-internationalization-configuration-file)
+  - [Step 2: Automatically Translate Language Files](#step-2-automatically-translate-language-files)
+  - [Step 3: Submit and Review Your Changes](#step-3-submit-and-review-your-changes)
+  - [Additional Information](#additional-information)
+
+## Adding New Language Support
+
+To add new language internationalization support in LobeChat (for example, adding Vietnamese `vi-VN`), please follow the steps below:
+
+### Step 1: Update the Internationalization Configuration File
+
+1. Open the `.i18nrc.js` file. You can find this file in the project's root directory.
+2. Add the new language code to the configuration file. For example, to add Vietnamese, you need to add `'vi-VN'` to the configuration file.
+
+```js
+module.exports = {
+  // ... Other configurations
+
+  outputLocales: [
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    // ...Other languages
+
+    'vi-VN', // Add 'vi-VN' to the array
+  ],
+};
+```
+
+### Step 2: Automatically Translate Language Files
+
+LobeChat uses the `lobe-i18n` tool to automatically translate language files, so manual updating of i18n files is not required.
+
+Run the following command to automatically translate and generate the Vietnamese language files:
+
+```bash
+npm run i18n
+```
+
+This will utilize the `lobe-i18n` tool to process the language files.
+
+### Step 3: Submit and Review Your Changes
+
+Once you have completed the above steps, you need to submit your changes and create a Pull Request.
+
+Ensure that you follow LobeChat's contribution guidelines and provide a necessary description to explain your changes. For example, refer to a similar previous Pull Request [#759](https://github.com/lobehub/lobe-chat/pull/759).
+
+### Additional Information
+
+- After submitting your Pull Request, please patiently wait for the project maintainers to review it.
+- If you encounter any issues, you can reach out to the LobeChat community for assistance.
+- For more accurate results, ensure that your Pull Request is based on the latest main branch and stays in sync with the main branch.
+
+By following the above steps, you can successfully add new language support to LobeChat and ensure that the application provides a localized experience for more users.

DigitalHumanWeb/contributing/Internationalization/Add-New-Locale.zh-CN.md

@@ -0,0 +1,62 @@
+# 新语种添加指南
+
+LobeChat 使用 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) 作为 i18n 解决方案，可以在应用中快速添加新的语言支持。
+
+## TOC
+
+- [添加新的语言支持](#添加新的语言支持)
+  - [步骤 1: 更新国际化配置文件](#步骤-1-更新国际化配置文件)
+  - [步骤 2: 自动翻译语言文件](#步骤-2-自动翻译语言文件)
+  - [步骤 3: 提交和审查你的更改](#步骤-3-提交和审查你的更改)
+  - [附加信息](#附加信息)
+
+## 添加新的语言支持
+
+为了在 LobeChat 中添加新的语言国际化支持，（例如添加越南语 `vi-VN`)，请按照以下步骤操作：
+
+### 步骤 1: 更新国际化配置文件
+
+1. 打开 `.i18nrc.js` 文件。你可以在项目的根目录中找到此文件。
+2. 将新的语言代码添加到配置文件中。例如，为了添加越南语，你需要在配置文件中添加 `'vi-VN'`。
+
+```js
+module.exports = {
+  // ... 其他配置
+
+  outputLocales: [
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    // ...其他语言
+
+    'vi-VN', // 在数组中添加 'vi-VN'
+  ],
+};
+```
+
+### 步骤 2: 自动翻译语言文件
+
+LobeChat 使用 `lobe-i18n` 工具来自动翻译语言文件，因此不需要手动更新 i18n 文件。
+
+运行以下命令来自动翻译并生成越南语的语言文件：
+
+```bash
+npm run i18n
+```
+
+这将会利用 `lobe-i18n` 工具来处理语言文件。
+
+### 步骤 3: 提交和审查你的更改
+
+一旦你完成了上述步骤，你需要提交你的更改并创建一个 Pull Request。
+
+请确保你遵循了 LobeChat 的贡献指南，并提供必要的描述来说明你的更改。例如，参考之前的类似 Pull Request [#759](https://github.com/lobehub/lobe-chat/pull/759)。
+
+### 附加信息
+
+- 提交你的 Pull Request 后，请耐心等待项目维护人员的审查。
+- 如果遇到任何问题，可以联系 LobeChat 社区寻求帮助。
+- 为了更精确的结果，确保你的 Pull Request 是基于最新的主分支，并且与主分支保持同步。
+
+通过遵循上述步骤，你可以成功为 LobeChat 添加新的语言支持，并且确保应用能够为更多用户提供本地化的体验。

DigitalHumanWeb/contributing/Internationalization/Internationalization-Implementation.md

@@ -0,0 +1,125 @@
+# Internationalization Implementation Guide
+
+Welcome to the LobeChat Internationalization Implementation Guide. This document will guide you through understanding the internationalization mechanism of LobeChat, including file structure and how to add new languages. LobeChat uses `i18next` and `lobe-i18n` as the internationalization solution, aiming to provide users with seamless multilingual support.
+
+## TOC
+
+- [Internationalization Overview](#internationalization-overview)
+- [File Structure](#file-structure)
+- [Core Implementation Logic](#core-implementation-logic)
+- [Adding Support for New Languages](#adding-support-for-new-languages)
+- [Resources and Further Reading](#resources-and-further-reading)
+
+## Internationalization Overview
+
+Internationalization (i18n for short) is the process of enabling an application to adapt to different languages and regions. In LobeChat, we support multiple languages and achieve dynamic language switching and content localization through the `i18next` library. Our goal is to provide a localized experience for global users.
+
+## File Structure
+
+In the LobeChat project, internationalization-related files are organized as follows:
+
+- `src/locales/default`: Contains translation files for the default development language (Chinese), which we use as Chinese.
+- `locales`: Contains folders for all supported languages, with each language folder containing the respective translation files generated by lobe-i18n.
+
+In the directory structure of `src/locales`, the `default` folder contains the original translation files (Chinese), while each other language folder contains JSON translation files for the respective language. The files in each language folder correspond to the TypeScript files in the `default` folder, ensuring consistency in the structure of translation files across languages.
+
+```
+src/locales
+├── create.ts
+├── default
+│   ├── chat.ts
+│   ├── common.ts
+│   ├── error.ts
+│   ├── index.ts
+│   ├── market.ts
+│   ├── migration.ts
+│   ├── plugin.ts
+│   ├── setting.ts
+│   ├── tool.ts
+│   └── welcome.ts
+└── resources.ts
+```
+
+The file structure generated by lobe-i18n is as follows:
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── en-US
+├── ... (other language directories)
+├── zh-CN
+└── zh-TW
+```
+
+## Core Implementation Logic
+
+The internationalization core implementation logic of LobeChat is as follows:
+
+- Initialize and configure using the `i18next` library.
+- Automatically detect the user's language preference using `i18next-browser-languagedetector`.
+- Dynamically load translation resources using `i18next-resources-to-backend`.
+- Set the direction of the HTML document (LTR or RTL) based on the user's language preference.
+
+Here is a simplified pseudo code example to illustrate the core implementation logic of internationalization in LobeChat:
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// Create i18n instance and configure
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // Use language detection
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // Dynamically load translation resources for the corresponding language
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // Listen for language change events and dynamically set document direction
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // Set HTML document direction
+  });
+
+  // Initialize i18n instance
+  i18nInstance.init({
+    // Relevant configurations
+  });
+
+  return i18nInstance;
+};
+```
+
+In this example, we demonstrate how to use `i18next` and related plugins to initialize internationalization settings. We dynamically import translation resources and respond to language change events to adjust the text direction of the page. This process provides LobeChat with flexible multilingual support capabilities.
+
+## Adding Support for New Languages
+
+We have already supported a variety of languages globally through the following efforts:
+
+- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
+- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
+- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
+- [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
+- [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
+
+To add support for new languages, please refer to the detailed steps in the [New Locale Addition Guide](Add-New-Locale.en-US).
+
+## Resources and Further Reading
+
+- [i18next Official Documentation](https://www.i18next.com/)
+- [lobe-i18n Tool Description](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+By following this guide, you can better understand and participate in the internationalization work of LobeChat, providing a seamless multilingual experience for global users.

DigitalHumanWeb/contributing/Internationalization/Internationalization-Implementation.zh-CN.md

@@ -0,0 +1,125 @@
+# 国际化实现指南
+
+欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
+
+## TOC
+
+- [国际化概述](#国际化概述)
+- [文件结构](#文件结构)
+- [核心实现逻辑](#核心实现逻辑)
+- [添加新的语言支持](#添加新的语言支持)
+- [资源和进一步阅读](#资源和进一步阅读)
+
+## 国际化概述
+
+国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
+
+## 文件结构
+
+在 LobeChat 的项目中，国际化相关的文件被组织如下：
+
+- `src/locales/default`: 包含默认开发语言（中文）的翻译文件，我们作为中文。
+- `locales`: 包含所有支持的语言文件夹，每个语言文件夹中包含相应语言的翻译文件，这些翻译文件通过 lobe-i18n 自动生成。
+
+在 `src/locales` 这个目录结构中，`default` 文件夹包含了原始的翻译文件（中文），其他每个语言文件夹则包含了相应语言的 JSON 翻译文件。每个语言文件夹中的文件对应 `default` 文件夹中的 TypeScript 文件，确保了各语种之间的翻译文件结构一致性。
+
+```
+src/locales
+├── create.ts
+├── default
+│   ├── chat.ts
+│   ├── common.ts
+│   ├── error.ts
+│   ├── index.ts
+│   ├── market.ts
+│   ├── migration.ts
+│   ├── plugin.ts
+│   ├── setting.ts
+│   ├── tool.ts
+│   └── welcome.ts
+└── resources.ts
+```
+
+通过 lobe-i18n 自动生成的文件结构如下：
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── en-US
+├── ... (其他语种目录）
+├── zh-CN
+└── zh-TW
+```
+
+## 核心实现逻辑
+
+LobeChat 的国际化核心实现逻辑如下：
+
+- 使用 `i18next` 库进行初始化和配置。
+- 使用 `i18next-browser-languagedetector` 自动检测用户的语言偏好。
+- 使用 `i18next-resources-to-backend` 动态加载翻译资源。
+- 根据用户的语言偏好，设置 HTML 文档的方向（LTR 或 RTL）。
+
+以下是一个简化的伪代码示例，用以说明 LobeChat 国际化的核心实现逻辑：
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// 创建 i18n 实例并配置
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // 使用语言检测
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // 动态加载对应语言的翻译资源
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // 监听语言变化事件，动态设置文档方向
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // 设置 HTML 文档方向
+  });
+
+  // 初始化 i18n 实例
+  i18nInstance.init({
+    // 相关配置
+  });
+
+  return i18nInstance;
+};
+```
+
+在这个示例中，我们展示了如何使用 `i18next` 和相关插件来初始化国际化设置。我们动态导入了翻译资源，并响应语言变化事件来调整页面的文本方向。这个过程为 LobeChat 提供了灵活的多语言支持能力。
+
+## 添加新的语言支持
+
+我们通过以下工作，已经支持了全球多种语言：
+
+- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
+- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
+- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
+- [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
+- [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
+
+要添加新的语种支持， 详细步骤请参考：[新语种添加指南](Add-New-Locale.zh-CN.md)。
+
+## 资源和进一步阅读
+
+- [i18next 官方文档](https://www.i18next.com/)
+- [lobe-i18n 工具说明](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+通过遵循本指南，你可以更好地理解和参与到 LobeChat 的国际化工作中，为全球用户提供无缝的多语言体验。

DigitalHumanWeb/contributing/Others/Lighthouse.md

@@ -0,0 +1,65 @@
+# Lighthouse Reports
+
+#### TOC
+
+- [Welcome Page](#welcome-page)
+- [Chat Page](#chat-page)
+- [Market Page](#market-page)
+- [Settings Page](#settings-page)
+
+## Welcome Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/welcome>
+
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][welcome-desktop]               |              ![][welcome-mobile]               |
+| [⚡️ Lighthouse Report][welcome-desktop-report] | [⚡️ Lighthouse Report][welcome-mobile-report] |
+
+## Chat Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/chat>
+
+|                   Desktop                    |                   Mobile                    |
+| :------------------------------------------: | :-----------------------------------------: |
+|              ![][chat-desktop]               |              ![][chat-mobile]               |
+| [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
+
+## Market Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/market>
+
+|                    Desktop                     |                    Mobile                     |
+| :--------------------------------------------: | :-------------------------------------------: |
+|              ![][market-desktop]               |              ![][market-mobile]               |
+| [⚡️ Lighthouse Report][market-desktop-report] | [⚡️ Lighthouse Report][market-mobile-report] |
+
+## Settings Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/settings>
+
+|                     Desktop                      |                     Mobile                      |
+| :----------------------------------------------: | :---------------------------------------------: |
+|              ![][settings-desktop]               |              ![][settings-mobile]               |
+| [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
+
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
+[market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
+[settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
+[settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
+[welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
+[welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

DigitalHumanWeb/contributing/Others/Lighthouse.zh-CN.md

@@ -0,0 +1,65 @@
+# Lighthouse 测试报告
+
+#### TOC
+
+- [Welcome 欢迎页面](#welcome-欢迎页面)
+- [Chat 聊天页面](#chat-聊天页面)
+- [Market 市场页面](#market-市场页面)
+- [Settings 设置页面](#settings-设置页面)
+
+## Welcome 欢迎页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/welcome>
+
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][welcome-desktop]               |              ![][welcome-mobile]               |
+| [⚡️ Lighthouse Report][welcome-desktop-report] | [⚡️ Lighthouse Report][welcome-mobile-report] |
+
+## Chat 聊天页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/chat>
+
+|                   Desktop                    |                   Mobile                    |
+| :------------------------------------------: | :-----------------------------------------: |
+|              ![][chat-desktop]               |              ![][chat-mobile]               |
+| [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
+
+## Market 市场页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/market>
+
+|                    Desktop                     |                    Mobile                     |
+| :--------------------------------------------: | :-------------------------------------------: |
+|              ![][market-desktop]               |              ![][market-mobile]               |
+| [⚡️ Lighthouse Report][market-desktop-report] | [⚡️ Lighthouse Report][market-mobile-report] |
+
+## Settings 设置页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/settings>
+
+|                     Desktop                      |                     Mobile                      |
+| :----------------------------------------------: | :---------------------------------------------: |
+|              ![][settings-desktop]               |              ![][settings-mobile]               |
+| [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
+
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
+[market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
+[settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
+[settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
+[welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
+[welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

DigitalHumanWeb/contributing/State-Management/State-Management-Intro.md

@@ -0,0 +1,224 @@
+# Best Practices for State Management
+
+LobeChat differs from traditional CRUD web applications in that it involves a large amount of rich interactive capabilities. Therefore, it is crucial to design a data flow architecture that is easy to develop and maintain. This document will introduce the best practices for data flow management in LobeChat.
+
+## TOC
+
+- [Key Concepts](#key-concepts)
+- [Hierarchical Structure](#hierarchical-structure)
+  - [Best Practices for LobeChat SessionStore Directory Structure](#best-practices-for-lobechat-sessionstore-directory-structure)
+- [Implementation of SessionStore](#implementation-of-sessionstore)
+
+## Key Concepts
+
+| Concept  | Explanation                                                                                                                                                                                                                                                                                                                                                                      |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | The store contains the application's state and actions. It allows access to and modification of the state during application rendering.                                                                                                                                                                                                                                          |
+| state    | State refers to the data of the application, storing the current state of the application. Any change in the state will **trigger a re-rendering** to reflect the new state.                                                                                                                                                                                                     |
+| action   | An action is an operation function that describes the interactive events occurring in the application. Actions are typically triggered by user interactions, network requests, or timers. Actions can be **synchronous** or **asynchronous**.                                                                                                                                    |
+| reducer  | A reducer is a pure function that takes the current state and action as parameters and returns a new state. It is used to update the application's state based on the action type. A reducer is a pure function with no side effects, therefore it is always a **synchronous** function.                                                                                         |
+| selector | A selector is a function used to retrieve specific data from the application's state. It takes the application's state as a parameter and returns computed or transformed data. Selectors can combine parts of the state or multiple states to generate derived data. Selectors are commonly used to map the application's state to a component's props for the component's use. |
+| slice    | A slice is a concept used to express a part of the data model state. It specifies a state slice and its related state, action, reducer, and selector. Using slices, a large store can be divided into smaller, maintainable subtypes.                                                                                                                                            |
+
+## Hierarchical Structure
+
+The structure of the Store can vary greatly depending on the complexity:
+
+- **Low Complexity**: Generally includes 2 to 5 states and 3 to 4 actions. In this case, the structure usually consists of a `store.ts` and an `initialState.ts`.
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **Moderate Complexity**: Typically involves 5 to 15 states and 5 to 10 actions, with the possibility of selectors for derived states and reducers to simplify data changes. The structure usually includes a `store.ts`, an `initialState.ts`, and a `selectors.ts`/`reducer.ts`.
+
+```bash
+IconPicker/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+└── store.ts
+```
+
+```bash
+SortableList/store
+├── index.ts
+├── initialState.ts
+├── listDataReducer.ts
+└── store.ts
+```
+
+- **Medium Complexity**: Involves 15 to 30 states and 10 to 20 actions, often requiring the use of multiple slices to manage different actions. The following code represents the internal data flow of the `SortableTree` component:
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── crudSlice.ts
+│ ├── dndSlice.ts
+│ └── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- **High Complexity**: Involves over 30 states and 20 actions, requiring modular cohesion using slices. Each slice declares its own initState, actions, reducers, and selectors.
+
+The directory structure of the previous version of SessionStore for LobeChat, with high complexity, implements a large amount of business logic. However, with the modularization of slices and the fractal architecture, it is easy to find the corresponding modules, making it easy to maintain and iterate on new features.
+
+```bash
+LobeChat SessionStore
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── agentConfig
+│ │ ├── action.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ └── selectors.ts
+│ ├── chat
+│ │ ├── actions
+│ │ │ ├── index.ts
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ ├── reducers
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── selectors
+│ │ │ ├── chat.ts
+│ │ │ ├── index.ts
+│ │ │ ├── token.ts
+│ │ │ ├── topic.ts
+│ │ │ └── utils.ts
+│ │ └── utils.ts
+│ └── session
+│ ├── action.ts
+│ ├── index.ts
+│ ├── initialState.ts
+│ ├── reducers
+│ │ └── session.ts
+│ └── selectors
+│ ├── export.ts
+│ ├── index.ts
+│ └── list.ts
+└── store.ts
+```
+
+Based on the provided directory structure of LobeChat SessionStore, we can update the previous document and convert the examples to the implementation of LobeChat's SessionStore. The following is a portion of the updated document:
+
+### Best Practices for LobeChat SessionStore Directory Structure
+
+In the LobeChat application, session management is a complex functional module, so we use the Slice pattern to organize the data flow. Below is the directory structure of LobeChat SessionStore, where each directory and file has its specific purpose:
+
+```bash
+src/store/session
+├── helpers.ts                         # Helper functions
+├── hooks                              # Custom React hooks
+│   ├── index.ts                       # Export file for hooks
+│   ├── useEffectAfterHydrated.ts      # Hook for effects after session hydration
+│   ├── useOnFinishHydrationSession.ts # Hook for session hydration completion
+│   ├── useSessionChatInit.ts          # Hook for session chat initialization
+│   └── useSessionHydrated.ts          # Hook for session hydration status
+├── index.ts                           # Aggregated export file for SessionStore
+├── initialState.ts                    # Aggregated initialState for all slices
+├── selectors.ts                       # Selectors exported from various slices
+├── slices                             # Separated functional modules
+│   ├── agent                          # State and operations related to agents
+│   │   ├── action.ts                  # Action definitions related to agents
+│   │   ├── index.ts                   # Entry file for agent slice
+│   │   ├── selectors.test.ts          # Tests for agent-related selectors
+│   │   └── selectors.ts               # Selector definitions related to agents
+│   └── session                        # State and operations related to sessions
+│   ├── action.test.ts                 # Tests for session-related actions
+│   ├── action.ts                      # Action definitions related to sessions
+│   ├── helpers.ts                     # Helper functions related to sessions
+│   ├── initialState.ts                # Initial state for session slice
+│   └── selectors                      # Session-related selectors and their tests
+│   ├── export.ts                      # Aggregated export for session selectors
+│   ├── index.ts                       # Entry file for session selectors
+│   ├── list.test.ts                   # Tests for list selectors
+│   └── list.ts                        # Definitions for list-related selectors
+└── store.ts                           # Creation and usage of SessionStore
+```
+
+## Implementation of SessionStore
+
+In LobeChat, the SessionStore is designed as the core module for managing session state and logic. It consists of multiple Slices, with each Slice managing a relevant portion of state and logic. Below is a simplified example of the SessionStore implementation:
+
+#### store.ts
+
+```ts
+import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { SessionStoreState, initialState } from './initialState';
+import { AgentAction, createAgentSlice } from './slices/agent/action';
+import { SessionAction, createSessionSlice } from './slices/session/action';
+
+//  ===============  Aggregate createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  Implement useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+In this `store.ts` file, we create a `useSessionStore` hook that uses the `zustand` library to create a global state manager. We merge the initialState and the state and actions of each Slice to create a complete SessionStore.
+
+#### slices/session/action.ts
+
+```ts
+import { StateCreator } from 'zustand';
+
+import { SessionStore } from '@/store/session';
+
+export interface SessionActions {
+  /**
+   * A custom hook that uses SWR to fetch sessions data.
+   */
+  useFetchSessions: () => SWRResponse<any>;
+}
+
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  useFetchSessions: () => {
+    // ...logic for initializing sessions
+  },
+  // ...implementation of other actions
+});
+```
+
+In the `action.ts` file, we define a `SessionActions` interface to describe session-related actions and implement a `useFetchSessions` function to create these actions. Then, we merge these actions with the initial state to form the session-related Slice.
+
+Through this layered and modular approach, we can ensure that LobeChat's SessionStore is clear, maintainable, and easy to extend and test.

DigitalHumanWeb/contributing/State-Management/State-Management-Intro.zh-CN.md

@@ -0,0 +1,216 @@
+# 状态管理最佳实践
+
+LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
+
+## TOC
+
+- [概念要素](#概念要素)
+- [结构分层](#结构分层)
+  - [LobeChat SessionStore 目录结构最佳实践](#lobechat-sessionstore-目录结构最佳实践)
+- [SessionStore 的实现](#sessionstore-的实现)
+
+## 概念要素
+
+| 概念名词 | 解释                                                                                                                                                                                                                                                                 |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。                                                                                                                                                                                           |
+| state    | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。                                                                                                                                                  |
+| action   | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。                                                                                                         |
+| reducer  | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。                                                                              |
+| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
+| slice    | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。                                                            |
+
+## 结构分层
+
+在不同的复杂度下，我们可以将 Store 的结构组织可以由很大的不同：
+
+- **较低复杂度**：一般包含 2\~5 个 state 、3 \~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **一般复杂度** ：一般复杂度存在 5 \~ 15 个 state、 5 \~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `selectors.ts`/`reducer.ts`。
+
+```bash
+IconPicker/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+└── store.ts
+```
+
+```bash
+SortableList/store
+├── index.ts
+├── initialState.ts
+├── listDataReducer.ts
+└── store.ts
+```
+
+- **中等复杂度** ： 中等复杂度存在 15 \~ 30 个 state、 10 \~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。
+
+此时结构，用单一的 action store 已经较难维护，往往会拆解出来多个 slice 用于管理不同的 action。 下方的代码代表了 `SortableTree` 组件的内部数据流：
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+├── crudSlice.ts
+├── dndSlice.ts
+└── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- 高等复杂度：高等复杂度存在 30 个以上的 state、 20 个以上的 action。必然需要 slice 做模块化内聚。在每个 slice 中都各自声明了各自的 initState、 action、reducer 与 selector。
+
+下述这个数据流的目录结构是之前一版 SessionStore，具有很高的复杂度，实现了大量的业务逻辑。但借助于 slice 的模块化和分形架构的心智，我们可以很容易地找到对应的模块，新增功能与迭代都很易于维护。
+
+```bash
+LobeChat SessionStore
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── agentConfig
+│ │ ├── action.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ └── selectors.ts
+│ ├── chat
+│ │ ├── actions
+│ │ │ ├── index.ts
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ ├── reducers
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── selectors
+│ │ │ ├── chat.ts
+│ │ │ ├── index.ts
+│ │ │ ├── token.ts
+│ │ │ ├── topic.ts
+│ │ │ └── utils.ts
+│ │ └── utils.ts
+│ └── session
+│ ├── action.ts
+│ ├── index.ts
+│ ├── initialState.ts
+│ ├── reducers
+│ │ └── session.ts
+│ └── selectors
+│ ├── export.ts
+│ ├── index.ts
+│ └── list.ts
+└── store.ts
+```
+
+### LobeChat SessionStore 目录结构最佳实践
+
+在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 [slice 模式](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md) 来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
+
+```fish
+src/store/session
+├── index.ts                           # SessionStore 的聚合导出文件
+├── initialState.ts                    # 聚合了所有 slice 的 initialState
+├── selectors.ts                       # 从各个 slices 导出的 selector
+├── store.ts                           # SessionStore 的创建和使用
+├── helpers.ts                         # 辅助函数
+└── slices                             # 各个独立的功能切片
+    ├── agent                          # 助理 Slice
+    │   ├── action.ts
+    │   ├── index.ts
+    │   └── selectors.ts
+    └── session                        # 会话 Slice
+        ├── action.ts
+        ├── helpers.ts
+        ├── initialState.ts
+        └── selectors
+            ├── export.ts
+            ├── list.ts
+            └── index.ts
+
+```
+
+## SessionStore 的实现
+
+在 LobeChat 中，SessionStore 被设计为管理会话状态和逻辑的核心模块。它由多个 Slices 组成，每个 Slice 管理一部分相关的状态和逻辑。下面是一个简化的 SessionStore 的实现示例：
+
+#### store.ts
+
+```ts
+import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { SessionStoreState, initialState } from './initialState';
+import { AgentAction, createAgentSlice } from './slices/agent/action';
+import { SessionAction, createSessionSlice } from './slices/session/action';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  实装 useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+在这个 `store.ts` 文件中，我们创建了一个 `useSessionStore` 钩子，它使用 `zustand` 库来创建一个全局状态管理器。我们将 initialState 和每个 Slice 的状态和动作合并，以创建完整的 SessionStore。
+
+#### slices/session/action.ts
+
+```ts
+import { StateCreator } from 'zustand';
+
+import { SessionStore } from '@/store/session';
+
+export interface SessionActions {
+  /**
+   * A custom hook that uses SWR to fetch sessions data.
+   */
+  useFetchSessions: () => SWRResponse<any>;
+}
+
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  useFetchSessions: () => {
+    // ...初始化会话的逻辑
+  },
+  // ...其他动作的实现
+});
+```
+
+在 `action.ts` 文件中，我们定义了一个 `SessionActions` 接口来描述会话相关的动作，并且实现了一个 `useFetchSessions` 函数来创建这些动作。然后，我们将这些动作与初始状态合并，以形成会话相关的 Slice。
+
+通过这种结构分层和模块化的方法，我们可以确保 LobeChat 的 SessionStore 是清晰、可维护的，同时也便于扩展和测试。

DigitalHumanWeb/contributing/State-Management/State-Management-Selectors.md

@@ -0,0 +1,68 @@
+# Data Store Selector
+
+Selectors are data retrieval modules under the LobeChat data flow development framework. Their role is to extract data from the store using specific business logic for consumption by components.
+
+Taking `src/store/plugin/selectors.ts` as an example:
+
+This TypeScript code snippet defines an object named `pluginSelectors`, which contains a series of selector functions used to retrieve data from the plugin storage state. Selectors are functions that extract and derive data from a Redux store (or similar state management library). This specific example is for managing the state related to the frontend application's plugin system.
+
+Here are some key points to note:
+
+- `enabledSchema`: A function that returns an array of `ChatCompletionFunctions` filtered based on the enabled plugin list `enabledPlugins`. It appends the plugin identifier as a prefix to the API names to ensure uniqueness and uses the `uniqBy` function from the Lodash library to remove duplicates.
+- `onlinePluginStore`: Returns the current online plugin list.
+- `pluginList`: Returns the list of plugins, including custom plugins and standard plugins.
+- `getPluginMetaById`: Returns the plugin metadata based on the plugin ID.
+- `getDevPluginById`: Returns information about the custom plugins in development.
+- `getPluginManifestById`: Returns the plugin manifest based on the plugin ID.
+- `getPluginSettingsById`: Returns the plugin settings based on the plugin ID.
+- `getPluginManifestLoadingStatus`: Returns the loading status of the plugin manifest (loading, success, or error) based on the plugin ID.
+- `isCustomPlugin`: Checks if the plugin with the given ID is a custom plugin.
+- `displayPluginList`: Returns a processed plugin list, including author, avatar, creation time, description, homepage URL, identifier, and title.
+- `hasPluginUI`: Determines if the plugin has UI components based on the plugin ID.
+
+Selectors are highly modular and maintainable. By encapsulating complex state selection logic in separate functions, they make the code more concise and intuitive when accessing state data in other parts of the application. Additionally, by using TypeScript, each function can have clear input and output types, which helps improve code reliability and development efficiency.
+
+Taking the `displayPluginList` method as an example, its code is as follows:
+
+```ts
+const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
+
+const displayPluginList = (s: PluginStoreState) =>
+  pluginList(s).map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
+```
+
+- `pluginList` method: Used to retrieve the list of all plugins from the plugin state storage `PluginStoreState`. It creates a new plugin list by combining two arrays: `pluginList` and `customPluginList`.
+- `displayPluginList` method: Calls the `pluginList` method to retrieve the merged plugin list and transforms the `title` and `desc` into text displayed on the UI.
+
+In components, the final consumed data can be directly obtained by importing:
+
+```tsx | pure
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+
+const Render = ({ plugins }) => {
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+
+  return <> ... </>;
+};
+```
+
+The benefits of implementing this approach are:
+
+1. **Decoupling and reusability**: By separating selectors from components, we can reuse these selectors across multiple components without rewriting data retrieval logic. This reduces duplicate code, improves development efficiency, and makes the codebase cleaner and easier to maintain.
+2. **Performance optimization**: Selectors can be used to compute derived data, avoiding redundant calculations in each component. When the state changes, only the selectors dependent on that part of the state will recalculate, reducing unnecessary rendering and computation.
+3. **Ease of testing**: Selectors are pure functions, relying only on the passed parameters. This means they can be tested in an isolated environment without the need to simulate the entire store or component tree.
+4. **Type safety**: As LobeChat uses TypeScript, each selector has explicit input and output type definitions. This provides developers with the advantage of auto-completion and compile-time checks, reducing runtime errors.
+5. **Maintainability**: Selectors centralize the logic for reading state, making it more intuitive to track state changes and management. If the state structure changes, only the relevant selectors need to be updated, rather than searching and replacing in multiple places throughout the codebase.
+6. **Composability**: Selectors can be composed with other selectors to create more complex selection logic. This pattern allows developers to build a hierarchy of selectors, making state selection more flexible and powerful.
+7. **Simplified component logic**: Components do not need to know the structure of the state or how to retrieve and compute the required data. Components only need to call selectors to obtain the data needed for rendering, simplifying and clarifying component logic.
+
+With this design, LobeChat developers can focus more on building the user interface and business logic without worrying about the details of data retrieval and processing. This pattern also provides better adaptability and scalability for potential future changes in state structure.

DigitalHumanWeb/contributing/State-Management/State-Management-Selectors.zh-CN.md

@@ -0,0 +1,49 @@
+# 数据存储取数模块
+
+selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
+
+以 `src/store/tool/slices/plugin/selectors.ts` 为例：
+
+这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 zustand 中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
+
+下面是一些关键点的说明：
+
+- `getCustomPluginById`: 根据插件 ID 返回自定义插件信息。
+- `getInstalledPluginById`: 根据插件 ID 返回已安装插件的信息。
+- `getPluginManifestById`: 根据插件 ID 返回插件清单。
+- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
+- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
+- `installedCustomPluginMetaList`: 返回所有已安装的自定义插件的元数据列表。
+- `installedPluginManifestList`: 返回所有已安装插件的清单列表。
+- `installedPluginMetaList`: 返回所有已安装插件的元数据列表。
+- `installedPlugins`: 返回所有已安装插件的列表。
+- `isPluginHasUI`: 根据插件 ID 确定插件是否有 UI 组件。
+- `isPluginInstalled`: 根据插件 ID 检查插件是否已安装。
+- `storeAndInstallPluginsIdList`: 返回 store 中和已安装插件的所有 ID 列表。
+
+选择器通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
+
+在组件中，只需引入相应的选择器即可直接获取最终消费的数据：
+
+```tsx | pure
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const Render = () => {
+  const list = useToolStore(pluginSelectors.installedPluginMetaList);
+
+  return <> ... </>;
+};
+```
+
+这样实现的好处在于：
+
+1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
+2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
+3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
+4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
+5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
+6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
+7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
+
+通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。

DigitalHumanWeb/contributing/Upstream-Sync.md

@@ -0,0 +1,58 @@
+# Upstream Sync
+
+English | [简体中文](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN)
+
+## `A` Vercel / Zeabur Deployment
+
+If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates. We suggest you redeploy using the following steps:
+
+- Remove the original repository;
+- Use the <kbd>Fork</kbd> button at the top right corner of the page to fork this project;
+- Re-select and deploy on `Vercel`.
+
+## Enabling Automatic Updates
+
+> \[!NOTE]
+>
+> If you encounter an error executing Upstream Sync, manually Sync Fork once
+
+Once you have forked the project, due to Github restrictions, you will need to manually enable Workflows on the Actions page of your forked project and activate the Upstream Sync Action. Once enabled, you can set up hourly automatic updates.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)
+
+## `B` Docker Deployment
+
+Upgrading the Docker deployment version is very simple, just redeploy the latest image of LobeChat. Here are the instructions to perform these steps:
+
+1. Stop and delete the currently running LobeChat container (assuming the name of the LobeChat container is `lobe-chat`):
+
+```fish
+docker stop lobe-chat
+docker rm lobe-chat
+```
+
+2. Pull the latest Docker image of LobeChat:
+
+```fish
+docker pull lobehub/lobe-chat
+```
+
+3. Redeploy the LobeChat container using the newly pulled image:
+
+```fish
+docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+Make sure you have sufficient permissions to stop and delete the container before executing these commands, and Docker has sufficient permissions to pull the new image.
+
+> \[!NOTE]
+>
+> If I redeploy, will my local chat history be lost?
+>
+> Don't worry, all of LobeChat's chat history is stored in your local browser. Therefore, when you redeploy LobeChat using Docker, your chat history will not be lost.

DigitalHumanWeb/contributing/Upstream-Sync.zh-CN.md

@@ -0,0 +1,58 @@
+# 自部署保持更新
+
+[English](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync) | 简体中文
+
+## `A` Vercel / Zeabur 部署
+
+如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。我们建议按照以下步骤重新部署：
+
+- 删除原有的仓库；
+- 使用页面右上角的 <kbd>Fork</kbd> 按钮，Fork 本项目；
+- 在 `Vercel` 上重新选择并部署。
+
+### 启动自动更新
+
+> \[!NOTE]
+>
+> 如果你在执行 `Upstream Sync` 时遇到错误，请手动执再行一次
+
+当你 Fork 了项目后，由于 Github 的限制，你需要手动在你 Fork 的项目的 Actions 页面启用 Workflows，并启动 Upstream Sync Action。启用后，你可以设置每小时进行一次自动更新。
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)
+
+## `B` Docker 部署
+
+Docker 部署版本的升级非常简单，只需要重新部署 LobeChat 的最新镜像即可。 以下是执行这些步骤所需的指令：
+
+1. 停止并删除当前运行的 LobeChat 容器（假设 LobeChat 容器的名称是 `lobe-chat`）：
+
+```fish
+docker stop lobe-chat
+docker rm lobe-chat
+```
+
+2. 拉取 LobeChat 的最新 Docker 镜像：
+
+```fish
+docker pull lobehub/lobe-chat
+```
+
+3. 使用新拉取的镜像重新部署 LobeChat 容器：
+
+```fish
+docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+确保在执行这些命令之前，您有足够的权限来停止和删除容器，并且 Docker 有足够的权限来拉取新的镜像。
+
+> \[!NOTE]
+>
+> 重新部署的话，我本地的聊天记录会丢失吗？
+>
+> 放心，LobeChat 的聊天记录全部都存储在你的本地浏览器中。因此使用 Docker 重新部署 LobeChat 时，你的聊天记录并不会丢失。

DigitalHumanWeb/contributing/_Footer.md

@@ -0,0 +1 @@
+This is the **🤯 / 🤖 Lobe Chat** wiki. [Wiki Home](https://github.com/lobehub/lobe-chat/wiki)

DigitalHumanWeb/contributing/_Sidebar.md

@@ -0,0 +1,48 @@
+## Lobe Chat Contributing Wiki
+
+#### 🏠 Home
+
+- [TOC](Home.md) | [目录](Home.md)
+
+<!-- DOCS LIST -->
+
+#### 🤯 Basic
+
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
+- [Code Style and Contribution Guidelines](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines) | [代码风格与贡献指南](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines.zh-CN)
+- [Complete Guide to LobeChat Feature Development](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [LobeChat 功能开发完全指南](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [如何开发一个新功能：前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
+- [New Authentication Provider Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers) | [新身份验证方式开发指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers.zh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Intro) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Intro.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
+
+#### 🌎 Internationalization
+
+- [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
+- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+
+#### ⌨️ State Management
+
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors.zh-CN)
+
+#### 🤖 Agents
+
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+
+#### 🧩 Plugins
+
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [插件索引与提交](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [插件 SDK 文档](https://chat-plugin-sdk.lobehub.com)
+
+#### 📊 Others
+
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse) | [Lighthouse 测试报告](https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN)
+
+ <!-- DOCS LIST -->
+
+<!-- LINK GROUP -->

DigitalHumanWeb/docker-compose/local-logto/.env.example

@@ -0,0 +1,33 @@
+# Logto secret
+LOGTO_CLIENT_ID=
+LOGTO_CLIENT_SECRET=
+
+# MinIO S3 configuration
+MINIO_ROOT_USER=YOUR_MINIO_USER
+MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD
+
+# Configure the bucket information of MinIO
+MINIO_LOBE_BUCKET=lobe
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+
+# Proxy, if you need it
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+
+# Other environment variables, as needed. You can refer to the environment variables configuration for the client version, making sure not to have ACCESS_CODE.
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...
+
+
+# ----- Other config -----
+# if no special requirements, no need to change
+LOBE_PORT=3210
+LOGTO_PORT=3001
+MINIO_PORT=9000
+
+# Postgres related, which are the necessary environment variables for DB
+LOBE_DB_NAME=lobechat
+POSTGRES_PASSWORD=uWNZugjBqixf8dxC

DigitalHumanWeb/docker-compose/local-logto/.env.zh-CN.example

@@ -0,0 +1,33 @@
+# Logto secret
+LOGTO_CLIENT_ID=
+LOGTO_CLIENT_SECRET=
+
+# MinIO S3 配置
+MINIO_ROOT_USER=YOUR_MINIO_USER
+MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD
+
+# 在下方配置 minio 中添加的桶
+MINIO_LOBE_BUCKET=lobe
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+
+
+# Proxy，如果你需要的话（比如你使用 GitHub 作为鉴权服务提供商）
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+# 其他环境变量，视需求而定，可以参照客户端版本的环境变量配置，注意不要有 ACCESS_CODE
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...
+
+
+# ----- 相关配置 start -----
+# 如没有特殊需要不用更改
+LOBE_PORT=3210
+LOGTO_PORT=3001
+MINIO_PORT=9000
+
+# Postgres 相关，也即 DB 必须的环境变量
+LOBE_DB_NAME=lobechat
+POSTGRES_PASSWORD=uWNZugjBqixf8dxC

DigitalHumanWeb/docker-compose/local-logto/docker-compose.yml

@@ -0,0 +1,102 @@
+services:
+  network-service:
+    image: alpine
+    container_name: lobe-network
+    ports:
+      - '${MINIO_PORT}:${MINIO_PORT}'  # MinIO API
+      - '9001:9001'  # MinIO Console
+      - '${LOGTO_PORT}:${LOGTO_PORT}' # Logto
+      - '3002:3002'  # Logto Admin
+      - '${LOBE_PORT}:3210' # LobeChat
+    command: tail -f /dev/null
+    networks:
+      - lobe-network
+
+  postgresql:
+    image: pgvector/pgvector:pg16
+    container_name: lobe-postgres
+    ports:
+      - "5432:5432"
+    volumes:
+      - './data:/var/lib/postgresql/data'
+    environment:
+      - 'POSTGRES_DB=${LOBE_DB_NAME}'
+      - 'POSTGRES_PASSWORD=${POSTGRES_PASSWORD}'
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: always
+    networks:
+      - lobe-network
+
+  minio:
+    image: minio/minio
+    container_name: lobe-minio
+    network_mode: 'service:network-service'
+    volumes:
+      - './s3_data:/etc/minio/data'
+    environment:
+      - 'MINIO_ROOT_USER=${MINIO_ROOT_USER}'
+      - 'MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD}'
+      - 'MINIO_API_CORS_ALLOW_ORIGIN=http://localhost:${LOBE_PORT}'
+    restart: always
+    command: >
+      server /etc/minio/data --address ":${MINIO_PORT}" --console-address ":9001"
+
+  logto:
+    image: svhd/logto
+    container_name: lobe-logto
+    network_mode: 'service:network-service'
+    depends_on:
+      postgresql:
+        condition: service_healthy
+    environment:
+      - 'TRUST_PROXY_HEADER=1'
+      - 'PORT=${LOGTO_PORT}'
+      - 'DB_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgresql:5432/logto'
+      - 'ENDPOINT=http://localhost:${LOGTO_PORT}'
+      - 'ADMIN_ENDPOINT=http://localhost:3002'
+    entrypoint: ['sh', '-c', 'npm run cli db seed -- --swe && npm start']
+
+
+  lobe:
+    image: lobehub/lobe-chat-database
+    container_name: lobe-database
+    network_mode: 'service:network-service'
+    depends_on:
+      postgresql:
+        condition: service_healthy
+      network-service:
+        condition: service_started
+      minio:
+        condition: service_started
+      logto:
+        condition: service_started
+
+    environment:
+      - 'APP_URL=http://localhost:3210'
+      - 'NEXT_AUTH_SSO_PROVIDERS=logto'
+      - 'KEY_VAULTS_SECRET=Kix2wcUONd4CX51E/ZPAd36BqM4wzJgKjPtz2sGztqQ='
+      - 'NEXT_AUTH_SECRET=NX2kaPE923dt6BL2U8e9oSre5RfoT7hg'
+      - 'NEXTAUTH_URL=http://localhost:${LOBE_PORT}/api/auth'
+      - 'LOGTO_ISSUER=http://localhost:${LOGTO_PORT}/oidc'
+      - 'DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgresql:5432/${LOBE_DB_NAME}'
+      - 'S3_ENDPOINT=http://localhost:${MINIO_PORT}'
+      - 'S3_BUCKET=${MINIO_LOBE_BUCKET}'
+      - 'S3_PUBLIC_DOMAIN=http://localhost:${MINIO_PORT}'
+      - 'S3_ENABLE_PATH_STYLE=1'
+    env_file:
+      - .env
+    restart: always
+
+volumes:
+  data:
+    driver: local
+  s3_data:
+    driver: local
+
+networks:
+  lobe-network:
+    driver: bridge

DigitalHumanWeb/docker-compose/local/.env.example

@@ -0,0 +1,35 @@
+# Proxy, if you need it
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+
+# Other environment variables, as needed. You can refer to the environment variables configuration for the client version, making sure not to have ACCESS_CODE.
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...
+
+
+# ===========================
+# ====== Preset config ====== 
+# ===========================
+# if no special requirements, no need to change
+LOBE_PORT=3210
+CASDOOR_PORT=8000
+MINIO_PORT=9000
+
+# Postgres related, which are the necessary environment variables for DB
+LOBE_DB_NAME=lobechat
+POSTGRES_PASSWORD=uWNZugjBqixf8dxC
+
+# Casdoor secret
+AUTH_CASDOOR_ID=a387a4892ee19b1a2249
+AUTH_CASDOOR_SECRET=dbf205949d704de81b0b5b3603174e23fbecc354
+
+# MinIO S3 configuration
+MINIO_ROOT_USER=YOUR_MINIO_USER
+MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD
+
+# Configure the bucket information of MinIO
+MINIO_LOBE_BUCKET=lobe
+S3_ACCESS_KEY_ID=soaucnP8Bip0TDdUjxng
+S3_SECRET_ACCESS_KEY=ZPUzvY34umfcfxvWKSv0P00vczVMB6YmgJS5J9eO

DigitalHumanWeb/docker-compose/local/.env.zh-CN.example

@@ -0,0 +1,36 @@
+# Proxy，如果你需要的话（比如你使用 GitHub 作为鉴权服务提供商）
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+
+# 其他环境变量，视需求而定，可以参照客户端版本的环境变量配置，注意不要有 ACCESS_CODE
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...
+
+
+# ===================
+# ===== 预设配置 =====
+# ===================
+# 如没有特殊需要不用更改
+LOBE_PORT=3210
+CASDOOR_PORT=8000
+MINIO_PORT=9000
+
+# Postgres 相关，也即 DB 必须的环境变量
+LOBE_DB_NAME=lobechat
+POSTGRES_PASSWORD=uWNZugjBqixf8dxC
+
+# Casdoor secret
+AUTH_CASDOOR_ID=a387a4892ee19b1a2249
+AUTH_CASDOOR_SECRET=dbf205949d704de81b0b5b3603174e23fbecc354
+
+# MinIO S3 配置
+MINIO_ROOT_USER=YOUR_MINIO_USER
+MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD
+
+# 在下方配置 minio 中添加的桶
+MINIO_LOBE_BUCKET=lobe
+S3_ACCESS_KEY_ID=soaucnP8Bip0TDdUjxng
+S3_SECRET_ACCESS_KEY=ZPUzvY34umfcfxvWKSv0P00vczVMB6YmgJS5J9eO
+

DigitalHumanWeb/docker-compose/local/docker-compose.yml

@@ -0,0 +1,103 @@
+services:
+  network-service:
+    image: alpine
+    container_name: lobe-network
+    ports:
+      - '${MINIO_PORT}:${MINIO_PORT}'  # MinIO API
+      - '9001:9001'  # MinIO Console
+      - '${CASDOOR_PORT}:${CASDOOR_PORT}' # Casdoor
+      - '${LOBE_PORT}:3210' # LobeChat
+    command: tail -f /dev/null
+    networks:
+      - lobe-network
+
+  postgresql:
+    image: pgvector/pgvector:pg16
+    container_name: lobe-postgres
+    ports:
+      - "5432:5432"
+    volumes:
+      - './data:/var/lib/postgresql/data'
+    environment:
+      - 'POSTGRES_DB=${LOBE_DB_NAME}'
+      - 'POSTGRES_PASSWORD=${POSTGRES_PASSWORD}'
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: always
+    networks:
+      - lobe-network
+
+  minio:
+    image: minio/minio
+    container_name: lobe-minio
+    network_mode: 'service:network-service'
+    volumes:
+      - './s3_data:/etc/minio/data'
+    environment:
+      - 'MINIO_ROOT_USER=${MINIO_ROOT_USER}'
+      - 'MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD}'
+      - 'MINIO_API_CORS_ALLOW_ORIGIN=http://localhost:${LOBE_PORT}'
+    restart: always
+    command: >
+      server /etc/minio/data --address ":${MINIO_PORT}" --console-address ":9001"
+
+  casdoor:
+    image: casbin/casdoor
+    container_name: lobe-casdoor
+    entrypoint: /bin/sh -c './server --createDatabase=true'
+    network_mode: 'service:network-service'
+    depends_on:
+      postgresql:
+        condition: service_healthy
+    environment:
+      RUNNING_IN_DOCKER: "true"
+      driverName: "postgres"
+      dataSourceName: "user=postgres password=${POSTGRES_PASSWORD} host=postgresql port=5432 sslmode=disable dbname=casdoor"
+      origin: "http://localhost:${CASDOOR_PORT}"
+      runmode: "dev"
+    volumes:
+      - ./init_data.json:/init_data.json
+
+  lobe:
+    image: lobehub/lobe-chat-database
+    container_name: lobe-database
+    network_mode: 'service:network-service'
+    depends_on:
+      postgresql:
+        condition: service_healthy
+      network-service:
+        condition: service_started
+      minio:
+        condition: service_started
+      casdoor:
+        condition: service_started
+
+    environment:
+      - 'APP_URL=http://localhost:3210'
+      - 'NEXT_AUTH_SSO_PROVIDERS=casdoor'
+      - 'KEY_VAULTS_SECRET=Kix2wcUONd4CX51E/ZPAd36BqM4wzJgKjPtz2sGztqQ='
+      - 'NEXT_AUTH_SECRET=NX2kaPE923dt6BL2U8e9oSre5RfoT7hg'
+      - 'AUTH_URL=http://localhost:${LOBE_PORT}/api/auth'
+      - 'AUTH_CASDOOR_ISSUER=http://localhost:${CASDOOR_PORT}'
+      - 'DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgresql:5432/${LOBE_DB_NAME}'
+      - 'S3_ENDPOINT=http://localhost:${MINIO_PORT}'
+      - 'S3_BUCKET=${MINIO_LOBE_BUCKET}'
+      - 'S3_PUBLIC_DOMAIN=http://localhost:${MINIO_PORT}'
+      - 'S3_ENABLE_PATH_STYLE=1'
+      - 'LLM_VISION_IMAGE_USE_BASE64=1'
+    env_file:
+      - .env
+    restart: always
+
+volumes:
+  data:
+    driver: local
+  s3_data:
+    driver: local
+
+networks:
+  lobe-network:
+    driver: bridge

DigitalHumanWeb/docker-compose/local/setup.sh

@@ -0,0 +1,242 @@
+#!/bin/bash
+
+# ==================
+# == Env settings ==
+# ==================
+
+# ======================
+# == Process the args ==
+# ======================
+
+# 1. Default values of arguments
+# Arg: -f 
+# Determine force download asserts, default is not
+FORCE_DOWNLOAD=false
+
+# Arg: -l or --lang
+# Determine the language to show, default is en
+LANGUAGE="en_US"
+
+# Arg: --url
+# Determine the source URL to download files
+SOURCE_URL="https://raw.githubusercontent.com/lobehub/lobe-chat/main"
+
+# 2. Parse script arguments
+while getopts "fl:-:" opt; do
+  case $opt in
+    f)
+      FORCE_DOWNLOAD=true
+      ;;
+    l)
+      LANGUAGE=$OPTARG
+      ;;
+    -)
+      case "${OPTARG}" in
+        lang)
+          LANGUAGE="${!OPTIND}"; OPTIND=$(( $OPTIND + 1 ))
+          ;;
+        url)
+          SOURCE_URL="${!OPTIND}"; OPTIND=$(( $OPTIND + 1 ))
+          ;;
+        *)
+          echo "Usage: $0 [-f] [-l language|--lang language] [--url source]" >&2
+          exit 1
+          ;;
+      esac
+      ;;
+    *)
+      echo "Usage: $0 [-f] [-l language|--lang language] [--url source]" >&2
+      exit 1
+      ;;
+  esac
+done
+
+
+# ===============
+# == Variables ==
+# ===============
+# File list
+SUB_DIR="docker-compose/local"
+FILES=(
+  "$SUB_DIR/docker-compose.yml"
+  "$SUB_DIR/.env.example"
+  "$SUB_DIR/init_data.json.tar.gz"
+  "$SUB_DIR/s3_data.tar.gz"
+)
+
+# Supported languages and messages
+# Arg: -l --lang
+# If the language is not supported, default to English
+# Function to show messages
+show_message() {
+  local key="$1"
+  case $key in
+    downloading)
+      case $LANGUAGE in
+        zh_CN)
+          echo "正在下载文件..."
+          ;;
+        *)
+          echo "Downloading files..."
+          ;;
+      esac
+      ;;
+    downloaded)
+      case $LANGUAGE in
+        zh_CN)
+          echo " 已经存在，跳过下载。"
+          ;;
+        *)
+          echo " already exists, skipping download."
+          ;;
+      esac
+      ;;
+    extracted_success)
+      case $LANGUAGE in
+        zh_CN)
+          echo " 解压成功到目录："
+          ;;
+        *)
+          echo " extracted successfully to directory: "
+          ;;
+      esac
+      ;;
+    extracted_failed)
+      case $LANGUAGE in
+        zh_CN)
+          echo " 解压失败。"
+          ;;
+        *)
+          echo " extraction failed."
+          ;;
+      esac
+      ;;
+    file_not_exists)
+      case $LANGUAGE in
+        zh_CN)
+          echo " 不存在。"
+          ;;
+        *)
+          echo " does not exist."
+          ;;
+      esac
+      ;;
+    tips_run_command)
+      case $LANGUAGE in
+        zh_CN)
+          echo "您已经完成了所有配置文件的下载。请运行以下命令启动LobeChat："
+          ;;
+        *)
+          echo "You have completed downloading all configuration files. Please run this command to start LobeChat:"
+          ;;
+      esac
+      ;;
+    tips_show_documentation)
+      case $LANGUAGE in
+        zh_CN)
+          echo "完整的环境变量在'.env'中可以在文档中找到："
+          ;;
+        *)
+          echo "Full environment variables in the '.env' can be found at the documentation on "
+          ;;
+      esac
+      ;;
+    tips_show_documentation_url)
+      case $LANGUAGE in
+        zh_CN)
+          echo "https://lobehub.com/zh/docs/self-hosting/environment-variables"
+          ;;
+        *)
+          echo "https://lobehub.com/docs/self-hosting/environment-variables"
+          ;;
+      esac
+      ;;
+    tips_warning)
+      case $LANGUAGE in
+        zh_CN)
+          echo "警告：不要在生产环境中使用此演示应用程序！！！"
+          ;;
+        *)
+          echo "Warning: do not use this demo application in production!!!"
+          ;;
+      esac
+      ;;
+    esac
+}
+
+# Function to download files
+download_file() {
+  local file_url="$1"
+  local local_file="$2"
+
+  if [ "$FORCE_DOWNLOAD" = false ] && [ -e "$local_file" ]; then
+    echo "$local_file" $(show_message "downloaded")
+    return 0
+  fi
+
+  wget -q --show-progress "$file_url" -O "$local_file"
+}
+
+extract_file() {
+  local file_name=$1
+  local target_dir=$2
+
+  if [ -e "$file_name" ]; then
+    tar -zxvf "$file_name" -C "$target_dir" > /dev/null 2>&1
+    if [ $? -eq 0 ]; then
+      echo "$file_name" $(show_message "extracted_success") "$target_dir"
+    else
+      echo "$file_name" $(show_message "extracted_failed") 
+      exit 1
+    fi
+  else
+    echo "$file_name" $(show_message "file_not_exists")
+    exit 1
+  fi
+}
+
+# Define colors
+declare -A colors
+colors=(
+    [black]="\e[30m"
+    [red]="\e[31m"
+    [green]="\e[32m"
+    [yellow]="\e[33m"
+    [blue]="\e[34m"
+    [magenta]="\e[35m"
+    [cyan]="\e[36m"
+    [white]="\e[37m"
+    [reset]="\e[0m"
+)
+
+print_centered() {
+    local text="$1"  # Get input texts
+    local color="${2:-reset}"  # Get color, default to reset
+    local term_width=$(tput cols)  # Get terminal width
+    local text_length=${#text}  # Get text length
+    local padding=$(( (term_width - text_length) / 2 ))  # Get padding
+    # Check if the color is valid
+    if [[ -z "${colors[$color]}" ]]; then
+        echo "Invalid color specified. Available colors: ${!colors[@]}"
+        return 1
+    fi
+    # Print the text with padding
+    printf "%*s${colors[$color]}%s${colors[reset]}\n" $padding "" "$text"
+}
+
+# Download files asynchronously
+download_file "$SOURCE_URL/${FILES[0]}" "docker-compose.yml"
+download_file "$SOURCE_URL/${FILES[1]}" ".env"
+download_file "$SOURCE_URL/${FILES[2]}" "init_data.json.tar.gz"
+download_file "$SOURCE_URL/${FILES[3]}" "s3_data.tar.gz"
+
+# Extract .tar.gz file without output
+extract_file "s3_data.tar.gz" "."
+extract_file "init_data.json.tar.gz" "."
+
+# Display final message
+printf "\n%s\n\n" "$(show_message "tips_run_command")"
+print_centered "docker compose up -d" "green"
+printf "\n%s" "$(show_message "tips_show_documentation")"
+printf "%s\n" $(show_message "tips_show_documentation_url")
+printf "\n\e[33m%s\e[0m\n" "$(show_message "tips_warning")"

DigitalHumanWeb/docker-compose/minio-bucket.config.json

@@ -0,0 +1,34 @@
+{
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Principal": {
+        "AWS": ["*"]
+      },
+      "Action": ["s3:GetBucketLocation"],
+      "Resource": ["arn:aws:s3:::lobe"]
+    },
+    {
+      "Effect": "Allow",
+      "Principal": {
+        "AWS": ["*"]
+      },
+      "Action": ["s3:ListBucket"],
+      "Resource": ["arn:aws:s3:::lobe"],
+      "Condition": {
+        "StringEquals": {
+          "s3:prefix": ["files/*"]
+        }
+      }
+    },
+    {
+      "Effect": "Allow",
+      "Principal": {
+        "AWS": ["*"]
+      },
+      "Action": ["s3:PutObject", "s3:DeleteObject", "s3:GetObject"],
+      "Resource": ["arn:aws:s3:::lobe/files/**"]
+    }
+  ],
+  "Version": "2012-10-17"
+}

DigitalHumanWeb/docker-compose/production/.env.example

@@ -0,0 +1,56 @@
+# Required: LobeChat domain for tRPC calls
+# Ensure this domain is whitelisted in your NextAuth providers and S3 service CORS settings
+APP_URL=https://lobe.example.com/
+
+# Postgres related environment variables
+# Required: Secret key for encrypting sensitive information. Generate with: openssl rand -base64 32
+KEY_VAULTS_SECRET=Kix2wcUONd4CX51E/ZPAd36BqM4wzJgKjPtz2sGztqQ=
+# Required: Postgres database connection string
+# Format: postgresql://username:password@host:port/dbname
+# If using Docker, you can use the container name as the host
+DATABASE_URL=postgresql://postgres:uWNZugjBqixf8dxC@postgresql:5432/lobe
+
+# NEXT_AUTH related environment variables
+# Supports auth0, Azure AD, GitHub, Authentik, Zitadel, Logto, etc.
+# For supported providers, see: https://lobehub.com/docs/self-hosting/advanced/auth#next-auth
+# If you have ACCESS_CODE, please remove it. We use NEXT_AUTH as the sole authentication source
+# Required: NextAuth secret key. Generate with: openssl rand -base64 32
+NEXT_AUTH_SECRET=NX2kaPE923dt6BL2U8e9oSre5RfoT7hg
+# Required: Specify the authentication provider (e.g., Logto)
+NEXT_AUTH_SSO_PROVIDERS=logto
+# Required: NextAuth URL for callbacks
+NEXTAUTH_URL=https://lobe.example.com/api/auth
+
+# NextAuth providers configuration (example using Logto)
+# For other providers, see: https://lobehub.com/docs/self-hosting/environment-variables/auth
+LOGTO_CLIENT_ID=YOUR_LOGTO_CLIENT_ID
+LOGTO_CLIENT_SECRET=YOUR_LOGTO_CLIENT_SECRET
+LOGTO_ISSUER=https://lobe-auth-api.example.com/oidc
+
+# Proxy settings (if needed, e.g., when using GitHub as an auth provider)
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+# S3 related environment variables (example using MinIO)
+# Required: S3 Access Key ID (for MinIO, invalid until manually created in MinIO UI)
+S3_ACCESS_KEY_ID=YOUR_S3_ACCESS_KEY_ID
+# Required: S3 Secret Access Key (for MinIO, invalid until manually created in MinIO UI)
+S3_SECRET_ACCESS_KEY=YOUR_S3_SECRET_ACCESS_KEY
+# Required: S3 Endpoint for server/client connections to S3 API
+S3_ENDPOINT=https://lobe-s3-api.example.com
+# Required: S3 Bucket (invalid until manually created in MinIO UI)
+S3_BUCKET=lobe
+# Required: S3 Public Domain for client access to unstructured data
+S3_PUBLIC_DOMAIN=https://lobe-s3-api.example.com
+# Optional: S3 Enable Path Style
+# Use 0 for mainstream S3 cloud providers; use 1 for self-hosted MinIO
+# See: https://lobehub.com/docs/self-hosting/advanced/s3#s-3-enable-path-style
+S3_ENABLE_PATH_STYLE=1
+
+# Other basic environment variables (as needed)
+# See: https://lobehub.com/docs/self-hosting/environment-variables/basic
+# Note: For server versions, the API must support embedding models (OpenAI text-embedding-3-small) for file processing
+# You don't need to specify this model in OPENAI_MODEL_LIST
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...

DigitalHumanWeb/docker-compose/production/.env.zh-CN.example

@@ -0,0 +1,55 @@
+# 必填，LobeChat 域名，用于 tRPC 调用
+# 请保证此域名在你的 NextAuth 鉴权服务提供商、S3 服务商的 CORS 白名单中
+APP_URL=https://lobe.example.com/
+
+# Postgres 相关，也即 DB 必需的环境变量
+# 必填，用于加密敏感信息的密钥，可以使用 openssl rand -base64 32 生成
+KEY_VAULTS_SECRET=Kix2wcUONd4CX51E/ZPAd36BqM4wzJgKjPtz2sGztqQ=
+# 必填，Postgres 数据库连接字符串，用于连接到数据库
+# 格式：postgresql://username:password@host:port/dbname，如果你的 pg 实例为 Docker 容器且位于同一 docker-compose 文件中，亦可使用容器名作为 host
+DATABASE_URL=postgresql://postgres:uWNZugjBqixf8dxC@postgresql:5432/lobe
+
+# NEXT_AUTH 相关，也即鉴权服务必需的环境变量
+# 可以使用 auth0、Azure AD、GitHub、Authentik、Zitadel、Logto 等，如有其他接入诉求欢迎提 PR
+# 目前支持的鉴权服务提供商请参考：https://lobehub.com/zh/docs/self-hosting/advanced/auth#next-auth
+# 如果你有 ACCESS_CODE，请务必清空，我们以 NEXT_AUTH 作为唯一鉴权来源
+# 必填，用于 NextAuth 的密钥，可以使用 openssl rand -base64 32 生成
+NEXT_AUTH_SECRET=NX2kaPE923dt6BL2U8e9oSre5RfoT7hg
+# 必填，指定鉴权服务提供商，这里以 Logto 为例
+NEXT_AUTH_SSO_PROVIDERS=logto
+# 必填，NextAuth 的 URL，用于 NextAuth 的回调
+NEXTAUTH_URL=https://lobe.example.com/api/auth
+
+# NextAuth 鉴权服务提供商部分，以 Logto 为例
+# 其他鉴权服务提供商所需的环境变量，请参考：https://lobehub.com/zh/docs/self-hosting/environment-variables/auth
+LOGTO_CLIENT_ID=YOUR_LOGTO_CLIENT_ID
+LOGTO_CLIENT_SECRET=YOUR_LOGTO_CLIENT_SECRET
+LOGTO_ISSUER=https://lobe-auth-api.example.com/oidc
+
+# 代理相关，如果你需要的话（比如你使用 GitHub 作为鉴权服务提供商）
+# HTTP_PROXY=http://localhost:7890
+# HTTPS_PROXY=http://localhost:7890
+
+# S3 相关，也即非结构化数据（文件、图片等）存储必需的环境变量
+# 这里以 MinIO 为例
+# 必填，S3 的 Access Key ID，对于 MinIO 来说，直到在 MinIO UI 中手动创建之前都是无效的
+S3_ACCESS_KEY_ID=YOUR_S3_ACCESS_KEY_ID
+# 必填，S3 的 Secret Access Key，对于 MinIO 来说，直到在 MinIO UI 中手动创建之前都是无效的
+S3_SECRET_ACCESS_KEY=YOUR_S3_SECRET_ACCESS_KEY
+# 必填，S3 的 Endpoint，用于服务端/客户端连接到 S3 API
+S3_ENDPOINT=https://lobe-s3-api.example.com
+# 必填，S3 的 Bucket，直到在 MinIO UI 中手动创建之前都是无效的
+S3_BUCKET=lobe
+# 必填，S3 的 Public Domain，用于客户端通过公开连接访问非结构化数据
+S3_PUBLIC_DOMAIN=https://lobe-s3-api.example.com
+# 选填，S3 的 Enable Path Style
+# 对于主流 S3 Cloud 服务商，一般填 0 即可；对于自部署的 MinIO，请填 1
+# 请参考：https://lobehub.com/zh/docs/self-hosting/advanced/s3#s-3-enable-path-style
+S3_ENABLE_PATH_STYLE=1
+
+# 其他基础环境变量，视需求而定。注意不要有 ACCESS_CODE
+# 请参考：https://lobehub.com/zh/docs/self-hosting/environment-variables/basic
+# 请注意，对于服务端版本，其 API 必须支持嵌入（即 OpenAI text-embedding-3-small）模型，否则无法对上传文件进行处理，但你无需在 OPENAI_MODEL_LIST 中指定此模型
+# OPENAI_API_KEY=sk-xxxx
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+# OPENAI_MODEL_LIST=...

DigitalHumanWeb/docker-compose/production/docker-compose.yml

@@ -0,0 +1,70 @@
+services:
+  postgresql:
+    image: pgvector/pgvector:pg16
+    container_name: lobe-postgres
+    ports:
+      - '5432:5432'
+    volumes:
+      - './data:/var/lib/postgresql/data'
+    environment:
+      - 'POSTGRES_DB=lobe'
+      - 'POSTGRES_PASSWORD=uWNZugjBqixf8dxC'
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: always
+
+  minio:
+    image: minio/minio
+    container_name: lobe-minio
+    ports:
+      - '9000:9000'
+      - '9001:9001'
+    volumes:
+      - './s3_data:/etc/minio/data'
+    environment:
+      - 'MINIO_ROOT_USER=YOUR_MINIO_USER'
+      - 'MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD'
+      - 'MINIO_DOMAIN=lobe-s3-api.example.com'
+      - 'MINIO_API_CORS_ALLOW_ORIGIN=https://lobe.example.com' # Your LobeChat's domain name.
+    restart: always
+    command: >
+      server /etc/minio/data --address ":9000" --console-address ":9001"
+
+
+  logto:
+    image: svhd/logto
+    container_name: lobe-logto
+    ports:
+      - '3001:3001'
+      - '3002:3002'
+    depends_on:
+      postgresql:
+        condition: service_healthy
+    environment:
+      - 'TRUST_PROXY_HEADER=1'
+      - 'DB_URL=postgresql://postgres:uWNZugjBqixf8dxC@postgresql:5432/logto'
+      - 'ENDPOINT=https://lobe-auth-api.example.com'
+      - 'ADMIN_ENDPOINT=https://lobe-auth-ui.example.com'
+    entrypoint: ['sh', '-c', 'npm run cli db seed -- --swe && npm start']
+
+  lobe:
+    image: lobehub/lobe-chat-database
+    container_name: lobe-database
+    ports:
+      - '3210:3210'
+    depends_on:
+      - postgresql
+      - minio
+      - logto
+    env_file:
+      - .env
+    restart: always
+
+volumes:
+  data:
+    driver: local
+  s3_data:
+    driver: local

DigitalHumanWeb/docs/self-hosting/advanced/analytics.mdx

@@ -0,0 +1,31 @@
+---
+title: Integrating Data Analytics Services in LobeChat for User Usage Analysis
+description: >-
+  Learn how to integrate free/open-source data analytics services in LobeChat to
+  collect user usage data efficiently.
+tags:
+  - LobeChat
+  - data analytics
+  - user usage analysis
+  - Vercel Analytics
+  - web analytics
+---
+
+# Data Analysis
+
+To better help analyze the usage of LobeChat users, we have integrated several free/open-source data analytics services in LobeChat for collecting user usage data, which you can enable as needed.
+
+<Callout type={'warning'}>
+  Currently, the integrated data analytics platforms only support deployment and usage on
+  Vercel/Zeit platforms and do not support Docker/Docker Compose deployment.
+</Callout>
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) is a data analytics service launched by Vercel, which can help you collect website visit data, including traffic, sources, and devices used for access.
+
+We have integrated Vercel Analytics into the code, and you can enable it by setting the environment variable `ENABLE_VERCEL_ANALYTICS=1`, and then open the Analytics tab in your Vercel deployment project to view your app's visit data.
+
+Vercel Analytics provides 2500 free Web Analytics Events per month (which can be understood as page views), which is generally sufficient for personal deployment and self-use products.
+
+If you need to learn more about using Vercel Analytics, please refer to the [Vercel Web Analytics Quick Start](https://vercel.com/docs/analytics/quickstart).

DigitalHumanWeb/docs/self-hosting/advanced/analytics.zh-CN.mdx

@@ -0,0 +1,28 @@
+---
+title: LobeChat 数据分析集成服务介绍
+description: 了解如何在 LobeChat 中集成免费/开源的数据统计服务，帮助分析用户使用情况。包括 Vercel Analytics 的设置和使用教程。
+tags:
+  - LobeChat
+  - 数据分析
+  - Vercel Analytics
+  - 数据统计服务
+  - 用户使用情况
+---
+
+# 数据分析
+
+为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
+
+<Callout type={'warning'}>
+  目前集成的数据分析平台，均只支持 Vercel / Zeabur 平台部署使用，不支持 Docker/Docker Compose 部署
+</Callout>
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) 是 Vercel 推出的一款数据分析服务，它可以帮助你收集网站的访问情况，包括访问量、访问来源、访问设备等等。
+
+我们在代码中集成了 Vercel Analytics，你可以通过设置环境变量 `ENABLE_VERCEL_ANALYTICS=1` 来开启它，并打开 Vercel 部署项目中 Analytics tab 查看你的应用访问情况。
+
+Vercel Analytics 提供了 2500 次 / 月的免费 Web Analytics Events (可以理解为 PV)，对于个人部署自用的产品来说基本够用。
+
+如果你需要了解 Vercel Analytics 的详细使用教程，请查阅 [Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)

DigitalHumanWeb/docs/self-hosting/advanced/auth.mdx

@@ -0,0 +1,73 @@
+---
+title: LobeChat Authentication Service Configuration
+description: >-
+  Learn how to configure external authentication services using Clerk or Next
+  Auth for centralized user authorization management. Supported authentication
+  services include Auth0, Azure ID, etc.
+tags:
+  - Authentication Service
+  - Next Auth
+  - SSO
+  - Clerk
+---
+
+# Authentication Service
+
+LobeChat supports the configuration of external authentication services using Clerk or Next Auth for internal use within enterprises/organizations to centrally manage user authorization.
+
+## Clerk
+
+Clerk is a comprehensive identity verification solution that has recently gained popularity. It provides a simple yet powerful API and services to handle user authentication and session management. Clerk's design philosophy is to offer a concise and modern authentication solution that enables developers to easily integrate and use it.
+
+LobeChat has deeply integrated with Clerk to provide users with a more secure and convenient login and registration experience. It also relieves developers from the burden of managing authentication logic. Clerk's concise and modern design philosophy aligns perfectly with LobeChat's goals, making user management on the entire platform more efficient and reliable.
+
+By setting the environment variables `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` in LobeChat's environment, you can enable and use Clerk.
+
+## Next Auth
+
+Before using NextAuth, please set the following variables in LobeChat's environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | The key used to encrypt Auth.js session tokens. You can use the following command: `openssl rand -base64 32`, or visit `https://generate-secret.vercel.app/32` to generate the key. |
+| `NEXTAUTH_URL` | Required | This URL specifies the callback address for Auth.js when performing OAuth verification. Set this only if the default generated redirect address is incorrect. `https://example.com/api/auth` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Optional | This environment variable is used to enable multiple identity verification sources simultaneously, separated by commas, for example, `auth0,azure-ad,authentik`. |
+
+Currently supported identity verification services include:
+
+<Cards>
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/auth0'} title={'Auth0'} />
+  <Card
+    href={'/docs/self-hosting/advanced/auth/next-auth/microsoft-entra-id'}
+    title={'Microsoft Entra ID'}
+  />
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/authentik'} title={'Authentik'} />
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/github'} title={'Github'} />
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/zitadel'} title={'ZITADEL'} />
+  <Card
+    href={'/docs/self-hosting/advanced/auth/next-auth/cloudflare-zero-trust'}
+    title={'Cloudflare Zero Trust'}
+  />
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/authelia'} title={'Authelia'} />
+  <Card href={'/docs/self-hosting/advanced/auth/next-auth/logto'} title={'Logto'} />
+</Cards>
+
+Click on the links to view the corresponding platform's configuration documentation.
+
+## Advanced Configuration
+
+To simultaneously enable multiple identity verification sources, please set the `NEXT_AUTH_SSO_PROVIDERS` environment variable, separating them with commas, for example, `auth0,azure-ad,authentik`.
+
+The order corresponds to the display order of the SSO providers.
+
+| SSO Provider       | Value       |
+| ------------------ | ----------- |
+| Auth0              | `auth0`     |
+| Microsoft Entra ID | `azure-ad`  |
+| Authentik          | `authentik` |
+| Github             | `github`    |
+| ZITADEL            | `zitadel`   |
+
+## Other SSO Providers
+
+Please refer to the [NextAuth.js](https://next-auth.js.org/providers) documentation and feel free to submit a Pull Request.

DigitalHumanWeb/docs/self-hosting/advanced/auth.zh-CN.mdx

@@ -0,0 +1,70 @@
+---
+title: LobeChat 身份验证服务配置
+description: 了解如何使用 Clerk 或 Next Auth 配置外部身份验证服务，以统一管理用户授权。支持的身份验证服务包括 Auth0、 Azure ID 等。
+tags:
+  - 身份验证服务
+  - LobeChat
+  - SSO
+  - Clerk
+---
+
+# 身份验证服务
+
+LobeChat 支持使用 Clerk 或者 Next Auth 配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权。
+
+## Clerk
+
+Clerk 是一个近期流行起来的全面的身份验证解决方案，它提供了简单而强大的 API 和服务来处理用户认证和会话管理。Clerk 的设计哲学是提供一套简洁、现代的认证解决方案，使得开发者可以轻松集成和使用。
+
+LobeChat 与 Clerk 做了深度集成，能够为用户提供一个更加安全、便捷的登录和注册体验，同时也为开发者减轻了管理身份验证逻辑的负担。Clerk 的简洁和现代的设计理念与 LobeChat 的目标非常契合，使得整个平台的用户管理更加高效和可靠。
+
+在 LobeChat 的环境变量中设置 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY`，即可开启和使用 Clerk。
+
+## Next Auth
+
+在使用 NextAuth 之前，请先在 LobeChat 的环境变量中设置以下变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令： `openssl rand -base64 32`，或者访问 `https://generate-secret.vercel.app/32` 生成秘钥。 |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 可选 | 该环境变量用于同时启用多个身份验证源，以逗号 `,` 分割，例如 `auth0,azure-ad,authentik`。 |
+
+目前支持的身份验证服务有：
+
+<Cards>
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/auth0'} title={'Auth0'} />
+  <Card
+    href={'/zh/docs/self-hosting/advanced/auth/next-auth/microsoft-entra-id'}
+    title={'Microsoft Entra ID'}
+  />
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/authentik'} title={'Authentik'} />
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/github'} title={'Github'} />
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/zitadel'} title={'ZITADEL'} />
+  <Card
+    href={'/zh/docs/self-hosting/advanced/auth/next-auth/cloudflare-zero-trust'}
+    title={'Cloudflare Zero Trust'}
+  />
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/authelia'} title={'Authelia'} />
+  <Card href={'/zh/docs/self-hosting/advanced/auth/next-auth/logto'} title={'Logto'} />
+</Cards>
+
+点击即可查看对应平台的配置文档。
+
+## 进阶配置
+
+同时启用多个身份验证源请设置 `NEXT_AUTH_SSO_PROVIDERS` 环境变量，以逗号 `,` 分割，例如 `auth0,azure-ad,authentik`。
+
+顺序为 SSO 提供商的显示顺序。
+
+| SSO 提供商         | 值          |
+| ------------------ | ----------- |
+| Auth0              | `auth0`     |
+| Microsoft Entra ID | `azure-ad`  |
+| Authentik          | `authentik` |
+| Github             | `github`    |
+| ZITADEL            | `zitadel`   |
+
+## 其他 SSO 提供商
+
+请参考 [NextAuth.js](https://next-auth.js.org/providers) 文档，欢迎提交 Pull Request。

DigitalHumanWeb/docs/self-hosting/advanced/auth/clerk.mdx

@@ -0,0 +1,81 @@
+---
+title: Configure Clerk Authentication Service - Step-by-Step Guide
+description: >-
+  Learn how to set up Clerk authentication with environment variables and
+  webhooks.
+tags:
+  - Clerk Authentication
+  - Environment Variables
+  - Webhook Configuration
+---
+# Configure Clerk Authentication Service
+
+Go to [Clerk](https://clerk.com?utm_source=lobehub\&utm_medium=docs) to register and create an application to obtain the corresponding Public Key and Secret Key.
+
+## Get Environment Variables
+
+<Steps>
+
+### Add Public and Private Key Environment Variables
+
+Add `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables. You can click on the "API Keys" in the menu and copy the corresponding values to get these environment variables.
+
+<Image
+alt={'Find the corresponding public and private key environment variables in Clerk'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/89883703-7a1a-4a11-b944-5d804544e57c'}>
+
+>
+</Image>
+
+The environment variables required for this step are as follows:
+
+```shell
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
+CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+### Create and Configure Webhook in Clerk
+
+Since we let Clerk fully handle user authentication and management, we need Clerk to notify our application and store the changes in the user lifecycle (create, update, delete). We achieve this by using the Webhook provided by Clerk.
+
+We need to add an endpoint in Clerk's Webhooks to inform Clerk to send notifications to this endpoint when a user's information changes.
+
+<Image
+alt={'Add Webhooks endpoint in Clerk'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9'}>
+
+>
+</Image>
+
+Fill in your project URL in the endpoint, such as `https://your-project.com/api/webhooks/clerk`. Then, subscribe to events by checking the three user events (`user.created`, `user.deleted`, `user.updated`), and click create.
+
+<Callout type={'warning'}>The `https://` in the URL is essential to maintain the integrity of the URL.</Callout>
+
+<Image
+alt={'Configure URL and user events when adding Clerk Webhooks'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645'}>
+
+>
+</Image>
+
+### Add Webhook Secret to Environment Variables
+
+After creating, you can find the secret of this Webhook in the bottom right corner:
+
+<Image
+alt={'View Clerk Webhooks secret'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/fab4abb2-584b-49de-9340-813382951635'}>
+
+>
+</Image>
+
+The environment variable corresponding to this secret is `CLERK_WEBHOOK_SECRET`:
+
+```shell
+CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+</Steps>
+
+By following these steps, you have successfully configured the Clerk authentication service.
+

DigitalHumanWeb/docs/self-hosting/advanced/auth/clerk.zh-CN.mdx

@@ -0,0 +1,71 @@
+---
+title: 配置 Clerk 身份验证服务 - 完整指南
+description: 学习如何配置 Clerk 身份验证服务，获取公私钥和设置 Webhook。
+tags:
+  - Clerk
+  - 身份验证
+  - Webhook
+  - 环境变量
+---
+# 配置 Clerk 身份验证服务
+
+前往 [Clerk](https://clerk.com?utm_source=lobehub&utm_medium=docs) 注册并创建应用，获取相应的 Public Key 和 Secret Key。
+
+## 获取环境变量
+
+<Steps>
+
+### 添加公、私钥环境变量
+
+添加 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY` 环境变量。你可以在菜单中点击「API Keys」，然后复制对应的值获取该环境变量。
+
+<Image
+  alt={'在 Clerk 中找到对应的公私钥环境变量'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/89883703-7a1a-4a11-b944-5d804544e57c'}
+></Image>
+
+此步骤所需的环境变量如下：
+
+```shell
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
+CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+### 在 Clerk 中创建并配置 Webhook
+
+由于我们让 Clerk 完全接管用户鉴权与管理，因此我们需要在 Clerk 用户生命周期变更时（创建、更新、删除）中通知我们的应用并存储落库。我们通过 Clerk 提供的 Webhook 来实现这一诉求。
+
+我们需要在 Clerk 的 Webhooks 中添加一个端点（Endpoint），告诉 Clerk 当用户发生变更时，向这个端点发送通知。
+
+<Image
+  alt={'Clerk 添加 Webhooks 端点'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9'}
+></Image>
+
+在 endppint 中填写你的项目 URL，如 `https://your-project.com/api/webhooks/clerk`。然后在订阅事件（Subscribe to events）中，勾选 user 的三个事件（`user.created` 、`user.deleted`、`user.updated`），然后点击创建。
+
+<Callout type={'warning'}>URL的`https://`不可缺失，须保持URL的完整性</Callout>
+
+<Image
+  alt={'添加 Clerk Webhooks 时，配置 URL 和用户事件'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645'}
+></Image>
+
+### 将 Webhook 秘钥添加到环境变量
+
+创建完毕后，可以在右下角找到该 Webhook 的秘钥：
+
+<Image
+  alt={'查看 Clerk Webhooks 秘钥'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/fab4abb2-584b-49de-9340-813382951635'}
+></Image>
+
+这个秘钥所对应的环境变量名为 `CLERK_WEBHOOK_SECRET`：
+
+```shell
+CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+</Steps>
+
+这样，你已经成功配置了 Clerk 身份验证服务。

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/auth0.mdx

@@ -0,0 +1,132 @@
+---
+title: Configure Auth0 Identity Verification Service for LobeChat
+description: >-
+  Learn how to configure Auth0 Identity Verification Service for LobeChat for
+  your organization, including creating applications, adding users, and
+  configuring environment variables.
+tags:
+  - Auth0
+  - Identity Verification
+  - Single Sign-On
+  - Environment Variables
+  - User Management
+  - SSO Integrations
+  - Social Login
+---
+
+# Configure Auth0 Identity Verification Service
+
+<Steps>
+  ### Create Auth0 Application
+
+Register and log in to [Auth0][auth0-client-page], click on the "Applications" in the left navigation bar to switch to the application management interface, and click "Create Application" in the upper right corner to create an application.
+
+<Image
+  alt="Create Auth0 Application S1"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86"
+/>
+
+Fill in the application name you want to display to the organization users, choose any application type, and click "Create".
+
+<Image
+  alt="Create Auth0 Application S2"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc"
+/>
+
+After successful creation, click on the corresponding application to enter the application details page, switch to the "Settings" tab, and you can see the corresponding configuration information.
+
+<Image
+  alt="Create Auth0 Application S3"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6"
+/>
+
+In the application configuration page, you also need to configure Allowed Callback URLs, where you should fill in:
+
+```bash
+http(s)://your-domain/api/auth/callback/auth0
+```
+
+<Image
+  alt="Create Auth0 Application S4"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9"
+/>
+
+<Callout type={'important'}>
+  You can fill in or modify Allowed Callback URLs after deployment, but make sure the filled URL is
+  consistent with the deployed URL.
+</Callout>
+
+### Add Users
+
+Click on the "Users Management" in the left navigation bar to enter the user management interface, where you can create users for your organization to log in to LobeChat.
+
+<Image
+  alt="Add Users"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96"
+/>
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | Key used to encrypt Auth.js session tokens. You can generate a key using the following command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the single sign-on provider for LoboChat. Use `auth0` for Auth0. |
+| `AUTH_AUTH0_ID` | Required | Client ID of the Auth0 application |
+| `AUTH_AUTH0_SECRET` | Required | Client Secret of the Auth0 application |
+| `AUTH_AUTH0_ISSUER` | Required | Domain of the Auth0 application, `https://example.auth0.com` |
+| `NEXTAUTH_URL` | Required | The URL is used to specify the callback address for the execution of OAuth authentication in Auth.js. It needs to be set only when the default address is incorrect. `https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    You can refer to the related variable details at [📘Environment Variables](/docs/self-hosting/environment-variable#auth0).
+
+</Callout>
+</Steps>
+
+<Callout>
+  After successful deployment, users will be able to authenticate and use LobeChat using the users
+  configured in Auth0.
+</Callout>
+
+## Advanced Configuration
+
+### Connecting to an Existing Single Sign-On Service
+
+If your enterprise or organization already has a unified identity authentication infrastructure, you can connect to an existing single sign-on service in Applications -> SSO Integrations.
+
+Auth0 supports single sign-on services such as Azure Active Directory, Slack, Google Workspace, Office 365, Zoom, and more. For a detailed list of supported services, please refer to [this link][auth0-sso-integrations].
+
+<Image
+  alt="Connecting to an Existing Single Sign-On Service"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec"
+/>
+
+### Configuring Social Login
+
+If your enterprise or organization needs to support external user logins, you can configure social login services in Authentication -> Social.
+
+<Image
+  alt="Configuring Social Login"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa"
+/>
+
+<Callout type={'warning'}>
+  Configuring social login services by default allows anyone to authenticate, which may lead to
+  LobeChat being abused by external users.
+</Callout>
+
+<Callout>
+  If you need to restrict login users, be sure to configure a **blocking policy**: After enabling
+  the social login option, refer to [this article][auth0-login-actions-manual] to create an Action
+  to set up a blocking/allow list.
+</Callout>
+
+[auth0-client-page]: https://manage.auth0.com/dashboard
+[auth0-login-actions-manual]: https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/
+[auth0-sso-integrations]: https://marketplace.auth0.com/features/sso-integrations

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/auth0.zh-CN.mdx

@@ -0,0 +1,121 @@
+---
+title: 在 LobeChat 中配置 Auth0 身份验证服务 - 详细步骤和环境变量设置
+description: 学习如何在 LobeChat 中配置 Auth0 身份验证服务，包括创建应用、新增用户、配置环境变量等。了解如何连接现有的单点登录服务和配置社交登录。
+tags:
+  - Auth0
+  - 身份验证
+  - 单点登录
+  - 社交登录
+  - 环境变量
+  - 用户管理
+---
+
+# 配置 Auth0 身份验证服务
+
+<Steps>
+  ### 创建 Auth0 应用
+
+注册并登录 [Auth0](https://manage.auth0.com/dashboard)，点击左侧导航栏的「Applications」，切换到应用管理界面，点击右上角「Create Application」以创建应用。
+
+<Image
+  alt="创建 Auth0 应用 S1"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86"
+/>
+
+填写你想向组织用户显示的应用名称，可选择任意应用类型，点击「Create」。
+
+<Image
+  alt="创建 Auth0 应用 S2"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc"
+/>
+
+创建成功后，点击相应的应用，进入应用详情页，切换到「Settings」标签页，就可以看到相应的配置信息
+
+<Image
+  alt="创建 Auth0 应用 S3"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6"
+/>
+
+在应用配置页面中，还需要配置 Allowed Callback URLs，在此处填写:
+
+```bash
+http(s)://your-domain/api/auth/callback/auth0
+```
+
+<Image
+  alt="创建 Auth0 应用 S4"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9"
+/>
+
+<Callout type={'important'}>
+  可以在部署后再填写或修改 Allowed Callback URLs，但是务必保证填写的 URL 与部署的 URL 一致
+</Callout>
+
+### 新增用户
+
+点击左侧导航栏的「Users Management」，进入用户管理界面，可以为你的组织新建用户，用以登录 LobeChat
+
+<Image
+  alt="新增用户"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96"
+/>
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Auth0 请填写 `auth0`。 |
+| `AUTH_AUTH0_ID` | 必选 | Auth0 应用程序的 Client ID |
+| `AUTH_AUTH0_SECRET` | 必选 | Auth0 应用程序的 Client Secret |
+| `AUTH_AUTH0_ISSUER` | 必选 | Auth0 应用程序的 Domain，`https://example.auth0.com` |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variables/auth#auth-0) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Auth0 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>
+
+## 进阶配置
+
+### 连接现有的单点登录服务
+
+如果你的企业或组织已有现有的统一身份认证设施，可在 Applications -> SSO Integrations 中，连接现有的单点登录服务。
+
+Auth0 支持 Azure Active Directory / Slack / Google Workspace / Office 365 / Zoom 等单点登录服务，详细支持列表可参考 [这里](https://marketplace.auth0.com/features/sso-integrations)
+
+<Image
+  alt="Connecting to an Existing Single Sign-On Service"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec"
+/>
+
+### 配置社交登录
+
+如果你的企业或组织需要支持外部人员登录，可以在 Authentication -> Social 中，配置社交登录服务。
+
+<Image
+  alt="Configuring Social Login"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa"
+/>
+
+<Callout type={'warning'}>
+  配置社交登录服务默认会允许所有人通过认证，这可能会导致 LobeChat 被外部人员滥用。
+</Callout>
+
+<Callout>
+  如果你需要限制登录人员，务必配置 **阻止策略**： 请在打开社交登录选项后，参考
+  [这篇文章](https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/) 创建 Action
+  来设置阻止 / 允许列表。
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/authelia.mdx

@@ -0,0 +1,75 @@
+---
+title: Configuring Authelia Authentication Service for LobeChat
+description: >-
+  Learn how to configure Authelia authentication service in LobeChat, including
+  creating a provider, configuring environment variables, and deploying
+  LobeChat. Detailed steps and necessary environment variable settings.
+tags:
+  - Authelia Configuration
+  - Single Sign-On (SSO)
+  - LobeChat Authentication
+  - Environment Variables
+  - Deployment Instructions
+---
+
+## Configuring Authelia Authentication Service
+
+## Authelia Configuration Flow
+
+<Steps>
+### Create an Authelia Identity Provider
+
+We assume you are already familiar with using Authelia. Let's say your LobeChat instance is deployed at https://lobe.example.com/.
+Note that currently only localhost supports HTTP access; other domains need to enable TLS, otherwise Authelia will actively interrupt authentication by default.
+
+Now, let's open and edit the configuration file of your Authelia instance:
+
+Add a new lobe-chat item under identity_providers -> oidc:
+
+```yaml
+identity_providers:
+  oidc:
+    ...
+    ## The other portions of the mandatory OpenID Connect 1.0 configuration go here.
+    ## See: https://www.authelia.com/c/oidc
+    - id: lobe-chat
+      description: LobeChat
+      secret: '$pbkdf2-sha512$310000$c8p78n7pUMln0jzvd4aK4Q$JNRBzwAo0ek5qKn50cFzzvE9RXV88h1wJn5KGiHrD0YKtZaR/nCb2CJPOsKaPK0hjf.9yHxzQGZziziccp6Yng'  # The digest of 'insecure_secret'.
+      public: false
+      authorization_policy: two_factor
+      redirect_uris:
+        - https://chat.example.com/api/auth/callback/authelia
+      scopes:
+        - openid
+        - profile
+        - email
+      userinfo_signing_algorithm: none
+```
+
+Make sure to replace secret and redirect_urls with your own values.
+Note! The secret configured in Authelia is ciphertext, i.e., a salted hash value. Its corresponding plaintext needs to be filled in LobeChat later.
+
+Save the configuration file and restart the Authelia service. Now we have completed the Authelia configuration.
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | The secret used to encrypt Auth.js session tokens. You can generate a secret using the following command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the SSO provider for LoboChat. Use `authentik` for Authentik. |
+| `AUTH_AUTHELIA_ID` | Required | The id just configured in Authelia, example value is lobe-chat |
+| `AUTH_AUTHELIA_SECRET` | Required | The plaintext corresponding to the secret just configured in Authelia, example value is insecure_secret |
+| `AUTH_AUTHELIA_ISSUER` | Required | Your Authelia URL, for example https://sso.example.com |
+| `NEXTAUTH_URL` | Required | This URL is used to specify the callback address for Auth.js when performing OAuth verification. It only needs to be set when the default generated redirect address is incorrect. https://chat.example.com/api/auth |
+
+<Callout type={'tip'}>
+  Go to  [📘 Environment Variables](/docs/self-hosting/environment-variable#Authelia) for details about the variables.
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After a successful deployment, users will be able to use LobeChat by authenticating with the users
+  configured in Authelia.
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/authelia.zh-CN.mdx

@@ -0,0 +1,73 @@
+---
+title: 在 LobeChat 中配置 Authelia 身份验证服务
+description: 学习如何在 LobeChat 中配置 Authelia 身份验证服务，包括创建提供程序、配置环境变量和部署 LobeChat。详细步骤和必要环境变量设置。
+tags:
+  - Authelia
+  - 身份验证
+  - 单点登录
+  - 环境变量
+  - LobeChat
+---
+
+# 配置 Authelia 身份验证服务
+
+## Authelia 配置流程
+
+<Steps>
+### 创建 Authelia 提供应用
+
+我们现在默认您已经了解了如何使用 Authelia。假设您的 LobeChat 实例部署在 `https://lobe.example.com/` 中。
+注意，目前只有 `localhost` 支持 HTTP 访问，其他域名需要启用 TLS，否则 Authelia 默认将主动中断身份认证。
+
+现在，我们打开 Authelia 实例的配置文件进行编辑：
+
+在 `identity_providers`-> `oidc` 下新增一个 `lobe-chat` 的项目：
+
+```yaml
+...
+identity_providers:
+  oidc:
+    ...
+    ## The other portions of the mandatory OpenID Connect 1.0 configuration go here.
+    ## See: https://www.authelia.com/c/oidc
+    - id: lobe-chat
+      description: LobeChat
+      secret: '$pbkdf2-sha512$310000$c8p78n7pUMln0jzvd4aK4Q$JNRBzwAo0ek5qKn50cFzzvE9RXV88h1wJn5KGiHrD0YKtZaR/nCb2CJPOsKaPK0hjf.9yHxzQGZziziccp6Yng'  # The digest of 'insecure_secret'.
+      public: false
+      authorization_policy: two_factor
+      redirect_uris:
+        - https://chat.example.com/api/auth/callback/authelia
+      scopes:
+        - openid
+        - profile
+        - email
+      userinfo_signing_algorithm: none
+```
+
+请您确保 `secret` 和 `redirect_urls` 替换成您自己的值。
+注意！Authelia 中配置 `secret` 是密文，即加盐哈希值。其对应的明文稍后需要填写在 lobeChat 中。
+
+保存配置文件，然后重启 Authelia 服务。现在我们完成了 Authelia 的配置工作。
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Authelia 请填写 `authelia`。 |
+| `AUTH_AUTHELIA_ID` | 必选 | 刚刚在 Authelia 配置的 `id`，示例值是 `lobe-chat` |
+| `AUTH_AUTHELIA_SECRET` | 必选 | 刚刚在 Authelia 配置的 `secret` 对应的明文，示例值是 `insecure_secret` |
+| `AUTH_AUTHELIA_ISSUER` | 必选 |您的 Authelia 的网址，例如 `https://sso.example.com` |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://chat.example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variable#Authelia) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Authelia 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/authentik.mdx

@@ -0,0 +1,73 @@
+---
+title: Configuring Authentik Authentication Service for LobeChat
+description: >-
+  Learn how to configure Authentik for Single Sign-On (SSO) for LobeChat,
+  including creating an application provider, setting environment variables, and
+  deployment instructions.
+tags:
+  - Authentik Configuration
+  - Single Sign-On (SSO)
+  - LobeChat Authentication
+  - Environment Variables
+  - Deployment Instructions
+---
+
+## Configuring Authentik Authentication Service
+
+## Authentik Configuration Flow
+
+<Steps>
+  ### Create an Authentik Application Provider
+
+In your Authentik instance, use the administrator account to go to **Admin Interface** -> **Applications** -> **Providers** and create a new provider.
+
+Select **OAuth2/OpenID Provider** as the provider type. Fill in the provider name, select the authentication flow and authorization flow.
+
+In the `Redirect URL/Origin (regex)` field, fill in:
+
+```bash
+https://your-domain/api/auth/callback/authentik
+```
+
+<Callout type={'info'}>
+  - You can fill in or modify the `Redirect URL/Origin (regex)` later, but make sure the filled in
+  URL matches the deployed URL. - Replace `your-domain` with your own domain name
+</Callout>
+
+<Image
+  alt="Create Authentik Provider"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/67304509/4244634e-5f68-48d5-aac0-e5f4b06d1c4b"
+/>
+
+Click **Done**
+
+After the creation is successful, click **Applications** on the left -> **Create**, fill in the name and Slug, select the provider created in the previous step, and click **Create**.
+
+After the application provider is created, click the corresponding provider to enter the details page, click **Edit**, and save the `Client ID` and `Client Secret`.
+
+Copy the URL of `OpenID Configuration Issuer` and save it.
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | The secret used to encrypt Auth.js session tokens. You can generate a secret using the following command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the SSO provider for LoboChat. Use `authentik` for Authentik. |
+| `AUTH_AUTHENTIK_ID` | Required | The Client ID from the Authentik application provider details page |
+| `AUTH_AUTHENTIK_SECRET` | Required | The Client Secret from the Authentik application provider details page |
+| `AUTH_AUTHENTIK_ISSUER` | Required | The OpenID Configuration Issuer from the Authentik application provider details page |
+| `NEXTAUTH_URL` | Required | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. It only needs to be set when the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    Go to  [📘 Environment Variables](/docs/self-hosting/environment-variable#Authentik) for details about the variables.
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After a successful deployment, users will be able to use LobeChat by authenticating with the users
+  configured in Authentik.
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/authentik.zh-CN.mdx

@@ -0,0 +1,67 @@
+---
+title: 在 LobeChat 中配置 Authentik 身份验证服务
+description: 学习如何在 LobeChat 中配置 Authentik 身份验证服务，包括创建提供程序、配置环境变量和部署 LobeChat。详细步骤和必要环境变量设置。
+tags:
+  - Authentik
+  - 身份验证
+  - 单点登录
+  - 环境变量
+  - LobeChat
+---
+
+# 配置 Authentik 身份验证服务
+
+## Authentik 配置流程
+
+<Steps>
+  ### 创建 Authentik 提供应用
+
+在你的 Authentik 实例中使用管理员账号进入 管理员界面 -> 应用程序 -> 提供程序 创建一个新的提供程序。
+
+选择 OAuth2/OpenID Provider 作为提供程序类型。填写提供程序的名称，选择身份流程和授权流程。
+
+在 `重定向 URL/Origin（正则）` 处填写：
+
+```bash
+https://your-domain/api/auth/callback/authentik
+```
+
+<Callout type={'info'}>
+  - 可以之后再填写或修改 `重定向 URL/Origin（正则）`，但是务必保证填写的 URL 与部署的 URL 一致。 -
+  your-domain 请替换为自己的域名
+</Callout>
+
+<Image
+  alt="创建 Authentik 提供程序"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/67304509/4244634e-5f68-48d5-aac0-e5f4b06d1c4b"
+/>
+
+点击「完成」
+
+创建成功后，点击左侧的「应用程序」-> 创建，填写名称和 Slug ，提供程序选择上一步创建的提供程序，点击「创建」。
+
+提供程序创建成功后，点击相应的提供程序，进入详情页，点击「编辑」，将 `客户端 ID` 和 `客户端 Secret` 保存下来。复制 `OpenID 配置颁发者` 的 URL，保存下来。
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Authentik 请填写 `authentik`。 |
+| `AUTH_AUTHENTIK_ID` | 必选 | Authentik 提供程序详情页的 客户端 ID |
+| `AUTH_AUTHENTIK_SECRET` | 必选 | Authentik 提供程序详情页的 客户端 Secret |
+| `AUTH_AUTHENTIK_ISSUER` | 必选 | Authentik 提供程序详情页的 OpenID 配置颁发者 |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variable#Authentik) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Authentik 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/cloudflare-zero-trust.mdx

@@ -0,0 +1,68 @@
+---
+title: Configuring Cloudflare Zero Trust Authentication Service for LobeChat
+description: >-
+  Learn how to configure Cloudflare Zero Trust for Single Sign-On (SSO) for
+  LobeChat, including creating an application provider, setting environment
+  variables, and deployment instructions.
+tags:
+  - Cloudflare Zero Trust
+  - Single Sign-On (SSO)
+  - LobeChat Authentication
+  - Environment Variables
+  - Deployment Instructions
+---
+
+# Configuring Cloudflare Zero Trust Authentication Service
+
+## Cloudflare Zero Trust Configuration Flow
+
+<Steps>
+### Creating an Application in Cloudflare Zero Trust
+
+We assume you are already familiar with using the Cloudflare Zero Trust platform and that your LobeChat instance is deployed at `https://chat.example.com`.
+
+First, we need to visit `https://one.dash.cloudflare.com/` and navigate to `Access - Applications`.
+
+![image](https://github.com/user-attachments/assets/4d671a7c-5d94-4c4b-b4fd-71a5a0e9d227)
+
+Now, on the current page, click `Add an application` and select `SaaS`.
+
+![image](https://github.com/user-attachments/assets/3da4c8c4-88c6-40a9-8005-6a0a44aa3b1f)
+
+In the `Application` text box, enter the application name, such as `LobeChat SSO`. Then click `Select OIDC`, followed by clicking `Add application`.
+
+![image](https://github.com/user-attachments/assets/16cd9aef-c87b-48a4-95c0-b666082e7515)
+
+At this point, you have successfully created a SaaS application named `LobeChat SSO` in Cloudflare Zero Trust.
+
+Next, we need to enter `https://chat.example.com/api/auth/callback/cloudflare-zero-trust` in the `Redirect URLs` field (note that `chat.example.com` should be replaced with your instance's address).
+
+![image](https://github.com/user-attachments/assets/433fdce4-0af5-417f-b80d-163c2d4f02f6)
+
+Finally, scroll down the page and record the following three values: `Client secret`, `Client ID`, and `Issuer`. You will need these for setting the environment variables when deploying LobeChat.
+
+![image](https://github.com/user-attachments/assets/2dd3cde5-fa0d-4f52-b82b-28d9e89379a0)
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | The secret used to encrypt Auth.js session tokens. You can generate a secret using the following command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the SSO provider for LoboChat. Use `cloudflare-zero-trust` for Cloudflare Zero Trust. |
+| `AUTH_CLOUDFLARE_ZERO_TRUST_ID` | Required | The Client ID from the Cloudflare Zero Trust application provider details page |
+| `AUTH_CLOUDFLARE_ZERO_TRUST_SECRET` | Required | The Client Secret from the Cloudflare Zero Trust application provider details page |
+| `AUTH_CLOUDFLARE_ZERO_TRUST_ISSUER` | Required | The OpenID Configuration Issuer from the Cloudflare Zero Trust application provider details page |
+| `NEXTAUTH_URL` | Required | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. It only needs to be set when the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    Go to  [📘 Environment Variables](/docs/self-hosting/environment-variable#Cloudflare%20Zero%20Trust) for details about the variables.
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After a successful deployment, users will be able to use LobeChat by authenticating with the users
+  configured in Cloudflare Zero Trust.
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/cloudflare-zero-trust.zh-CN.mdx

@@ -0,0 +1,65 @@
+---
+title: 在 LobeChat 中配置 Cloudflare Zero Trust 身份验证服务
+description: >-
+  学习如何在 LobeChat 中配置 Cloudflare Zero Trust 身份验证服务，包括创建提供程序、配置环境变量和部署
+  LobeChat。详细步骤和必要环境变量设置。
+tags:
+  - Cloudflare Zero Trust
+  - 身份验证
+  - 单点登录
+  - 环境变量
+  - LobeChat
+---
+
+# 配置 Cloudflare Zero Trust 身份验证服务
+
+## Cloudflare Zero Trust 配置流程
+
+<Steps>
+### 在 Cloudflare Zero Trust 中创建应用
+
+我们现在默认您已经了解了如何使用 Cloudflare Zero Trust 平台且假设您的 LobeChat 实例部署在 `https://chat.example.com` 中。
+
+首先我们需要访问 `https://one.dash.cloudflare.com/` 并前往 `Access - Applications` 中。
+
+![image](https://github.com/user-attachments/assets/4d671a7c-5d94-4c4b-b4fd-71a5a0e9d227)
+
+现在，在所在页面点击 `Add an application` 并选择 `SaaS`。
+
+![image](https://github.com/user-attachments/assets/3da4c8c4-88c6-40a9-8005-6a0a44aa3b1f)
+
+在 `Application` 文本框内填入应用名称，如：`LobeChat SSO`，然后点击 `Select OIDC` 后点击 `Add applicaiton`
+
+![image](https://github.com/user-attachments/assets/16cd9aef-c87b-48a4-95c0-b666082e7515)
+
+至此您已成功在 Clouflare Zero Trust 中创建了一个名为 `LobeChat SSO` 的 SaaS 应用。
+
+接下来我们需要在 `Redirect URLs` 中填入 `https://chat.example.com/api/auth/callback/cloudflare-zero-trust`（注意此处的 `chat.example.com` 需要替换为您的实例地址）
+![image](https://github.com/user-attachments/assets/433fdce4-0af5-417f-b80d-163c2d4f02f6)
+
+最后我们将页面往下滚动，您将需要记录以下三个值 `Client secret`, `Client ID` 及 `Issuer` 以备后续部署 LobeChat 环境变量使用。
+
+![image](https://github.com/user-attachments/assets/2dd3cde5-fa0d-4f52-b82b-28d9e89379a0)
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Cloudflare Zero Trust 请填写 `cloudflare-zero-trust`。 |
+| `CLOUDFLARE_ZERO_TRUST_CLIENT_ID` | 必选 | 在 Cloudflare Zero Trust 生成的 `Client ID`，示例值是 `lobe-chat` |
+| `CLOUDFLARE_ZERO_TRUST_CLIENT_SECRET` | 必选 | 在 Cloudflare Zero Trust 生成的 `Client secret`，示例值是 `insecure_secret` |
+| `CLOUDFLARE_ZERO_TRUST_ISSUER` | 必选 | 在 Cloudflare Zero Trust 生成的 `Issuer`，例如 `https://example.cloudflareaccess.com/cdn-cgi/access/sso/oidc/7db0f` |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://chat.example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variable#Cloudflare%20Zero%20Trust) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Cloudflare Zero Trust 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/github.mdx

@@ -0,0 +1,101 @@
+---
+title: Configuring Github Authentication Service for LobeChat
+description: >-
+  Learn how to configure Github authentication service for LobeChat, including
+  creating a Github provider, setting up environment variables, and deploying
+  LobeChat.
+tags:
+  - Github authentication
+  - LobeChat
+  - Environment variables
+  - Single Sign-On
+  - OAuth authentication
+---
+
+# Configuring Github Authentication Service
+
+## Github Configuration Process
+
+<Steps>
+  ### Create a Github Provider
+
+Click [here][github-create-app] to create a new Github App.
+
+Fill in the Github App name, Homepage URL, and Callback URL.
+
+<Image
+  alt="Create a Github Provider"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/2f919f99-2aaa-4fa7-9938-169d3ed09db7"
+/>
+
+Set the webhook callback URL according to your needs.
+
+<Image
+  alt="Fill in other fields"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/d7ef5ad1-b1a3-435e-b1bc-4436d2b6fecd"
+/>
+
+Set the permission to read email addresses.
+
+<Image
+  alt="Set required permissions"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/23131ca1-9e84-4a89-a840-ef79c4bc0251"
+/>
+<Image
+  alt="Set permission to read email addresses"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/358bca8d-3d82-4e76-9a5e-90d16a39efde"
+/>
+
+Set whether it is accessible publicly or only accessible to yourself.
+
+<Image
+  alt="Set whether it is accessible publicly or only accessible to yourself"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/995780cb-9096-4a36-ab17-d422703ab970"
+/>
+
+Click "Create Github App".
+
+After successful creation, click "Generate a new client secret" to create a client secret.
+
+<Image
+  alt="Create a new client secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/6d69bdca-7d18-4cbc-b3e0-220d8815cd29"
+/>
+
+After successful creation, save the `Client ID` and `Client Secret`.
+
+<Image
+  alt="Create a new client secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/c6108133-a918-48b0-ab1a-e3fa607572a4"
+/>
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | Key used to encrypt Auth.js session tokens. You can generate the key using the command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the Single Sign-On provider for LobeChat. Use `github` for Github. |
+| `AUTH_GITHUB_ID` | Required | Client ID in the Github App details page. |
+| `AUTH_GITHUB_SECRET` | Required | Client Secret in the Github App details page. |
+| `NEXTAUTH_URL` | Required | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. Only set it if the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+<Callout type={'tip'}>
+  Go to [📘 Environment Variables](/docs/self-hosting/environment-variables/auth#github) for detailed
+  information on these variables.
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After successful deployment, users will be able to authenticate with Github and use LobeChat.
+</Callout>
+
+[github-create-app]: https://github.com/settings/apps/new

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/github.zh-CN.mdx

@@ -0,0 +1,93 @@
+---
+title: 在 LobeChat 中配置 Github 身份验证服务
+description: 学习如何在 LobeChat 中配置 Github 身份验证服务，包括创建新的 Github App、设置权限和环境变量。
+tags:
+  - Github 身份验证
+  - Github App
+  - 环境变量配置
+  - 单点登录
+  - LobeChat
+---
+
+# 配置 Github 身份验证服务
+
+## Github 配置流程
+
+<Steps>
+  ### 创建 Github 提供应用
+
+点击 [这里](https://github.com/settings/apps/new) 创建一个新的 Github App。
+
+填写 Github App name、Homepage URL、Callbak URL
+
+<Image
+  alt="创建 Github 提供程序"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/2f919f99-2aaa-4fa7-9938-169d3ed09db7"
+/>
+按照自己所需设置Webhook回调地址
+
+<Image
+  alt="填写其他字段"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/d7ef5ad1-b1a3-435e-b1bc-4436d2b6fecd"
+/>
+
+设置读取邮件地址权限
+
+<Image
+  alt="设置所需权限"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/23131ca1-9e84-4a89-a840-ef79c4bc0251"
+/>
+<Image
+  alt="设置读取邮件地址权限"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/358bca8d-3d82-4e76-9a5e-90d16a39efde"
+/>
+
+设置公开访问还是仅自己访问
+
+<Image
+  alt="设置公开访问还是仅自己访问"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/995780cb-9096-4a36-ab17-d422703ab970"
+/>
+
+点击「Create Github App」
+
+创建成功后，点击「Generate a new client secret」创建客户端Secret
+
+<Image
+  alt="创建新的客户端密钥"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/6d69bdca-7d18-4cbc-b3e0-220d8815cd29"
+/>
+
+创建成功后， 将 `客户端 ID` 和 `客户端 Secret` 保存下来。
+
+<Image
+  alt="创建新的客户端密钥"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/c6108133-a918-48b0-ab1a-e3fa607572a4"
+/>
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Github 请填写 `github`。 |
+| `AUTH_GITHUB_ID` | 必选 | Github App详情页的 客户端 ID |
+| `AUTH_GITHUB_SECRET` | 必选 | Github App详情页的 客户端 Secret |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variables/auth#github) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>部署成功后，用户将可以通过Github身份认证并使用 LobeChat。</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/logto.mdx

@@ -0,0 +1,74 @@
+---
+title: Configuring Logto Authentication Service in LobeChat
+description: >-
+  Learn how to configure Logto authentication service in LobeChat, including
+  deployment, creation, setting permissions, and environment variables.
+tags:
+  - Logto Authentication
+  - Environment Variable Configuration
+  - Single Sign-On
+  - LobeChat
+---
+
+# Configuring Logto Authentication Service
+
+[Logto](https://github.com/logto-io/logto) is an open-source authentication service with a simple and beautiful interface, rich in features and easy to use. You can choose to use the official Logto Cloud or opt for a private deployment of Logto.
+
+<Callout type={'tip'}>
+
+If you want to deploy Logto privately, we recommend using Docker Compose to deploy it together with the LobeChat database version. In this case, LobeChat can share the same Postgres instance with it.
+
+</Callout>
+
+## Logto Configuration Process
+
+The following assumes your LobeChat database version domain is `https://lobe.example.com`.
+
+If you are using a privately deployed Logto, assume its endpoint domain is `https://lobe-auth-api.example.com`.
+
+If you are using Logto Cloud, assume its endpoint domain is `https://example.logto.app`.
+
+<Steps>
+  ### Create Logto Application
+
+  Access your privately deployed Logto WebUI or [Logto Cloud](http://cloud.logto.io/) to enter the console, and create a `Next.js (App Router)` application under `Applications` with any name.
+
+  ### Configure Logto
+
+  Set the `Redirect URI` to `https://lobe.example.com/api/auth/callback/logto` and the `Post sign-out redirect URI` to `https://lobe.example.com/`.
+
+  Set `CORS allowed origins` to `https://lobe.example.com`.
+
+  <Image alt="Configure Logto" inStep src="https://github.com/user-attachments/assets/5b816379-c07b-40ea-bde4-df16e2e4e523" />
+
+  After successful creation, save the `Client ID` and `Client Secret`.
+
+  ### Configure Environment Variables
+
+  <Image alt="Configure Environment Variables" inStep src="https://github.com/user-attachments/assets/15af6d94-af4f-4aa9-bbab-7a46e9f9e837" />
+
+  Set the obtained `Client ID` and `Client Secret` as `LOGTO_CLIENT_ID` and `LOGTO_CLIENT_SECRET` in the LobeChat environment variables.
+
+  Configure `LOGTO_ISSUER` in the LobeChat environment variables as follows:
+
+  - `https://lobe-auth-api.example.com/oidc` if you are using a privately deployed Logto
+  - `https://example.logto.app/oidc` if you are using Logto Cloud
+
+  When deploying LobeChat, you need to configure the following environment variables:
+
+  | Environment Variable      | Type     | Description                                                                                                                                                                            |
+  | ------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | `NEXT_AUTH_SECRET`        | Required | The key used to encrypt Auth.js session tokens. You can generate a key using the command: `openssl rand -base64 32`                                                                    |
+  | `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the single sign-on provider for LobeChat. For Logto, enter `logto`.                                                                                                             |
+  | `AUTH_LOGTO_ID`         | Required | The Client ID from the Logto App details page                                                                                                                                          |
+  | `AUTH_LOGTO_SECRET`     | Required | The Client Secret from the Logto App details page                                                                                                                                      |
+  | `AUTH_LOGTO_ISSUER` | Required | OpenID Connect issuer of the Logto provider |
+  | `NEXTAUTH_URL`            | Required | This URL specifies the callback address for Auth.js during OAuth verification, needed only if the default generated redirect address is incorrect. `https://lobe.example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    Visit [📘 Environment Variables](/docs/self-hosting/environment-variables/auth#logto) for details on related variables.
+ 
+</Callout>
+</Steps>
+
+<Callout type={'info'}>After successful deployment, users will be able to authenticate via Logto and use LobeChat.</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/logto.zh-CN.mdx

@@ -0,0 +1,78 @@
+---
+title: 在 LobeChat 中配置 Logto 身份验证服务
+description: 学习如何在 LobeChat 中配置 Logto 身份验证服务，包括部署、创建、设置权限和环境变量。
+tags:
+  - Logto 身份验证
+  - 环境变量配置
+  - 单点登录
+  - LobeChat
+---
+
+# 配置 Logto 身份验证服务
+
+[Logto](https://github.com/logto-io/logto) 是一个开源的身份验证服务，界面简洁美观、功能配置丰富且易于上手，你即可以选择使用其官方提供的 Logto Cloud，也可以选择私有部署 Logto。
+
+<Callout type={'tip'}>
+    若你想要私有部署 Logto，我们建议你将之与 LobeChat 数据库版本一同使用 Docker Compose 部署，此时 LobeChat 可以与之共用同一个 Postgres 实例。
+</Callout>
+
+## Logto 配置流程
+
+下文假设你的 LobeChat 数据库版本域名为 `https://lobe.example.com`。
+
+若你是私有部署的 Logto，假设其 endpoint 域名为 `https://lobe-auth-api.example.com`。
+
+若你是使用的 Logto Cloud，假设其 endpoint 域名为 `https://example.logto.app`。
+
+<Steps>
+  ### 创建 Logto 应用
+
+访问你私有部署的 Logto WebUI 或者 [Logto Cloud](http://cloud.logto.io/) 进入控制台，在 `Applications` 里创建一个 `Next.js (App Router)` 应用，名称随意
+
+### 配置 Logto
+
+配置 `Redirect URI` 为 `https://lobe.example.com/api/auth/callback/logto`，`Post sign-out redirect URI` 为 `https://lobe.example.com/`
+
+配置 `CORS allowed origins` 为 `https://lobe.example.com`
+
+<Image
+  alt="配置 Logto"
+  inStep
+  src="https://github.com/user-attachments/assets/5b816379-c07b-40ea-bde4-df16e2e4e523"
+/>
+
+创建成功后， 将 `Client ID` 和 `Client Secret` 保存下来。
+
+### 配置环境变量
+
+<Image
+  alt="配置环境变量"
+  inStep
+  src="https://github.com/user-attachments/assets/15af6d94-af4f-4aa9-bbab-7a46e9f9e837"
+/>
+
+将获取到的 `Client ID` 和 `Client Secret`，设为 LobeChat 环境变量中的 `LOGTO_CLIENT_ID` 和 `LOGTO_CLIENT_SECRET`。
+
+配置 LobeChat 环境变量中 `LOGTO_ISSUER` 为：
+
+- `https://lobe-auth-api.example.com/oidc`，若你是私有部署的 Logto
+- `https://example.logto.app/oidc`，若你是使用的 Logto Cloud
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Logto 请填写 `logto`。 |
+| `AUTH_LOGTO_ID` | 必选 | Logto App 详情页的 Client ID |
+| `AUTH_LOGTO_SECRET` | 必选 | Logto App 详情页的 Client Secret |
+| `AUTH_LOGTO_ISSUER` | 必选 | Logto 提供程序的 OpenID Connect 颁发者 |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://lobe.example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variables/auth#logto) 可查阅相关变量详情。
+ 
+</Callout>
+</Steps>
+
+<Callout type={'info'}>部署成功后，用户将可以通过 Logto 身份认证并使用 LobeChat。</Callout>

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/microsoft-entra-id.mdx

@@ -0,0 +1,104 @@
+---
+title: Configuration of Microsoft Entra ID Authentication Service for LobeChat
+description: >-
+  Learn how to configure Microsoft Entra ID Authentication Service for LobeChat,
+  create applications, add users, and set up environment variables for seamless
+  integration.
+tags:
+  - Microsoft Entra ID
+  - Authentication Service
+  - Azure Portal
+  - SSO
+  - Environment Variables
+  - LobeChat
+---
+
+# Configuration of Microsoft Entra ID Authentication Service
+
+<Steps>
+  ### Create a Microsoft Entra ID Application
+
+In your [Microsoft Azure Portal][microsoft-azure-portal], go to Microsoft Entra ID -> App registrations -> New registration to create a new application.
+
+Fill in the desired application name to be displayed to organizational users, choose the account types you wish to support, and if only internal users are supported, select `Accounts in this organizational directory only (Default Directory only - Single tenant)`.
+
+In the `Redirect URI (optional)` section, for the application type, select `Web`, and in the Callback URL, enter:
+
+```bash
+https://your-domain/api/auth/callback/azure-ad
+```
+
+<Callout type={'info'}>
+  - You can fill in or modify the Redirect URIs after registering, but make sure the URL you enter
+  matches the deployed URL. - Please replace "your-domain" with your own domain.
+</Callout>
+
+<Image
+  alt="App Register"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/4f9d83bd-b3fc-4abc-bcf4-ccbad65c219d"
+/>
+
+Click on "Register".
+
+After successfully creating the application, click on the corresponding application to enter the application details page, and switch to the "Overview" tab to view the corresponding configuration information.
+
+<Image
+  alt="App Overview"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/48a0b702-05bd-4ce4-a007-a8ad00a36e5a"
+/>
+
+Go to "Certificates & secrets", select the "Client secrets" tab, click on "New client secret", fill in the description, select the expiration time, and click on "Add" to create a new client secret.
+
+<Image
+  alt="Create App Client Secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/c9d66fa0-158c-4bd3-a1fa-969e638259d2"
+/>
+
+<Callout type={'important'}>
+  Please make sure to save your client secret as this is your only chance to view it.
+</Callout>
+
+### Add Users
+
+Go back to the "Microsoft Entra ID" interface, enter "Users", click on "New user", fill in the user information, and click on "Create" to create a user for using LobeChat.
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | Required | Key used to encrypt Auth.js session tokens. You can generate the key using the following command: `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the single sign-on provider for LoboChat. Use `azure-ad` for Microsoft Entra ID. |
+| `AUTH_AZURE_AD_ID` | Required | Client ID of the Microsoft Entra ID application. |
+| `AUTH_AZURE_AD_SECRET` | Required | Client Secret of the Microsoft Entra ID application. |
+| `AUTH_AZURE_AD_TENANT_ID` | Required | Tenant ID of the Microsoft Entra ID application. |
+| `NEXTAUTH_URL` | Required | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. It is only necessary to set it when the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+<Callout type={'tip'}>
+  You can refer to [📘 environment
+  variables](/docs/self-hosting/environment-variable#microsoft-entra-id) for details on related
+  variables.
+</Callout>
+
+</Steps>
+
+<Callout>
+  After successful deployment, users will be able to authenticate and use LobeChat using the users
+  configured in Microsoft Entra ID.
+</Callout>
+
+## Advanced Configuration
+
+Please explore further in the [Microsoft Entra ID Learning Center][microsoft-learn-entra].
+
+## Related Resources
+
+- [Quickstart: Register an app][microsoft-entra-register-app]
+
+[microsoft-azure-portal]: https://portal.azure.com/
+[microsoft-entra-register-app]: https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app
+[microsoft-learn-entra]: https://learn.microsoft.com/en-us/entra/identity/

DigitalHumanWeb/docs/self-hosting/advanced/auth/next-auth/microsoft-entra-id.zh-CN.mdx

@@ -0,0 +1,98 @@
+---
+title: 在 LobeChat 中配置 Microsoft Entra ID 身份验证服务
+description: 学习如何在 LobeChat 中配置 Microsoft Entra ID 身份验证服务，包括创建应用、新增用户和配置环境变量。详细步骤和相关资料。
+tags:
+  - Microsoft Entra ID
+  - Microsoft Azure Portal
+  - 身份验证服务
+  - 应用注册
+  - 环境变量
+  - 用户管理
+---
+
+# 配置 Microsoft Entra ID 身份验证服务
+
+## Microsoft Entra ID 配置流程
+
+<Steps>
+  ### 创建 Microsoft Entra ID 应用
+
+在你的 [Microsoft Azure Portal][microsoft-azure-portal] 进入 Microsoft Entra ID -> App registrations -> New registration 创建一个新的应用。
+
+填写你想向组织用户显示的应用名称，选择你期望支持的账户类型，如果只支持内部用户请选择 `Accounts in this organizational directory only (Default Directory only - Single tenant)`。
+
+在 `Redirect URI (optional)` 中，应用类型选择 `Web`，Callback URL, 处填写：
+
+```bash
+https://your-domain/api/auth/callback/azure-ad
+```
+
+<Callout type={'info'}>
+  - 可以在 Register 后再填写或修改 Redirect URIs，但是务必保证填写的 URL 与部署的 URL 一致。 -
+  your-domain 请填写自己的域名
+</Callout>
+
+<Image
+  alt="App Register"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/4f9d83bd-b3fc-4abc-bcf4-ccbad65c219d"
+/>
+
+点击「Register」
+
+创建成功后，点击相应的应用，进入应用详情页，切换到「Overview」标签页，就可以看到相应的配置信息。
+
+<Image
+  alt="App Overview"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/48a0b702-05bd-4ce4-a007-a8ad00a36e5a"
+/>
+
+进入「Certificates & secrets」，选择「Client secrets」标签，点击「New client secret」，填写描述，选择过期时间，点击「Add」，创建一个新的客户端密钥。
+
+<Image
+  alt="Create App Client Secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/13883964/c9d66fa0-158c-4bd3-a1fa-969e638259d2"
+/>
+
+<Callout type={'important'}>请务必保存好你的客户端密钥，因为这是你唯一的机会查看它。</Callout>
+
+### 新增用户
+
+回到「Microsoft Entra ID」界面，进入「Users」，点击「New user」，填写用户信息，点击「Create」，创建用户以使用 LobeChat。
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `NEXT_AUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `NEXT_AUTH_SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Microsoft Entra ID 请填写 `azure-ad`。 |
+| `AUTH_AZURE_AD_ID` | 必选 | Microsoft Entra ID 应用程序的 Client ID |
+| `AUTH_AZURE_AD_SECRET` | 必选 | Microsoft Entra ID 应用程序的 Client Secret |
+| `AUTH_AZURE_AD_TENANT_ID` | 必选 | Microsoft Entra ID 应用程序的 Tenant ID |
+| `NEXTAUTH_URL` | 必选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/zh/docs/self-hosting/environment-variable#microsoft-entra-id) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Microsoft Entra ID 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>
+
+## 进阶配置
+
+请在 [Microsoft Entra ID 学习中心][microsoft-learn-entra]，做进一步探索。
+
+## 相关资料
+
+- [快速注册应用指导][microsoft-entra-register-app]
+
+[microsoft-azure-portal]: https://portal.azure.com/
+[microsoft-entra-register-app]: https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app
+[microsoft-learn-entra]: https://learn.microsoft.com/en-us/entra/identity/