Merge branch 'main' into feat/multi-models

README.md

@@ -6,7 +6,7 @@
   <a href="./README_ES.md">Español</a>
 </p>
 
-[Website](https://dify.ai) • [Docs](https://docs.dify.ai) • [Twitter](https://twitter.com/dify_ai) • [Discord](https://discord.gg/FngNHpbcY7)
+#### [Website](https://dify.ai) • [Docs](https://docs.dify.ai) • [Deployment Docs](https://docs.dify.ai/getting-started/install-self-hosted) •  [FAQ](https://docs.dify.ai/getting-started/faq) • [Twitter](https://twitter.com/dify_ai) • [Discord](https://discord.gg/FngNHpbcY7)
 
 **Dify** is an easy-to-use LLMOps platform designed to empower more people to create sustainable, AI-native applications. With visual orchestration for various application types, Dify offers out-of-the-box, ready-to-use applications that can also serve as Backend-as-a-Service APIs. Unify your development process with one API for plugins and datasets integration, and streamline your operations using a single interface for prompt engineering, visual analytics, and continuous improvement.
 
@@ -15,17 +15,35 @@ Applications created with Dify include:
 Out-of-the-box web sites supporting form mode and chat conversation mode
 A single API encompassing plugin capabilities, context enhancement, and more, saving you backend coding effort
 Visual data analysis, log review, and annotation for applications
-Dify is compatible with Langchain, meaning we'll gradually support multiple LLMs, currently supported:
 
-* **OpenAI** ：GPT4、GPT3.5-turbo、GPT3.5-turbo-16k、text-davinci-003
+## Highlighted Features
+**1. LLMs support:** Choose capabilities based on different models when building your Dify AI apps. Dify is compatible with Langchain, meaning it will support various LLMs. Currently supported:
 
-* **Azure OpenAI**
+>* OpenAI: GPT-4, GPT-3.5-turbo, GPT-3.5-turbo-16k, text-davinci-003
+>* Azure OpenAI Service
+>* Anthropic: Claude2, Claude-instant
+>* Hugging Face Hub (coming soon)
 
-* **Antropic**：Claude2、Claude-instant
-> We've got 1000 free trial credits available for all cloud service users to try out the Claude model.Visit [Dify.ai](https://dify.ai) and
-try it now.
+We provide the following free resources for registered Dify cloud users (sign up at [dify.ai](https://dify.ai)):
+* 1000 free Claude model queries to build Claude-powered apps
+* 200 free OpenAI queries to build OpenAI-based apps
 
-* **hugging face Hub**：Coming soon.
+**2. Visual orchestration:** Build an AI app in minutes by writing and debugging prompts visually.
+
+**3. Text embedding:** Fully automated text preprocessing embeds your data as context without complex concepts. Supports PDF, TXT, and syncing data from Notion, webpages, APIs.
+
+**4. API-based:**  Backend-as-a-service. Access web apps directly or integrate via APIs without complex backend setup.
+
+**5. Plugins:** Dify "Smart Chat" now supports first-party plugins like web browsing, Google search, Wikipedia to enable online lookup, analyzing web content, and explaining the AI's reasoning process conversationally.
+
+**6. Team workspaces:** Team members can join workspaces to collaboratively edit, manage, and use team AI apps.
+
+**7. Data labeling and improvement:**  Visually inspect AI app logs and improve data via labeling. Observe the AI's reasoning process to continuously enhance performance. (Coming soon)
+
+## Use cases
+* [Create an AI ChatBot with Business Data in Minutes.](https://docs.dify.ai/use-cases/create-an-ai-chatbot-with-business-data-in-minutes)
+* [How to Build an Notion AI Assistant Based on Your Own Notes?](https://docs.dify.ai/use-cases/build-an-notion-ai-assistant)
+* [Create a Midjoureny Prompt Bot Without Code in Just a Few Minutes.](https://docs.dify.ai/use-cases/create-a-midjoureny-prompt-bot-with-dify)
 
 ## Use Cloud Services
 

README_CN.md

@@ -7,9 +7,9 @@
 </p>
 
 
-[官方网站](https://dify.ai) • [文档](https://docs.dify.ai/v/zh-hans) • [Twitter](https://twitter.com/dify_ai) •  [Discord](https://discord.gg/FngNHpbcY7)
+####  [官方网站](https://dify.ai) •  [使用文档](https://docs.dify.ai/v/zh-hans)  · [部署文档](https://docs.dify.ai/v/zh-hans/getting-started/install-self-hosted)  ·  [FAQ](https://docs.dify.ai/v/zh-hans/getting-started/faq) • [Twitter](https://twitter.com/dify_ai) •  [Discord](https://discord.gg/FngNHpbcY7)
 
-**Dify** 是一个易用的 LLMOps 平台，旨在让更多人可以创建可持续运营的原生 AI 应用。Dify 提供多种类型应用的可视化编排，应用可开箱即用，也能以“后端即服务”的 API 提供服务。
+**Dify** 是一个易用的 LLMOps 平台，基于不同的大型语言模型能力，让更多人可以简易地创建可持续运营的原生 AI 应用。Dify 提供多种类型应用的可视化编排，应用可开箱即用，也能以“后端即服务”的 API 提供服务。
 
 通过 Dify 创建的应用包含了：
 
@@ -17,20 +17,35 @@
 - 一套 API 即可包含插件、上下文增强等能力，替你省下了后端代码的编写工作
 - 可视化的对应用进行数据分析，查阅日志或进行标注
 
-Dify 兼容 Langchain，这意味着我们将逐步支持多种 LLMs ，目前支持的模型供应商：
 
-* **OpenAI**：GPT4、GPT3.5-turbo、GPT3.5-turbo-16k、text-davinci-003 
 
-* **Azure OpenAI Service**
-* **Anthropic**：Claude2、Claude-instant
+## 核心能力
+1. **模型支持：** 你可以在 Dify 上选择基于不同模型的能力来开发你的 AI 应用。Dify 兼容 Langchain，这意味着我们将逐步支持多种 LLMs ，目前支持的模型供应商：
 
-> 我们为所有注册云端版的用户免费提供了 1000 次 Claude 模型的消息调用额度，登录 [dify.ai](https://cloud.dify.ai) 即可使用。
+> * **OpenAI**：GPT4、GPT3.5-turbo、GPT3.5-turbo-16k、text-davinci-003 
+> * **Azure OpenAI Service**
+> * **Anthropic**：Claude2、Claude-instant
+> * **Hugging Face Hub**（即将推出）
+
+我们为所有注册云端版的用户免费提供以下资源（登录 [dify.ai](https://cloud.dify.ai) 即可使用）：
+* 1000 次 Claude 模型的消息调用额度，用于创建基于 Claude 模型的 AI 应用
+* 200 次 OpenAI 模型的消息调用额度，用于创建基于 OpenAI 模型的 AI 应用
+2. **可视化编排 Prompt：** 通过界面化编写 prompt 并调试，只需几分钟即可发布一个 AI 应用。
+3. **文本 Embedding 处理（数据集）**：全自动完成文本预处理，使用你的数据作为上下文，无需理解晦涩的概念和技术处理。支持 PDF、txt 等文件格式，支持从 Notion、网页、API 同步数据。
+4. **基于 API 开发：** 后端即服务。您可以直接访问网页应用，也可以接入 API 集成到您的应用中，无需关注复杂的后端架构和部署过程。
+5. **插件能力：** Dify 「智聊」平台已支持网页浏览、Google 搜索、Wikipedia 查询等第一方插件，可在对话中实现联网搜索、分析网页内容、展示 AI 的推理过程。
+6. **团队 Workspace：** 团队成员可加入 Workspace 编辑、管理和使用团队内的 AI 应用。
+6. **数据标注与改进：** 可视化查阅 AI 应用日志并对数据进行改进标注，观测 AI 的推理过程，不断提高其性能。（Coming soon）
+ -----------------------------
+ ## Use cases
+ * [几分钟创建一个带有业务数据的官网 AI 智能客服](https://docs.dify.ai/v/zh-hans/use-cases/create-an-ai-chatbot-with-business-data-in-minutes)
+ * [构建一个 Notion AI 助手](https://docs.dify.ai/v/zh-hans/use-cases/build-an-notion-ai-assistant)
+ * [创建 Midjoureny 提示词机器人](https://docs.dify.ai/v/zh-hans/use-cases/create-a-midjoureny-prompt-word-robot-with-zero-code)
 
-* **Hugging Face Hub**（即将推出）
 
 ## 使用云服务
 
-访问 [Dify.ai](https://cloud.dify.ai)
+访问 [Dify.ai](https://cloud.dify.ai) 使用云端版。
 
 ## 安装社区版
 
@@ -65,12 +80,10 @@ docker compose up -d
 
 我们正在开发中的功能：
 
-- **数据集**，支持更多的数据集，例如同步 Notion 或网页的内容
-我们将支持更多的数据集，包括文本、网页，甚至 Notion 内容。用户可以根据自己的数据源构建 AI 应用程序。
-- **插件**，推出符合 ChatGPT 标准的插件，或使用 Dify 产生的插件
-我们将发布符合 ChatGPT 标准的插件，或者 Dify 自己的插件，以在应用程序中启用更多功能。
-- **开源模型**，例如采用 Llama 作为模型提供者，或进行进一步的微调
-我们将与优秀的开源模型如 Llama 合作，通过在我们的平台中提供它们作为模型选项，或使用它们进行进一步的微调。
+- **数据集**，支持更多的数据集，通过网页、API 同步内容。用户可以根据自己的数据源构建 AI 应用程序。
+- **插件**，我们将发布符合 ChatGPT 标准的插件，支持更多 Dify 自己的插件，支持用户自定义插件能力，以在应用程序中启用更多功能，例如以支持以目标为导向的分解推理任务。
+- **开源模型支持**，支持 Hugging face Hub 上的开源模型。例如采用 Llama 作为模型提供者，或进行进一步的微调
+我们将与优秀的开源模型合作，通过在我们的平台中提供它们作为模型选项，或使用它们进行进一步的微调。
 
 ## Q&A
 
@@ -84,11 +97,11 @@ A: 一个有价值的应用由 Prompt Engineering、上下文增强和 Fine-tune
 
 **Q: 如果要创建一个自己的应用，我需要准备什么？**
 
-A: 我们假定你已经有了 OpenAI API Key，如果没有请去注册一个。如果你已经有了一些内容可以作为训练上下文，就太好了。
+A: 我们假定你已经有了 OpenAI 或 Claude 等模型的 API Key，如果没有请去注册一个。如果你已经有了一些内容可以作为训练上下文，就太好了。
 
 **Q: 提供哪些界面语言？**
 
-A: 现已支持英文与中文，你可以为我们贡献语言包。
+A:  支持英文、中文，你可以为我们贡献语言包并提供维护支持。
 
 ## Star History
 

api/Dockerfile

-FROM langgenius/base:1.0.0-bullseye-slim as langgenius-api
+FROM langgenius/base:1.0.1-bullseye-slim as langgenius-api
 
 LABEL maintainer="takatost@gmail.com"
 

api/core/completion.py

@@ -388,7 +388,6 @@ And answer according to the language of the user's question.
             pre_prompt=pre_prompt,
             query=message.query,
             inputs=message.inputs,
-            chain_output=None,
             agent_execute_result=None,
             memory=None
         )

api/core/tool/dataset_retriever_tool.py

@@ -109,7 +109,11 @@ class DatasetRetrieverTool(BaseTool):
                                                     ).all()
 
             if segments:
-                for segment in segments:
+                index_node_id_to_position = {id: position for position, id in enumerate(index_node_ids)}
+                sorted_segments = sorted(segments,
+                                         key=lambda segment: index_node_id_to_position.get(segment.index_node_id,
+                                                                                           float('inf')))
+                for segment in sorted_segments:
                     if segment.answer:
                         document_context_list.append(f'question:{segment.content} \nanswer:{segment.answer}')
                     else:

web/Dockerfile

-FROM langgenius/base:1.0.0-bullseye-slim
+FROM langgenius/base:1.0.1-bullseye-slim
 
 LABEL maintainer="takatost@gmail.com"
 

web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css

 .preview {
   display: none;
-  position: fixed;
-  transform: translate(410px, -54px);
+  position: absolute;
+  transform: translate(480px, -54px);
   width: 280px;
   height: 360px;
   background: center center no-repeat;

web/app/components/app/overview/embedded/index.tsx

 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import copy from 'copy-to-clipboard'
 import style from './style.module.css'
 import Modal from '@/app/components/base/modal'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import copyStyle from '@/app/components/app/chat/copy-btn/style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
 import { useAppContext } from '@/context/app-context'
@@ -52,7 +52,6 @@ const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
   const { t } = useTranslation()
   const [option, setOption] = useState<Option>('iframe')
   const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false })
-  const [_, copy] = useCopyToClipboard()
 
   const { langeniusVersionInfo } = useAppContext()
   const isTestEnv = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'

web/app/components/app/overview/share-link.tsx

@@ -6,9 +6,9 @@ import {
   LinkIcon,
 } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import copy from 'copy-to-clipboard'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 
 import './style.css'
 
@@ -24,7 +24,6 @@ const ShareLinkModal: FC<IShareLinkProps> = ({
   onClose,
   onGenerateCode,
 }) => {
-  const [_, copy] = useCopyToClipboard()
   const [genLoading, setGenLoading] = useState(false)
   const { t } = useTranslation()
   return <Modal

web/app/components/datasets/create/step-two/index.tsx

@@ -27,6 +27,7 @@ import NotionIcon from '@/app/components/base/notion-icon'
 import Switch from '@/app/components/base/switch'
 import { MessageChatSquare } from '@/app/components/base/icons/src/public/common'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
+import { IS_CE_EDITION } from '@/config'
 
 type Page = DataSourceNotionPage & { workspace_id: string }
 
@@ -572,7 +573,7 @@ const StepTwo = ({
                 <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
               </div>
             )}
-            {indexType === IndexingType.QUALIFIED && (
+            {IS_CE_EDITION && indexType === IndexingType.QUALIFIED && (
               <div className='flex justify-between items-center mt-3 px-5 py-4 rounded-xl bg-gray-50 border border-gray-100'>
                 <div className='flex justify-center items-center w-8 h-8 rounded-lg bg-indigo-50'>
                   <MessageChatSquare className='w-4 h-4' />

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import useSWR, { useSWRConfig } from 'swr'
 import { useContext } from 'use-context-selector'
+import copy from 'copy-to-clipboard'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
@@ -16,7 +17,6 @@ import type { CreateApiKeyResponse } from '@/models/app'
 import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import I18n from '@/context/i18n'
 
 type ISecretKeyModalProps = {
@@ -39,7 +39,6 @@ const SecretKeyModal = ({
   const { data: apiKeysList } = useSWR(commonParams, fetchApiKeysList)
 
   const [delKeyID, setDelKeyId] = useState('')
-  const [_, copy] = useCopyToClipboard()
 
   const { locale } = useContext(I18n)
 

web/app/components/develop/template/template_chat.en.mdx

@@ -3,7 +3,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from
 
 # Chat App API
 
-For versatile conversational apps using a Q&A format, call the chat-messages API to initiate dialogue. Maintain ongoing conversations by passing the returned conversation_id. Response parameters and templates depend on LangGenius Prompt Eng. settings.
+For versatile conversational apps using a Q&A format, call the chat-messages API to initiate dialogue. Maintain ongoing conversations by passing the returned conversation_id. Response parameters and templates depend on LangGenius Prompt Eng. settings. **[Before you start, READ This !! What is a Bearer Token](https://swagger.io/docs/specification/authentication/bearer-authentication/)**
 
 <Heading
   url='/chat-messages'
@@ -38,7 +38,7 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
         - streaming returns. Implementation of streaming return based on SSE （**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）.
       </Property>
       <Property name='conversation_id' type='string' key='conversation_id'>
-       (Optional) Conversation ID: leave empty for first-time conversation; pass conversation_id from context to continue dialogue.
+       (Optional) Conversation ID: <strong>‼️ leave empty for first-time conversation ‼️</strong>; pass conversation_id from context to continue dialogue.
       </Property>
       <Property name='user' type='string' key='user'>
         The user identifier, defined by the developer, must ensure uniqueness within the app.

web/app/components/develop/template/template_chat.zh.mdx

@@ -3,7 +3,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # 对话型应用 API
 
-可用于大部分场景的对话型应用，采用一问一答模式与用户持续对话。要开始一个对话请调用 chat-messages 接口，通过继续传入返回的 conversation_id 可持续保持该会话。
+可用于大部分场景的对话型应用，采用一问一答模式与用户持续对话。要开始一个对话请调用 chat-messages 接口，通过继续传入返回的 conversation_id 可持续保持该会话。**[开始前请阅读 !! 什么是 Bearer Token ？](https://swagger.io/docs/specification/authentication/bearer-authentication/)**
 
 <Heading
   url='/chat-messages'
@@ -38,7 +38,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
         - streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。
       </Property>
       <Property name='conversation_id' type='string' key='conversation_id'>
-      （选填）会话标识符，首次对话可为空，如果要继续对话请传入上下文返回的 conversation_id
+      （选填）<strong>‼️ 会话标识符，首次对话为空 ‼️</strong>，如果要继续对话请传入上下文返回的 conversation_id
       </Property>
       <Property name='user' type='string' key='user'>
         用户标识，由开发者定义规则，需保证用户标识在应用内唯一。

web/app/components/explore/app-list/index.tsx

@@ -101,7 +101,7 @@ const Apps: FC = () => {
         }}
       >
         <nav
-          className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10grow shrink-0`}>
+          className={`${s.appList} grid content-start gap-4 px-12 shrink-0`}>
           {currList.map(app => (
             <AppCard
               key={app.app_id}

web/app/components/explore/app-list/style.module.css

@@ -6,6 +6,10 @@
   text-fill-color: transparent;
 }
 
+.appList {
+  grid-template-columns: repeat(1, minmax(0, 1fr))
+}
+
 @media (min-width: 1624px) {
   .appList {
     grid-template-columns: repeat(4, minmax(0, 1fr))

web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

 'use client'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { t } from 'i18next'
+import copy from 'copy-to-clipboard'
 import s from './index.module.css'
 import Tooltip from '@/app/components/base/tooltip'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import { randomString } from '@/app/components/app-sidebar/basic'
 
 type IInvitationLinkProps = {
@@ -15,12 +15,11 @@ const InvitationLink = ({
 }: IInvitationLinkProps) => {
   const [isCopied, setIsCopied] = useState(false)
   const selector = useRef(`invite-link-${randomString(4)}`)
-  const [_, copy] = useCopyToClipboard()
 
   const copyHandle = useCallback(() => {
     copy(value)
     setIsCopied(true)
-  }, [value, copy])
+  }, [value])
 
   useEffect(() => {
     if (isCopied) {

web/app/components/share/text-generation/result/header.tsx

@@ -3,13 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ClipboardDocumentIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
-import { Feedbacktype } from '@/app/components/app/chat'
+import copy from 'copy-to-clipboard'
+import type { Feedbacktype } from '@/app/components/app/chat/type'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
 
-// import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
-import copy from 'copy-to-clipboard'
 type IResultHeaderProps = {
   result: string
   showFeedback: boolean
@@ -49,7 +48,7 @@ const Header: FC<IResultHeaderProps> = ({
             <div
               onClick={() => {
                 onFeedback({
-                  rating: null
+                  rating: null,
                 })
               }}
               className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-primary-600 border border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200'>
@@ -66,7 +65,7 @@ const Header: FC<IResultHeaderProps> = ({
             <div
               onClick={() => {
                 onFeedback({
-                  rating: null
+                  rating: null,
                 })
               }}
               className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-red-600 border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200'>
@@ -84,7 +83,7 @@ const Header: FC<IResultHeaderProps> = ({
               <div
                 onClick={() => {
                   onFeedback({
-                    rating: 'like'
+                    rating: 'like',
                   })
                 }}
                 className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
@@ -98,7 +97,7 @@ const Header: FC<IResultHeaderProps> = ({
               <div
                 onClick={() => {
                   onFeedback({
-                    rating: 'dislike'
+                    rating: 'dislike',
                   })
                 }}
                 className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>

web/hooks/use-copy-to-clipboard.ts

-import { useCallback, useState } from 'react'
-import writeText from 'copy-to-clipboard'
-
-type CopiedValue = string | null
-type CopyFn = (text: string) => Promise<boolean>
-
-function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
-
-  const copy: CopyFn = useCallback(async (text: string) => {
-    try {
-      writeText(text)
-      setCopiedText(text)
-      return true
-    }
-    catch (error) {
-      console.warn('Copy failed', error)
-      setCopiedText(null)
-      return false
-    }
-  }, [])
-
-  return [copiedText, copy]
-}
-
-export default useCopyToClipboard

web/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint",
     "fix": "next lint --fix",
     "eslint-fix": "eslint --fix",
-    "prepare": "cd ../ && husky install ./web/.husky",
+    "prepare": "cd ../ && node -e \"if (process.env.NODE_ENV !== 'production'){process.exit(1)} \" || husky install ./web/.husky",
     "gen-icons": "node ./app/components/base/icons/script.js",
     "uglify-embed": "node ./bin/uglify-embed"
   },
@@ -24,17 +24,8 @@
     "@next/mdx": "^13.2.4",
     "@sentry/react": "^7.54.0",
     "@sentry/utils": "^7.54.0",
-    "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/crypto-js": "^4.1.1",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "18.15.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@types/react-slider": "^1.3.1",
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
     "ahooks": "^3.7.5",
     "autoprefixer": "^10.4.14",
     "classnames": "^2.3.2",
@@ -44,14 +35,13 @@
     "echarts": "^5.4.1",
     "echarts-for-react": "^3.0.2",
     "emoji-mart": "^5.5.2",
-    "eslint": "8.36.0",
-    "husky": "^8.0.3",
     "i18next": "^22.4.13",
     "i18next-resources-to-backend": "^1.1.3",
     "immer": "^9.0.19",
     "js-audio-recorder": "^1.0.7",
     "js-cookie": "^3.0.1",
     "katex": "^0.16.7",
+    "lamejs": "1.2.0",
     "lodash-es": "^4.17.21",
     "negotiator": "^0.6.3",
     "next": "13.3.1",
@@ -75,30 +65,40 @@
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "sass": "^1.61.0",
     "scheduler": "^0.23.0",
     "server-only": "^0.0.1",
     "sortablejs": "^1.15.0",
     "swr": "^2.1.0",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.3",
     "typescript": "4.9.5",
-    "use-context-selector": "^1.4.1",
-    "lamejs": "1.2.0"
+    "use-context-selector": "^1.4.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.36.0",
     "@faker-js/faker": "^7.6.0",
     "@rgrove/parse-xml": "^4.1.0",
+    "@types/crypto-js": "^4.1.1",
     "@types/js-cookie": "^3.0.3",
+    "@types/lodash-es": "^4.17.7",
+    "@types/node": "18.15.0",
     "@types/negotiator": "^0.6.1",
     "@types/qs": "^6.9.7",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@types/react-slider": "^1.3.1",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
     "@types/recordrtc": "^5.6.11",
     "@types/sortablejs": "^1.15.1",
+    "eslint": "8.36.0",
     "eslint-config-next": "^13.4.7",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "miragejs": "^0.1.47",
     "postcss": "^8.4.21",
+    "sass": "^1.61.0",
     "uglify-js": "^3.17.4"
   },
   "lint-staged": {