style: refactor context

This reverts commit a75cef2c3b.

.devcontainer/post_create_command.sh

@@ -1,11 +1,12 @@
 #!/bin/bash
 
-cd web && npm install
+npm add -g pnpm@9.12.2
+cd web && pnpm install
 pipx install poetry
 
 echo 'alias start-api="cd /workspaces/dify/api && poetry run python -m flask run --host 0.0.0.0 --port=5001 --debug"' >> ~/.bashrc
 echo 'alias start-worker="cd /workspaces/dify/api && poetry run python -m celery -A app.celery worker -P gevent -c 1 --loglevel INFO -Q dataset,generation,mail,ops_trace,app_deletion"' >> ~/.bashrc
-echo 'alias start-web="cd /workspaces/dify/web && npm run dev"' >> ~/.bashrc
+echo 'alias start-web="cd /workspaces/dify/web && pnpm dev"' >> ~/.bashrc
 echo 'alias start-containers="cd /workspaces/dify/docker && docker-compose -f docker-compose.middleware.yaml -p dify up -d"' >> ~/.bashrc
 
 source /home/vscode/.bashrc

.github/workflows/style.yml

@@ -76,16 +76,16 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         with:
           node-version: 20
-          cache: yarn
+          cache: pnpm
           cache-dependency-path: ./web/package.json
 
       - name: Web dependencies
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Web style check
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: yarn run lint
+        run: pnpm run lint
 
 
   superlinter:

.github/workflows/tool-test-sdks.yaml

@@ -32,10 +32,10 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: ''
-          cache-dependency-path: 'yarn.lock'
+          cache-dependency-path: 'pnpm-lock.yaml'
 
       - name: Install Dependencies
-        run: yarn install
+        run: pnpm install
 
       - name: Test
-        run: yarn test
+        run: pnpm test

.github/workflows/translate-i18n-base-on-english.yml

@@ -38,11 +38,11 @@ jobs:
 
       - name: Install dependencies
         if: env.FILES_CHANGED == 'true'
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Run npm script
         if: env.FILES_CHANGED == 'true'
-        run: npm run auto-gen-i18n
+        run: pnpm run auto-gen-i18n
 
       - name: Create Pull Request
         if: env.FILES_CHANGED == 'true'

.github/workflows/web-tests.yml

@@ -34,13 +34,13 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         with:
           node-version: 20
-          cache: yarn
+          cache: pnpm
           cache-dependency-path: ./web/package.json
 
       - name: Install dependencies
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Run tests
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: yarn test
+        run: pnpm test

.gitignore

@@ -193,3 +193,6 @@ api/.vscode
 
 .idea/
 .vscode
+
+# pnpm
+/.pnpm-store

api/core/helper/ssrf_proxy.py

@@ -54,10 +54,12 @@ def make_request(method, url, max_retries=SSRF_DEFAULT_MAX_RETRIES, **kwargs):
             if response.status_code not in STATUS_FORCELIST:
                 return response
             else:
-                logging.warning(f"Received status code {response.status_code} for URL {url} which is in the force list")
+                logging.warning(
+                    f"Received status code {response.status_code} for URL {url} which is in the force list")
 
         except httpx.RequestError as e:
-            logging.warning(f"Request to URL {url} failed on attempt {retries + 1}: {e}")
+            logging.warning(
+                f"Request to URL {url} failed on attempt {retries + 1}: {e}")
 
         retries += 1
         if retries <= max_retries:

api/core/rag/datasource/vdb/lindorm/lindorm_vector.py

@@ -20,7 +20,8 @@ from extensions.ext_redis import redis_client
 from models.dataset import Dataset
 
 logger = logging.getLogger(__name__)
-logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s")
+logging.basicConfig(level=logging.INFO,
+                    format="%(asctime)s - %(levelname)s - %(message)s")
 logging.getLogger("lindorm").setLevel(logging.WARN)
 
 
@@ -76,7 +77,8 @@ class LindormVectorStore(BaseVector):
         @retry(stop=stop_after_attempt(3), wait=wait_fixed(60))
         def __fetch_existing_ids(batch_ids: list[str]) -> set[str]:
             try:
-                existing_docs = self._client.mget(index=self._collection_name, body={"ids": batch_ids}, _source=False)
+                existing_docs = self._client.mget(index=self._collection_name, body={
+                                                  "ids": batch_ids}, _source=False)
                 return {doc["_id"] for doc in existing_docs["docs"] if doc["found"]}
             except Exception as e:
                 logger.exception(f"Error fetching batch {batch_ids}: {e}")
@@ -88,7 +90,8 @@ class LindormVectorStore(BaseVector):
                 existing_docs = self._client.mget(
                     body={
                         "docs": [
-                            {"_index": self._collection_name, "_id": id, "routing": routing}
+                            {"_index": self._collection_name,
+                                "_id": id, "routing": routing}
                             for id, routing in zip(batch_ids, route_ids)
                         ]
                     },
@@ -117,7 +120,8 @@ class LindormVectorStore(BaseVector):
         for ids_batch, texts_batch, metadatas_batch in zip(
             batch(ids, bulk_size),
             batch(texts, bulk_size),
-            batch(metadatas, bulk_size) if metadatas is not None else batch([None] * len(ids), bulk_size),
+            batch(metadatas, bulk_size) if metadatas is not None else batch(
+                [None] * len(ids), bulk_size),
         ):
             existing_ids_set = __fetch_existing_ids(ids_batch)
             for text, metadata, doc_id in zip(texts_batch, metadatas_batch, ids_batch):
@@ -139,7 +143,8 @@ class LindormVectorStore(BaseVector):
                 "_id": uuids[i],
                 "_source": {
                     Field.CONTENT_KEY.value: documents[i].page_content,
-                    Field.VECTOR.value: embeddings[i],  # Make sure you pass an array here
+                    # Make sure you pass an array here
+                    Field.VECTOR.value: embeddings[i],
                     Field.METADATA_KEY.value: documents[i].metadata,
                 },
             }
@@ -148,7 +153,8 @@ class LindormVectorStore(BaseVector):
         self.refresh()
 
     def get_ids_by_metadata_field(self, key: str, value: str):
-        query = {"query": {"term": {f"{Field.METADATA_KEY.value}.{key}.keyword": value}}}
+        query = {
+            "query": {"term": {f"{Field.METADATA_KEY.value}.{key}.keyword": value}}}
         response = self._client.search(index=self._collection_name, body=query)
         if response["hits"]["hits"]:
             return [hit["_id"] for hit in response["hits"]["hits"]]
@@ -157,7 +163,8 @@ class LindormVectorStore(BaseVector):
 
     def delete_by_metadata_field(self, key: str, value: str):
         query_str = {"query": {"match": {f"metadata.{key}": f"{value}"}}}
-        results = self._client.search(index=self._collection_name, body=query_str)
+        results = self._client.search(
+            index=self._collection_name, body=query_str)
         ids = [hit["_id"] for hit in results["hits"]["hits"]]
         if ids:
             self.delete_by_ids(ids)
@@ -167,15 +174,18 @@ class LindormVectorStore(BaseVector):
             if self._client.exists(index=self._collection_name, id=id):
                 self._client.delete(index=self._collection_name, id=id)
             else:
-                logger.warning(f"DELETE BY ID: ID {id} does not exist in the index.")
+                logger.warning(
+                    f"DELETE BY ID: ID {id} does not exist in the index.")
 
     def delete(self) -> None:
         try:
             if self._client.indices.exists(index=self._collection_name):
-                self._client.indices.delete(index=self._collection_name, params={"timeout": 60})
+                self._client.indices.delete(
+                    index=self._collection_name, params={"timeout": 60})
                 logger.info("Delete index success")
             else:
-                logger.warning(f"Index '{self._collection_name}' does not exist. No deletion performed.")
+                logger.warning(
+                    f"Index '{self._collection_name}' does not exist. No deletion performed.")
         except Exception as e:
             logger.exception(f"Error occurred while deleting the index: {e}")
             raise e
@@ -197,9 +207,11 @@ class LindormVectorStore(BaseVector):
             raise ValueError("All elements in query_vector should be floats")
 
         top_k = kwargs.get("top_k", 10)
-        query = default_vector_search_query(query_vector=query_vector, k=top_k, **kwargs)
+        query = default_vector_search_query(
+            query_vector=query_vector, k=top_k, **kwargs)
         try:
-            response = self._client.search(index=self._collection_name, body=query)
+            response = self._client.search(
+                index=self._collection_name, body=query)
         except Exception as e:
             logger.exception(f"Error executing search: {e}")
             raise
@@ -244,7 +256,8 @@ class LindormVectorStore(BaseVector):
             filters=filters,
             routing=routing,
         )
-        response = self._client.search(index=self._collection_name, body=full_text_query)
+        response = self._client.search(
+            index=self._collection_name, body=full_text_query)
         docs = []
         for hit in response["hits"]["hits"]:
             docs.append(
@@ -262,7 +275,8 @@ class LindormVectorStore(BaseVector):
         with redis_client.lock(lock_name, timeout=20):
             collection_exist_cache_key = f"vector_indexing_{self._collection_name}"
             if redis_client.get(collection_exist_cache_key):
-                logger.info(f"Collection {self._collection_name} already exists.")
+                logger.info(
+                    f"Collection {self._collection_name} already exists.")
                 return
             if self._client.indices.exists(index=self._collection_name):
                 logger.info("{self._collection_name.lower()} already exists.")
@@ -281,10 +295,13 @@ class LindormVectorStore(BaseVector):
             hnsw_ef_construction = kwargs.pop("hnsw_ef_construction", 500)
             ivfpq_m = kwargs.pop("ivfpq_m", dimension)
             nlist = kwargs.pop("nlist", 1000)
-            centroids_use_hnsw = kwargs.pop("centroids_use_hnsw", True if nlist >= 5000 else False)
+            centroids_use_hnsw = kwargs.pop(
+                "centroids_use_hnsw", True if nlist >= 5000 else False)
             centroids_hnsw_m = kwargs.pop("centroids_hnsw_m", 24)
-            centroids_hnsw_ef_construct = kwargs.pop("centroids_hnsw_ef_construct", 500)
+            centroids_hnsw_ef_construct = kwargs.pop(
-            centroids_hnsw_ef_search = kwargs.pop("centroids_hnsw_ef_search", 100)
+                "centroids_hnsw_ef_construct", 500)
+            centroids_hnsw_ef_search = kwargs.pop(
+                "centroids_hnsw_ef_search", 100)
             mapping = default_text_mapping(
                 dimension,
                 method_name,
@@ -303,7 +320,8 @@ class LindormVectorStore(BaseVector):
                 centroids_hnsw_ef_search=centroids_hnsw_ef_search,
                 **kwargs,
             )
-            self._client.indices.create(index=self._collection_name.lower(), body=mapping)
+            self._client.indices.create(
+                index=self._collection_name.lower(), body=mapping)
             redis_client.set(collection_exist_cache_key, 1, ex=3600)
             # logger.info(f"create index success: {self._collection_name}")
 
@@ -364,7 +382,8 @@ def default_text_mapping(dimension: int, method_name: str, **kwargs: Any) -> dic
     }
 
     if excludes_from_source:
-        mapping["mappings"]["_source"] = {"excludes": excludes_from_source}  # e.g. {"excludes": ["vector_field"]}
+        # e.g. {"excludes": ["vector_field"]}
+        mapping["mappings"]["_source"] = {"excludes": excludes_from_source}
 
     if method_name == "ivfpq" and routing_field is not None:
         mapping["settings"]["index"]["knn_routing"] = True
@@ -405,7 +424,8 @@ def default_text_search_query(
     # build complex search_query when either of must/must_not/should/filter is specified
     if must:
         if not isinstance(must, list):
-            raise RuntimeError(f"unexpected [must] clause with {type(filters)}")
+            raise RuntimeError(
+                f"unexpected [must] clause with {type(filters)}")
         if query_clause not in must:
             must.append(query_clause)
     else:
@@ -415,19 +435,22 @@ def default_text_search_query(
 
     if must_not:
         if not isinstance(must_not, list):
-            raise RuntimeError(f"unexpected [must_not] clause with {type(filters)}")
+            raise RuntimeError(
+                f"unexpected [must_not] clause with {type(filters)}")
         boolean_query["must_not"] = must_not
 
     if should:
         if not isinstance(should, list):
-            raise RuntimeError(f"unexpected [should] clause with {type(filters)}")
+            raise RuntimeError(
+                f"unexpected [should] clause with {type(filters)}")
         boolean_query["should"] = should
         if minimum_should_match != 0:
             boolean_query["minimum_should_match"] = minimum_should_match
 
     if filters:
         if not isinstance(filters, list):
-            raise RuntimeError(f"unexpected [filter] clause with {type(filters)}")
+            raise RuntimeError(
+                f"unexpected [filter] clause with {type(filters)}")
         boolean_query["filter"] = filters
 
     search_query = {"size": k, "query": {"bool": boolean_query}}
@@ -471,8 +494,10 @@ def default_vector_search_query(
 
     if filters is not None:
         # when using filter, transform filter from List[Dict] to Dict as valid format
-        filters = {"bool": {"must": filters}} if len(filters) > 1 else filters[0]
+        filters = {"bool": {"must": filters}} if len(
-        search_query["query"]["knn"][vector_field]["filter"] = filters  # filter should be Dict
+            filters) > 1 else filters[0]
+        # filter should be Dict
+        search_query["query"]["knn"][vector_field]["filter"] = filters
         if filter_type:
             final_ext["lvector"]["filter_type"] = filter_type
 
@@ -489,7 +514,8 @@ class LindormVectorStoreFactory(AbstractVectorFactory):
         else:
             dataset_id = dataset.id
             collection_name = Dataset.gen_collection_name_by_id(dataset_id)
-            dataset.index_struct = json.dumps(self.gen_index_struct_dict(VectorType.LINDORM, collection_name))
+            dataset.index_struct = json.dumps(
+                self.gen_index_struct_dict(VectorType.LINDORM, collection_name))
         lindorm_config = LindormVectorStoreConfig(
             hosts=dify_config.LINDORM_URL,
             username=dify_config.LINDORM_USERNAME,

api/core/tools/provider/builtin/aliyuque/tools/describe_document_content.py

@@ -38,7 +38,6 @@ class AliYuqueDescribeDocumentContentTool(AliYuqueTool, BuiltinTool):
         book_id = index_page.get("data", {}).get("book", {}).get("id")
         if not book_id:
             raise Exception(f"can not parse book_id from {index_page}")
-
         new_params["book_id"] = book_id
         new_params["id"] = doc_id
         data = self.request("GET", token, new_params, "/api/v2/repos/{book_id}/docs/{id}")

api/core/workflow/nodes/question_classifier/question_classifier_node.py

@@ -49,11 +49,13 @@ class QuestionClassifierNode(LLMNode):
         variable_pool = self.graph_runtime_state.variable_pool
 
         # extract variables
-        variable = variable_pool.get(node_data.query_variable_selector) if node_data.query_variable_selector else None
+        variable = variable_pool.get(
+            node_data.query_variable_selector) if node_data.query_variable_selector else None
         query = variable.value if variable else None
         variables = {"query": query}
         # fetch model config
-        model_instance, model_config = self._fetch_model_config(node_data.model)
+        model_instance, model_config = self._fetch_model_config(
+            node_data.model)
         # fetch memory
         memory = self._fetch_memory(
             node_data_memory=node_data.memory,
@@ -61,7 +63,8 @@ class QuestionClassifierNode(LLMNode):
         )
         # fetch instruction
         node_data.instruction = node_data.instruction or ""
-        node_data.instruction = variable_pool.convert_template(node_data.instruction).text
+        node_data.instruction = variable_pool.convert_template(
+            node_data.instruction).text
 
         files: Sequence[File] = (
             self._fetch_files(
@@ -184,12 +187,15 @@ class QuestionClassifierNode(LLMNode):
         variable_mapping = {"query": node_data.query_variable_selector}
         variable_selectors = []
         if node_data.instruction:
-            variable_template_parser = VariableTemplateParser(template=node_data.instruction)
+            variable_template_parser = VariableTemplateParser(
-            variable_selectors.extend(variable_template_parser.extract_variable_selectors())
+                template=node_data.instruction)
+            variable_selectors.extend(
+                variable_template_parser.extract_variable_selectors())
         for variable_selector in variable_selectors:
             variable_mapping[variable_selector.variable] = variable_selector.value_selector
 
-        variable_mapping = {node_id + "." + key: value for key, value in variable_mapping.items()}
+        variable_mapping = {node_id + "." + key: value for key,
+                            value in variable_mapping.items()}
 
         return variable_mapping
 
@@ -210,7 +216,8 @@ class QuestionClassifierNode(LLMNode):
         context: Optional[str],
     ) -> int:
         prompt_transform = AdvancedPromptTransform(with_variable_tmpl=True)
-        prompt_template = self._get_prompt_template(node_data, query, None, 2000)
+        prompt_template = self._get_prompt_template(
+            node_data, query, None, 2000)
         prompt_messages = prompt_transform.get_prompt(
             prompt_template=prompt_template,
             inputs={},
@@ -223,13 +230,15 @@ class QuestionClassifierNode(LLMNode):
         )
         rest_tokens = 2000
 
-        model_context_tokens = model_config.model_schema.model_properties.get(ModelPropertyKey.CONTEXT_SIZE)
+        model_context_tokens = model_config.model_schema.model_properties.get(
+            ModelPropertyKey.CONTEXT_SIZE)
         if model_context_tokens:
             model_instance = ModelInstance(
                 provider_model_bundle=model_config.provider_model_bundle, model=model_config.model
             )
 
-            curr_message_tokens = model_instance.get_llm_num_tokens(prompt_messages)
+            curr_message_tokens = model_instance.get_llm_num_tokens(
+                prompt_messages)
 
             max_tokens = 0
             for parameter_rule in model_config.model_schema.parameter_rules:
@@ -270,7 +279,8 @@ class QuestionClassifierNode(LLMNode):
         prompt_messages: list[LLMNodeChatModelMessage] = []
         if model_mode == ModelMode.CHAT:
             system_prompt_messages = LLMNodeChatModelMessage(
-                role=PromptMessageRole.SYSTEM, text=QUESTION_CLASSIFIER_SYSTEM_PROMPT.format(histories=memory_str)
+                role=PromptMessageRole.SYSTEM, text=QUESTION_CLASSIFIER_SYSTEM_PROMPT.format(
+                    histories=memory_str)
             )
             prompt_messages.append(system_prompt_messages)
             user_prompt_message_1 = LLMNodeChatModelMessage(
@@ -311,4 +321,5 @@ class QuestionClassifierNode(LLMNode):
             )
 
         else:
-            raise InvalidModelTypeError(f"Model mode {model_mode} not support.")
+            raise InvalidModelTypeError(
+                f"Model mode {model_mode} not support.")

api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_executor.py

@@ -68,7 +68,8 @@ def test_executor_with_json_body_and_object_variable():
         system_variables={},
         user_inputs={},
     )
-    variable_pool.add(["pre_node_id", "object"], {"name": "John Doe", "age": 30, "email": "john@example.com"})
+    variable_pool.add(["pre_node_id", "object"], {
+                      "name": "John Doe", "age": 30, "email": "john@example.com"})
 
     # Prepare the node data
     node_data = HttpRequestNodeData(
@@ -102,7 +103,8 @@ def test_executor_with_json_body_and_object_variable():
     assert executor.url == "https://api.example.com/data"
     assert executor.headers == {"Content-Type": "application/json"}
     assert executor.params == {}
-    assert executor.json == {"name": "John Doe", "age": 30, "email": "john@example.com"}
+    assert executor.json == {"name": "John Doe",
+                             "age": 30, "email": "john@example.com"}
     assert executor.data is None
     assert executor.files is None
     assert executor.content is None
@@ -123,7 +125,8 @@ def test_executor_with_json_body_and_nested_object_variable():
         system_variables={},
         user_inputs={},
     )
-    variable_pool.add(["pre_node_id", "object"], {"name": "John Doe", "age": 30, "email": "john@example.com"})
+    variable_pool.add(["pre_node_id", "object"], {
+                      "name": "John Doe", "age": 30, "email": "john@example.com"})
 
     # Prepare the node data
     node_data = HttpRequestNodeData(
@@ -157,7 +160,8 @@ def test_executor_with_json_body_and_nested_object_variable():
     assert executor.url == "https://api.example.com/data"
     assert executor.headers == {"Content-Type": "application/json"}
     assert executor.params == {}
-    assert executor.json == {"object": {"name": "John Doe", "age": 30, "email": "john@example.com"}}
+    assert executor.json == {"object": {
+        "name": "John Doe", "age": 30, "email": "john@example.com"}}
     assert executor.data is None
     assert executor.files is None
     assert executor.content is None

api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py

@@ -23,7 +23,8 @@ def test_plain_text_to_dict():
     assert _plain_text_to_dict("aa\n cc:") == {"aa": "", "cc": ""}
     assert _plain_text_to_dict("aa:bb\n cc:dd") == {"aa": "bb", "cc": "dd"}
     assert _plain_text_to_dict("aa:bb\n cc:dd\n") == {"aa": "bb", "cc": "dd"}
-    assert _plain_text_to_dict("aa:bb\n\n cc : dd\n\n") == {"aa": "bb", "cc": "dd"}
+    assert _plain_text_to_dict("aa:bb\n\n cc : dd\n\n") == {
+        "aa": "bb", "cc": "dd"}
 
 
 def test_http_request_node_binary_file(monkeypatch):
@@ -189,7 +190,8 @@ def test_http_request_node_form_with_file(monkeypatch):
 
     def attr_checker(*args, **kwargs):
         assert kwargs["data"] == {"name": "test"}
-        assert kwargs["files"] == {"file": (None, b"test", "application/octet-stream")}
+        assert kwargs["files"] == {
+            "file": (None, b"test", "application/octet-stream")}
         return httpx.Response(200, content=b"")
 
     monkeypatch.setattr(

docker/docker-compose.yaml

@@ -318,6 +318,8 @@ services:
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
       APP_API_URL: ${APP_API_URL:-}
+      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-}
+      MARKETPLACE_URL: ${MARKETPLACE_URL:-}
       SENTRY_DSN: ${WEB_SENTRY_DSN:-}
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
       TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}

sdks/nodejs-client/babel.config.json

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ]
-}

web/.env.example

@@ -10,6 +10,10 @@ NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
 # console or api domain.
 # example: http://udify.app/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
+# The APIFREX for MARKETPLACE
+NEXT_PUBLIC_MARKETPLACE_API_PREFIX=http://localhost:5002/api
+# The URL for MARKETPLACE
+NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=
 
 # SENTRY
 NEXT_PUBLIC_SENTRY_DSN=
@@ -25,3 +29,6 @@ NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS=60000
 
 # CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
 NEXT_PUBLIC_CSP_WHITELIST=
+
+# Github Access Token, used for invoking Github API
+NEXT_PUBLIC_GITHUB_ACCESS_TOKEN=

web/.eslintignore

@@ -1,7 +0,0 @@
-/**/node_modules/*
-node_modules/
-
-dist/
-build/
-out/
-.next/

web/.eslintrc.json

@@ -1,31 +0,0 @@
-{
-  "extends": [
-    "next",
-    "@antfu",
-    "plugin:storybook/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/consistent-type-definitions": [
-      "error",
-      "type"
-    ],
-    "@typescript-eslint/no-var-requires": "off",
-    "no-console": "off",
-    "indent": "off",
-    "@typescript-eslint/indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1,
-        "flatTernaryExpressions": false,
-        "ignoredNodes": [
-          "PropertyDefinition[decorators]",
-          "TSUnionType",
-          "FunctionExpression[params]:has(Identifier[decorators])"
-        ]
-      }
-    ],
-    "react-hooks/exhaustive-deps": "warn",
-    "react/display-name": "warn"
-  }
-}

web/.gitignore

@@ -44,10 +44,9 @@ package-lock.json
 .pnp.cjs
 .pnp.loader.mjs
 .yarn/
-.yarnrc.yml
-
-# pmpm
-pnpm-lock.yaml
 
 .favorites.json
+
+# storybook
+/storybook-static
 *storybook.log

web/.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env bash
-. "$(dirname -- "$0")/_/husky.sh"
-
 # get the list of modified files
 files=$(git diff --cached --name-only)
 
@@ -50,7 +47,7 @@ fi
 if $web_modified; then
     echo "Running ESLint on web module"
     cd ./web || exit 1
-    npx lint-staged
+    lint-staged
 
     echo "Running unit tests check"
     modified_files=$(git diff --cached --name-only -- utils | grep -v '\.spec\.ts$' || true)
@@ -63,7 +60,7 @@ if $web_modified; then
             # check if the test file exists
             if [ -f "../$test_file" ]; then
                 echo "Detected changes in $file, running corresponding unit tests..."
-                npm run test "../$test_file"
+                pnpm run test "../$test_file"
 
                 if [ $? -ne 0 ]; then
                     echo "Unit tests failed. Please fix the errors before committing."

web/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Preview } from '@storybook/react'
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import I18nServer from '../app/components/i18n-server'
 
 import '../app/styles/globals.css'
@@ -16,12 +16,12 @@ export const decorators = [
     defaultTheme: 'light',
     attributeName: 'data-theme',
   }),
-    Story => {
+  (Story) => {
     return <I18nServer>
       <Story />
     </I18nServer>
-    }
+  },
-  ];
+]
 
 const preview: Preview = {
   parameters: {

web/.vscode/settings.example.json

@@ -21,5 +21,6 @@
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "npm.packageManager": "pnpm"
 }

web/Dockerfile

@@ -6,6 +6,9 @@ LABEL maintainer="takatost@gmail.com"
 # RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
 
 RUN apk add --no-cache tzdata
+RUN npm install -g pnpm@9.12.2
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
 
 
 # install packages
@@ -14,12 +17,12 @@ FROM base AS packages
 WORKDIR /app/web
 
 COPY package.json .
-COPY yarn.lock .
+COPY pnpm-lock.yaml .
 
 # if you located in China, you can use taobao registry to speed up
-# RUN yarn install --frozen-lockfile --registry https://registry.npmmirror.com/
+# RUN pnpm install --frozen-lockfile --registry https://registry.npmmirror.com/
 
-RUN yarn install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
 
 # build resources
 FROM base AS builder
@@ -27,7 +30,7 @@ WORKDIR /app/web
 COPY --from=packages /app/web/ .
 COPY . .
 
-RUN yarn build
+RUN pnpm build
 
 
 # production stage
@@ -38,6 +41,8 @@ ENV EDITION=SELF_HOSTED
 ENV DEPLOY_ENV=PRODUCTION
 ENV CONSOLE_API_URL=http://127.0.0.1:5001
 ENV APP_API_URL=http://127.0.0.1:5001
+ENV MARKETPLACE_API_URL=http://127.0.0.1:5001
+ENV MARKETPLACE_URL=http://127.0.0.1:5001
 ENV PORT=3000
 ENV NEXT_TELEMETRY_DISABLED=1
 
@@ -57,8 +62,7 @@ COPY docker/entrypoint.sh ./entrypoint.sh
 
 
 # global runtime packages
-RUN yarn global add pm2 \
+RUN pnpm add -g pm2 \
-    && yarn cache clean \
     && mkdir /.pm2 \
     && chown -R 1001:0 /.pm2 /app/web \
     && chmod -R g=u /.pm2 /app/web

web/README.md

@@ -6,14 +6,12 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ### Run by source code
 
-To start the web frontend service, you will need [Node.js v18.x (LTS)](https://nodejs.org/en) and [NPM version 8.x.x](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/).
+To start the web frontend service, you will need [Node.js v18.x (LTS)](https://nodejs.org/en) and [pnpm version 9.12.2](https://pnpm.io).
 
 First, install the dependencies:
 
 ```bash
-npm install
+pnpm install
-# or
-yarn install --frozen-lockfile
 ```
 
 Then, configure the environment variables. Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Modify the values of these environment variables according to your requirements:
@@ -43,9 +41,7 @@ NEXT_PUBLIC_SENTRY_DSN=
 Finally, run the development server:
 
 ```bash
-npm run dev
+pnpm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -59,19 +55,19 @@ You can start editing the file under folder `app`. The page auto-updates as you
 First, build the app for production:
 
 ```bash
-npm run build
+pnpm run build
 ```
 
 Then, start the server:
 
 ```bash
-npm run start
+pnpm run start
 ```
 
 If you want to customize the host and port:
 
 ```bash
-npm run start --port=3001 --host=0.0.0.0
+pnpm run start --port=3001 --host=0.0.0.0
 ```
 
 ## Storybook
@@ -81,7 +77,7 @@ This project uses [Storybook](https://storybook.js.org/) for UI component develo
 To start the storybook server, run:
 
 ```bash
-yarn storybook
+pnpm storybook
 ```
 
 Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
@@ -99,7 +95,7 @@ You can create a test file with a suffix of `.spec` beside the file that to be t
 Run test:
 
 ```bash
-npm run test
+pnpm run test
 ```
 
 If you are not familiar with writing tests, here is some code to refer to:

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 
-export type IProps = {
+export interface IProps {
   params: { appId: string }
 }
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/develop/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { type Locale } from '@/i18n'
+import type { Locale } from '@/i18n'
 import DevelopMain from '@/app/components/develop'
 
 export type IDevelopProps = {

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import cn from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 
-type Props = {
+interface Props {
   className?: string
   label: string
   labelClassName?: string

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -8,12 +8,11 @@ import { useBoolean } from 'ahooks'
 import {
   Cog8ToothIcon,
   // CommandLineIcon,
-  Squares2X2Icon,
-  // eslint-disable-next-line sort-imports
-  PuzzlePieceIcon,
   DocumentTextIcon,
   PaperClipIcon,
+  PuzzlePieceIcon,
   QuestionMarkCircleIcon,
+  Squares2X2Icon,
 } from '@heroicons/react/24/outline'
 import {
   Cog8ToothIcon as Cog8ToothSolidIcon,

web/app/(commonLayout)/datasets/Container.tsx

@@ -5,7 +5,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
-import useSWR from 'swr'
 
 // Components
 import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
@@ -28,6 +27,7 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
+import { useQuery } from '@tanstack/react-query'
 
 const Container = () => {
   const { t } = useTranslation()
@@ -47,7 +47,13 @@ const Container = () => {
     defaultTab: 'dataset',
   })
   const containerRef = useRef<HTMLDivElement>(null)
-  const { data } = useSWR(activeTab === 'dataset' ? null : '/datasets/api-base-info', fetchDatasetApiBaseUrl)
+  const { data } = useQuery(
+    {
+      queryKey: ['datasetApiBaseInfo', activeTab],
+      queryFn: () => fetchDatasetApiBaseUrl('/datasets/api-base-info'),
+      enabled: activeTab !== 'dataset',
+    },
+  )
 
   const [keywords, setKeywords] = useState('')
   const [searchKeywords, setSearchKeywords] = useState('')

web/app/(commonLayout)/layout.tsx

@@ -8,12 +8,14 @@ import Header from '@/app/components/header'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
 import { ProviderContextProvider } from '@/context/provider-context'
 import { ModalContextProvider } from '@/context/modal-context'
+import { TanstackQueryIniter } from '@/context/query-client'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
       <GA gaType={GaType.admin} />
       <SwrInitor>
+        <TanstackQueryIniter>
           <AppContextProvider>
             <EventEmitterContextProvider>
               <ProviderContextProvider>
@@ -26,6 +28,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
               </ProviderContextProvider>
             </EventEmitterContextProvider>
           </AppContextProvider>
+        </TanstackQueryIniter>
       </SwrInitor>
     </>
   )

web/app/(commonLayout)/plugins/page.tsx

@@ -0,0 +1,18 @@
+import PluginPage from '@/app/components/plugins/plugin-page'
+import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
+import Marketplace from '@/app/components/plugins/marketplace'
+
+const PluginList = async () => {
+  return (
+    <PluginPage
+      plugins={<PluginsPanel />}
+      marketplace={<Marketplace />}
+    />
+  )
+}
+
+export const metadata = {
+  title: 'Plugins - Dify',
+}
+
+export default PluginList

web/app/(commonLayout)/plugins/test/card/actions.ts

@@ -0,0 +1,14 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+// Server Actions
+export async function handleDelete() {
+  // revalidatePath only invalidates the cache when the included path is next visited.
+  revalidatePath('/')
+}
+
+export async function fetchPluginDetail(org: string, name: string) {
+  // Fetch plugin detail TODO
+  return { org, name }
+}

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -0,0 +1,98 @@
+'use client'
+import Card from '@/app/components/plugins/card'
+import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+// import PluginItem from '@/app/components/plugins/plugin-item'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+// import ProviderCard from '@/app/components/plugins/provider-card'
+import Badge from '@/app/components/base/badge'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+
+const PluginList = () => {
+  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+
+  return (
+    <div className='pb-3 bg-white'>
+      <InstallBundle onClose={() => { }} fromDSLPayload={[
+        // {
+        //   type: 'marketplace',
+        //   value: {
+        //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+        //   },
+        // },
+        {
+          type: 'github',
+          value: {
+            repo: 'YIXIAO0/test',
+            version: '1.11.5',
+            package: 'test.difypkg',
+            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+          },
+        },
+        // {
+        //   type: 'marketplace',
+        //   value: {
+        //     plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+        //   },
+        // },
+      ]} />
+      <div className='mx-3 '>
+        {/* <h2 className='my-3'>Dify Plugin list</h2> */}
+        {/* <div className='grid grid-cols-2 gap-3'>
+          {pluginList.map((plugin, index) => (
+            <PluginItem
+              key={index}
+              payload={plugin as any}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div> */}
+
+        <h2 className='my-3'>Install Plugin / Package under bundle</h2>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+            titleLeft={
+              <Badge className='ml-1' text={toolNotion.version} />
+            }
+          />
+        </div>
+        {/* <h3 className='my-1'>Installed</h3>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+            installed
+          />
+        </div> */}
+
+        {/* <h3 className='my-1'>Install model provide</h3>
+        <div className='grid grid-cols-2 gap-3'>
+          {pluginList.map((plugin, index) => (
+            <ProviderCard key={index} payload={plugin as any} />
+          ))}
+        </div> */}
+
+        <div className='my-3 h-[px] bg-gray-50'></div>
+        <h2 className='my-3'>Marketplace Plugin list</h2>
+        <div className='grid grid-cols-4 gap-3'>
+          {pluginList.map((plugin, index) => (
+            <Card
+              key={index}
+              payload={plugin as any}
+              footer={
+                <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Tag that has very very long name', 'Productivity', 'Tag2'] : []} />
+              }
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// export const metadata = {
+//   title: 'Plugins - Card',
+// }
+
+export default PluginList

web/app/(commonLayout)/plugins/test/other/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+import { useBoolean } from 'ahooks'
+import UpdatePlugin from '@/app/components/plugins/update-plugin'
+
+const Page = () => {
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+  return (
+    <div>
+      <div onClick={showUpdateModal}>Show Upgrade</div>
+      {isShowUpdateModal && (
+        <UpdatePlugin onHide={hideUpdateModal} />
+      )}
+    </div>
+  )
+}
+
+export default Page

web/app/(commonLayout)/plugins/test/tools-picker/page.tsx

@@ -0,0 +1,22 @@
+'use client'
+import React from 'react'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+
+const ToolsPicker = () => {
+  const [show, setShow] = React.useState(true)
+  return (
+    <div className=' mt-10 ml-10'>
+      <ToolPicker
+        trigger={<div className='inline-block w-[70px]'>Click me</div>}
+        isShow={show}
+        onShowChange={setShow}
+        disabled={false}
+        supportAddCustomTool={true}
+        onSelect={() => { }}
+      />
+    </div>
+
+  )
+}
+
+export default ToolsPicker

web/app/(commonLayout)/plugins/test/update/page.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { toolNeko } from '@/app/components/plugins/card/card-mock'
+import { PluginSource } from '@/app/components/plugins/types'
+import { useModalContext } from '@/context/modal-context'
+import React from 'react'
+
+const UpdatePlugin = () => {
+  const { setShowUpdatePluginModal } = useModalContext()
+  const handleUpdateFromMarketPlace = () => {
+    setShowUpdatePluginModal({
+      payload: {
+        type: PluginSource.marketplace,
+        marketPlace: {
+          originalPackageInfo: {
+            id: 'langgenius/neko:0.0.1@9e57d693739287c0efdc96847d7ed959ca93f70aa704471f2eb7ed3313821824',
+            payload: toolNeko as any,
+          },
+          targetPackageInfo: {
+            id: 'target_xxx',
+            version: '1.2.3',
+          },
+        },
+      },
+      onCancelCallback: () => {
+        console.log('canceled')
+      },
+      onSaveCallback: () => {
+        console.log('saved')
+      },
+    })
+  }
+  const handleUpdateFromGithub = () => {
+    setShowUpdatePluginModal({
+      payload: {
+        type: PluginSource.github,
+        github: {
+          originalPackageInfo: {
+            id: '111',
+            repo: 'aaa/bbb',
+            version: 'xxx',
+            url: 'aaa/bbb',
+            currVersion: '1.2.3',
+            currPackage: 'pack1',
+          } as any,
+        },
+      },
+      onCancelCallback: () => {
+        console.log('canceled')
+      },
+      onSaveCallback: () => {
+        console.log('saved')
+      },
+    })
+  }
+
+  return (
+    <div>
+      <div>更新组件</div>
+      <div className='flex space-x-1'>
+        <div className='underline cursor-pointer' onClick={handleUpdateFromMarketPlace}>从 Marketplace</div>
+        <div className='underline cursor-pointer' onClick={handleUpdateFromGithub}>从 GitHub</div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(UpdatePlugin)

web/app/account/avatar.tsx

@@ -8,7 +8,7 @@ import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 
-export type IAppSelector = {
+export interface IAppSelector {
   isMobile: boolean
 }
 

web/app/components/app/annotation/filter.tsx

@@ -6,11 +6,11 @@ import useSWR from 'swr'
 import Input from '@/app/components/base/input'
 import { fetchAnnotationsCount } from '@/service/log'
 
-export type QueryParam = {
+export interface QueryParam {
   keyword?: string
 }
 
-type IFilterProps = {
+interface IFilterProps {
   appId: string
   queryParams: QueryParam
   setQueryParams: (v: QueryParam) => void

web/app/components/app/annotation/index.tsx

@@ -27,7 +27,7 @@ import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import type { App } from '@/types/app'
 
-type Props = {
+interface Props {
   appDetail: App
 }
 

web/app/components/app/annotation/list.tsx

@@ -9,7 +9,7 @@ import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 import cn from '@/utils/classnames'
 import useTimestamp from '@/hooks/use-timestamp'
 
-type Props = {
+interface Props {
   list: AnnotationItem[]
   onRemove: (id: string) => void
   onView: (item: AnnotationItem) => void

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -23,7 +23,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn pb-3', noBodySpacing && '!pb-0', className)}>
+    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
         <div className='flex justify-between items-center h-8'>

web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx

@@ -9,7 +9,7 @@ import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
 
-type Props = {
+interface Props {
   showWarning: boolean
   onShowEditModal: () => void
 }

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -9,7 +9,7 @@ import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
 import cn from '@/utils/classnames'
-import { type PromptVariable } from '@/models/debug'
+import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import type { CompletionParams } from '@/types/app'
 import { AppType } from '@/types/app'

web/app/components/app/configuration/config-var/config-modal/field.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
 
-type Props = {
+interface Props {
   className?: string
   title: string
   children: JSX.Element

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -23,7 +23,7 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 
 const TEXT_MAX_LENGTH = 256
 
-export type IConfigModalProps = {
+export interface IConfigModalProps {
   isCreate?: boolean
   payload?: InputVar
   isShow: boolean

web/app/components/app/configuration/config-var/config-string/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import Input from '@/app/components/base/input'
 
-export type IConfigStringProps = {
+export interface IConfigStringProps {
   value: number | undefined
   maxLength: number
   modelId: string
@@ -28,7 +28,7 @@ const ConfigString: FC<IConfigStringProps> = ({
         min={1}
         value={value || ''}
         onChange={(e) => {
-          let value = parseInt(e.target.value, 10)
+          let value = Number.parseInt(e.target.value, 10)
           if (value > maxLength)
             value = maxLength
 

web/app/components/app/configuration/config-var/index.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import type { Timeout } from 'ahooks/lib/useRequest/src/types'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import {
@@ -34,7 +33,7 @@ import { InputVarType } from '@/app/components/workflow/types'
 
 export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'
 
-type ExternalDataToolParams = {
+interface ExternalDataToolParams {
   key: string
   type: string
   index: number
@@ -44,13 +43,13 @@ type ExternalDataToolParams = {
   icon_background?: string
 }
 
-export type IConfigVarProps = {
+export interface IConfigVarProps {
   promptVariables: PromptVariable[]
   readonly?: boolean
   onPromptVariablesChange?: (promptVariables: PromptVariable[]) => void
 }
 
-let conflictTimer: Timeout
+let conflictTimer: number
 
 const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVariablesChange }) => {
   const { t } = useTranslation()
@@ -107,7 +106,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     onPromptVariablesChange?.(newPromptVariables)
   }
   const updatePromptKey = (index: number, newKey: string) => {
-    clearTimeout(conflictTimer)
+    window.clearTimeout(conflictTimer)
     const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
     if (!isValid) {
       Toast.notify({
@@ -127,7 +126,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       return item
     })
 
-    conflictTimer = setTimeout(() => {
+    conflictTimer = window.setTimeout(() => {
       const isKeyExists = promptVariables.some(item => item.key?.trim() === newKey.trim())
       if (isKeyExists) {
         Toast.notify({

web/app/components/app/configuration/config-var/select-type-item/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import type { InputVarType } from '@/app/components/workflow/types'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-export type ISelectTypeItemProps = {
+export interface ISelectTypeItemProps {
   type: InputVarType
   selected: boolean
   onClick: () => void

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -1,21 +1,25 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import copy from 'copy-to-clipboard'
 import produce from 'immer'
 import {
   RiDeleteBinLine,
+  RiEqualizer2Line,
   RiHammerFill,
+  RiInformation2Line,
 } from '@remixicon/react'
 import { useFormattingChangedDispatcher } from '../../../debug/hooks'
 import SettingBuiltInTool from './setting-built-in-tool'
-import cn from '@/utils/classnames'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
-import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import AppIcon from '@/app/components/base/app-icon'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
+import Toast from '@/app/components/base/toast'
 import ConfigContext from '@/context/debug-configuration'
 import type { AgentTool } from '@/types/app'
 import { type Collection, CollectionType } from '@/app/components/tools/types'
@@ -23,7 +27,12 @@ import { MAX_TOOLS_NUM } from '@/config'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
-import AddToolModal from '@/app/components/tools/add-tool-modal'
+// import AddToolModal from '@/app/components/tools/add-tool-modal'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import { updateBuiltInToolCredential } from '@/service/tools'
+import cn from '@/utils/classnames'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 
 type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
 const AgentTools: FC = () => {
@@ -33,7 +42,13 @@ const AgentTools: FC = () => {
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
 
   const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
+  const currentCollection = useMemo(() => {
+    if (!currentTool) return null
+    const collection = collectionList.find(collection => collection.id === currentTool?.provider_id && collection.type === currentTool?.provider_type)
+    return collection
+  }, [currentTool, collectionList])
   const [isShowSettingTool, setIsShowSettingTool] = useState(false)
+  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
   const tools = (modelConfig?.agentConfig?.tools as AgentTool[] || []).map((item) => {
     const collection = collectionList.find(collection => collection.id === item.provider_id && collection.type === item.provider_type)
     const icon = collection?.icon
@@ -55,10 +70,39 @@ const AgentTools: FC = () => {
     formattingChangedDispatcher()
   }
 
+  const handleToolAuthSetting = (value: any) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === value?.collection?.id && item.tool_name === value?.tool_name)
+      if (tool)
+        (tool as AgentTool).notAuthor = false
+    })
+    setModelConfig(newModelConfig)
+    setIsShowSettingTool(false)
+    formattingChangedDispatcher()
+  }
+
+  const [isDeleting, setIsDeleting] = useState<number>(-1)
+
+  const handleSelectTool = (tool: ToolDefaultValue) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      draft.agentConfig.tools.push({
+        provider_id: tool.provider_id,
+        provider_type: tool.provider_type as CollectionType,
+        provider_name: tool.provider_name,
+        tool_name: tool.tool_name,
+        tool_label: tool.tool_label,
+        tool_parameters: tool.params,
+        notAuthor: !tool.is_team_authorization,
+        enabled: true,
+      })
+    })
+    setModelConfig(newModelConfig)
+  }
+
   return (
     <>
       <Panel
-        className="mt-2"
+        className={cn('mt-2', tools.length === 0 && 'pb-2')}
         noBodySpacing={tools.length === 0}
         headerIcon={
           <RiHammerFill className='w-4 h-4 text-primary-500' />
@@ -81,7 +125,14 @@ const AgentTools: FC = () => {
             {tools.length < MAX_TOOLS_NUM && (
               <>
                 <div className='ml-3 mr-1 h-3.5 w-px bg-gray-200'></div>
-                <OperationBtn type="add" onClick={() => setIsShowChooseTool(true)} />
+                <ToolPicker
+                  trigger={<OperationBtn type="add" />}
+                  isShow={isShowChooseTool}
+                  onShowChange={setIsShowChooseTool}
+                  disabled={false}
+                  supportAddCustomTool
+                  onSelect={handleSelectTool}
+                />
               </>
             )}
           </div>
@@ -90,72 +141,78 @@ const AgentTools: FC = () => {
         <div className='grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between'>
           {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
             <div key={index}
-              className={cn((item.isDeleted || item.notAuthor) ? 'bg-white/50' : 'bg-white', (item.enabled && !item.isDeleted && !item.notAuthor) && 'shadow-xs', index > 1 && 'mt-1', 'group relative flex justify-between items-center last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full  rounded-lg border-[0.5px] border-gray-200 ')}
+              className={cn(
+                'group relative flex justify-between items-center last-of-type:mb-0 p-1.5 pr-2 w-full bg-components-panel-on-panel-item-bg rounded-lg border-[0.5px] border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm cursor',
+                isDeleting === index && 'hover:bg-state-destructive-hover border-state-destructive-border',
+              )}
             >
               <div className='grow w-0 flex items-center'>
-                {(item.isDeleted || item.notAuthor)
+                {item.isDeleted && <DefaultToolIcon className='w-5 h-5' />}
-                  ? (
+                {!item.isDeleted && (
-                    <DefaultToolIcon className='w-6 h-6' />
+                  <div className={cn((item.notAuthor || !item.enabled) && 'opacity-50')}>
-                  )
+                    {typeof item.icon === 'string' && <div className='w-5 h-5 bg-cover bg-center rounded-md' style={{ backgroundImage: `url(${item.icon})` }} />}
-                  : (
+                    {typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
-                    typeof item.icon === 'string'
+                  </div>
-                      ? (
+                )}
                 <div
-                          className='w-6 h-6 bg-cover bg-center rounded-md'
+                  className={cn(
-                          style={{
+                    'grow w-0 ml-1.5 flex items-center system-xs-regular truncate',
-                            backgroundImage: `url(${item.icon})`,
+                    item.isDeleted ? 'line-through' : '',
-                          }}
+                    (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
-                        ></div>
+                  )}
-                      )
-                      : (
-                        <AppIcon
-                          className='rounded-md'
-                          size='tiny'
-                          icon={item.icon?.content}
-                          background={item.icon?.background}
-                        />
-                      ))}
-                <div
-                  className={cn((item.isDeleted || item.notAuthor) ? 'line-through opacity-50' : '', 'grow w-0 ml-2 leading-[18px] text-[13px] font-medium text-gray-800  truncate')}
                 >
-                  <span className='text-gray-800 pr-2'>{item.provider_type === CollectionType.builtIn ? item.provider_name : item.tool_label}</span>
+                  <span className='text-text-secondary pr-1.5'>{item.provider_type === CollectionType.builtIn ? item.provider_name : item.tool_label}</span>
+                  <span className='text-text-tertiary'>{item.tool_name}</span>
+                  {!item.isDeleted && (
                     <Tooltip
-                    popupContent={t('tools.toolNameUsageTip')}
+                      needsDelay
+                      popupContent={
+                        <div className='w-[180px]'>
+                          <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
+                          <div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</div>
+                          <div className='text-text-accent cursor-pointer' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
+                        </div>
+                      }
                     >
-                    <span className='text-gray-500'>{item.tool_name}</span>
+                      <div className='w-4 h-4'>
+                        <div className='hidden group-hover:inline-block ml-0.5'>
+                          <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+                        </div>
+                      </div>
                     </Tooltip>
+                  )}
                 </div>
               </div>
               <div className='shrink-0 ml-1 flex items-center'>
-                {(item.isDeleted || item.notAuthor)
+                {item.isDeleted && (
-                  ? (
+                  <div className='flex items-center mr-2'>
-                    <div className='flex items-center'>
                     <Tooltip
-                        popupContent={t(`tools.${item.isDeleted ? 'toolRemoved' : 'notAuthorized'}`)}
+                      popupContent={t('tools.toolRemoved')}
                       needsDelay
                     >
-                        <div className='mr-1 p-1 rounded-md hover:bg-black/5  cursor-pointer' onClick={() => {
+                      <div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer'>
-                          if (item.notAuthor)
-                            setIsShowChooseTool(true)
-                        }}>
                         <AlertTriangle className='w-4 h-4 text-[#F79009]' />
                       </div>
                     </Tooltip>
-
+                    <div
-                      <div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
+                      className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+                      onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
                         })
                         setModelConfig(newModelConfig)
                         formattingChangedDispatcher()
-                      }}>
+                      }}
-                        <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+                      onMouseOver={() => setIsDeleting(index)}
+                      onMouseLeave={() => setIsDeleting(-1)}
+                    >
+                      <RiDeleteBinLine className='w-4 h-4' />
                     </div>
-                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
                   </div>
-                  )
+                )}
-                  : (
+                {!item.isDeleted && (
-                    <div className='hidden group-hover:flex items-center'>
+                  <div className='hidden group-hover:flex items-center gap-1 mr-2'>
+                    {!item.notAuthor && (
                       <Tooltip
                         popupContent={t('tools.setBuiltInTools.infoAndSetting')}
                         needsDelay
@@ -164,26 +221,31 @@ const AgentTools: FC = () => {
                           setCurrentTool(item)
                           setIsShowSettingTool(true)
                         }}>
-                          <InfoCircle className='w-4 h-4 text-gray-500' />
+                          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
                         </div>
                       </Tooltip>
-
+                    )}
-                      <div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
+                    <div
+                      className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+                      onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
                         })
                         setModelConfig(newModelConfig)
                         formattingChangedDispatcher()
-                      }}>
+                      }}
-                        <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
+                      onMouseOver={() => setIsDeleting(index)}
+                      onMouseLeave={() => setIsDeleting(-1)}
+                    >
+                      <RiDeleteBinLine className='w-4 h-4' />
                     </div>
-                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
                   </div>
                 )}
-                <div className={cn((item.isDeleted || item.notAuthor) && 'opacity-50')}>
+                <div className={cn(item.isDeleted && 'opacity-50')}>
+                  {!item.notAuthor && (
                     <Switch
-                    defaultValue={(item.isDeleted || item.notAuthor) ? false : item.enabled}
+                      defaultValue={item.isDeleted ? false : item.enabled}
-                    disabled={(item.isDeleted || item.notAuthor)}
+                      disabled={item.isDeleted}
                       size='md'
                       onChange={(enabled) => {
                         const newModelConfig = produce(modelConfig, (draft) => {
@@ -192,17 +254,23 @@ const AgentTools: FC = () => {
                         setModelConfig(newModelConfig)
                         formattingChangedDispatcher()
                       }} />
+                  )}
+                  {item.notAuthor && (
+                    <Button variant='secondary' size='small' onClick={() => {
+                      setCurrentTool(item)
+                      setShowSettingAuth(true)
+                    }}>
+                      {t('tools.notAuthorized')}
+                      <Indicator className='ml-2' color='orange' />
+                    </Button>
+                  )}
                 </div>
               </div>
             </div>
           ))}
         </div >
       </Panel >
-      {isShowChooseTool && (
+      {isShowSettingTool && (
-        <AddToolModal onHide={() => setIsShowChooseTool(false)} />
-      )}
-      {
-        isShowSettingTool && (
         <SettingBuiltInTool
           toolName={currentTool?.tool_name as string}
           setting={currentTool?.tool_parameters as any}
@@ -211,8 +279,23 @@ const AgentTools: FC = () => {
           isModel={currentTool?.collection?.type === CollectionType.model}
           onSave={handleToolSettingChange}
           onHide={() => setIsShowSettingTool(false)}
-          />)
+        />
-      }
+      )}
+      {isShowSettingAuth && (
+        <ConfigCredential
+          collection={currentCollection as any}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={async (value) => {
+            await updateBuiltInToolCredential((currentCollection as any).name, value)
+            Toast.notify({
+              type: 'success',
+              message: t('common.api.actionSuccess'),
+            })
+            handleToolAuthSetting(currentTool as any)
+            setShowSettingAuth(false)
+          }}
+        />
+      )}
     </>
   )
 }

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -3,21 +3,30 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+import {
-import Drawer from '@/app/components/base/drawer-plus'
+  RiArrowLeftLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import Drawer from '@/app/components/base/drawer'
+import Loading from '@/app/components/base/loading'
+import ActionButton from '@/app/components/base/action-button'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import OrgInfo from '@/app/components/plugins/card/base/org-info'
+import Description from '@/app/components/plugins/card/base/description'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+
+import Button from '@/app/components/base/button'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import type { Collection, Tool } from '@/app/components/tools/types'
 import { CollectionType } from '@/app/components/tools/types'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 import I18n from '@/context/i18n'
-import Button from '@/app/components/base/button'
-import Loading from '@/app/components/base/loading'
-import { DiagonalDividingLine } from '@/app/components/base/icons/src/public/common'
 import { getLanguage } from '@/i18n/language'
-import AppIcon from '@/app/components/base/app-icon'
+import cn from '@/utils/classnames'
 
-type Props = {
+interface Props {
+  showBackButton?: boolean
   collection: Collection
   isBuiltIn?: boolean
   isModel?: boolean
@@ -29,6 +38,7 @@ type Props = {
 }
 
 const SettingBuiltInTool: FC<Props> = ({
+  showBackButton = false,
   collection,
   isBuiltIn = true,
   isModel = true,
@@ -97,39 +107,26 @@ const SettingBuiltInTool: FC<Props> = ({
   })()
 
   const infoUI = (
-    <div className='pt-2'>
+    <div className=''>
-      <div className='leading-5 text-sm font-medium text-gray-900'>
-        {t('tools.setBuiltInTools.toolDescription')}
-      </div>
-      <div className='mt-1 leading-[18px] text-xs font-normal text-gray-600'>
-        {currTool?.description[language]}
-      </div>
-
       {infoSchemas.length > 0 && (
-        <div className='mt-6'>
+        <div className='py-2 space-y-1'>
-          <div className='flex items-center mb-4 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>
-            <div className='mr-3'>{t('tools.setBuiltInTools.parameters')}</div>
-            <div className='grow w-0 h-px bg-[#f3f4f6]'></div>
-          </div>
-          <div className='space-y-4'>
           {infoSchemas.map((item: any, index) => (
-              <div key={index}>
+            <div key={index} className='py-1'>
-                <div className='flex items-center space-x-2 leading-[18px]'>
+              <div className='flex items-center gap-2'>
-                  <div className='text-[13px] font-semibold text-gray-900'>{item.label[language]}</div>
+                <div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
-                  <div className='text-xs font-medium text-gray-500'>{item.type === 'number-input' ? t('tools.setBuiltInTools.number') : t('tools.setBuiltInTools.string')}</div>
+                <div className='text-text-tertiary system-xs-regular'>{item.type === 'number-input' ? t('tools.setBuiltInTools.number') : t('tools.setBuiltInTools.string')}</div>
                 {item.required && (
-                    <div className='text-xs font-medium text-[#EC4A0A]'>{t('tools.setBuiltInTools.required')}</div>
+                  <div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
                 )}
               </div>
               {item.human_description && (
-                  <div className='mt-1 leading-[18px] text-xs font-normal text-gray-600'>
+                <div className='mt-0.5 text-text-tertiary system-xs-regular'>
                   {item.human_description?.[language]}
                 </div>
               )}
             </div>
           ))}
         </div>
-        </div>
       )}
     </div>
   )
@@ -149,61 +146,68 @@ const SettingBuiltInTool: FC<Props> = ({
 
   return (
     <Drawer
-      isShow
+      isOpen
-      onHide={onHide}
+      clickOutsideNotOpen={false}
-      title={(
+      onClose={onHide}
-        <div className='flex items-center'>
+      footer={null}
-          {typeof collection.icon === 'string'
+      mask={false}
-            ? (
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <>
+        {isLoading && <Loading type='app' />}
+        {!isLoading && (
+          <>
+            {/* header */}
+            <div className='relative p-4 pb-3 border-b border-divider-subtle'>
+              <div className='absolute top-3 right-3'>
+                <ActionButton onClick={onHide}>
+                  <RiCloseLine className='w-4 h-4' />
+                </ActionButton>
+              </div>
+              {showBackButton && (
                 <div
-                className='w-6 h-6 bg-cover bg-center rounded-md flex-shrink-0'
+                  className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
-                style={{
+                  onClick={onHide}
-                  backgroundImage: `url(${collection.icon})`,
+                >
-                }}
+                  <RiArrowLeftLine className='w-4 h-4' />
-              ></div>
+                  BACK
-            )
+                </div>
-            : (
+              )}
-              <AppIcon
+              <div className='flex items-center gap-1'>
-                className='rounded-md'
+                <Icon size='tiny' className='w-6 h-6' src={collection.icon} />
-                size='tiny'
+                <OrgInfo
-                icon={(collection.icon as any)?.content}
+                  packageNameClassName='w-auto'
-                background={(collection.icon as any)?.background}
+                  orgName={collection.author}
+                  packageName={collection.name}
                 />
+              </div>
+              <div className='mt-1 text-text-primary system-md-semibold'>{currTool?.label[language]}</div>
+              {!!currTool?.description[language] && (
+                <Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
               )}
-
-          <div className='ml-2 leading-6 text-base font-semibold text-gray-900'>{currTool?.label[language]}</div>
-          {(hasSetting && !readonly) && (<>
-            <DiagonalDividingLine className='mx-4' />
-            <div className='flex space-x-6'>
-              <div
-                className={cn(isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base')}
-                onClick={() => setCurrType('info')}
-              >
-                {t('tools.setBuiltInTools.info')}
-                {isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
-              </div>
-              <div className={cn(!isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base ')}
-                onClick={() => setCurrType('setting')}
-              >
-                {t('tools.setBuiltInTools.setting')}
-                {!isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
-              </div>
-            </div>
-          </>)}
             </div>
+            {/* form */}
+            <div className='h-full'>
+              <div className='flex flex-col h-full'>
+                {(hasSetting && !readonly) ? (
+                  <TabSlider
+                    className='shrink-0 mt-1 px-4'
+                    itemClassName='py-3'
+                    noBorderBottom
+                    value={currType}
+                    onChange={(value) => {
+                      setCurrType(value)
+                    }}
+                    options={[
+                      { value: 'info', text: t('tools.setBuiltInTools.parameters')! },
+                      { value: 'setting', text: t('tools.setBuiltInTools.setting')! },
+                    ]}
+                  />
+                ) : (
+                  <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
                 )}
-      panelClassName='mt-[65px] !w-[405px]'
+                <div className='grow h-0 overflow-y-auto px-4'>
-      maxWidthClassName='!max-w-[405px]'
-      height='calc(100vh - 65px)'
-      headerClassName='!border-b-black/5'
-      body={
-        <div className='h-full pt-3'>
-          {isLoading
-            ? <div className='flex h-full items-center'>
-              <Loading type='app' />
-            </div>
-            : (<div className='flex flex-col h-full'>
-              <div className='grow h-0 overflow-y-auto  px-6'>
                   {isInfoActive ? infoUI : settingUI}
                 </div>
                 {!readonly && !isInfoActive && (
@@ -212,12 +216,12 @@ const SettingBuiltInTool: FC<Props> = ({
                     <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
                   </div>
                 )}
-            </div>)}
               </div>
-      }
+            </div>
-      isShowMask={false}
+          </>
-      clickOutsideNotOpen={false}
+        )}
-    />
+      </>
+    </Drawer>
   )
 }
 export default React.memo(SettingBuiltInTool)

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

@@ -38,7 +38,7 @@ import ModelName from '@/app/components/header/account-setting/model-provider-pa
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
-export type IGetAutomaticResProps = {
+export interface IGetAutomaticResProps {
   mode: AppType
   model: Model
   isShow: boolean

web/app/components/app/configuration/config/index.tsx

@@ -11,7 +11,7 @@ import AgentTools from './agent/agent-tools'
 import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import ConfigVar from '@/app/components/app/configuration/config-var'
-import { type ModelConfig, type PromptVariable } from '@/models/debug'
+import type { ModelConfig, PromptVariable } from '@/models/debug'
 import type { AppType } from '@/types/app'
 import { ModelModeType } from '@/types/app'
 

web/app/components/app/configuration/dataset-config/params-config/config-content.tsx

@@ -25,7 +25,7 @@ import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowled
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
 
-type Props = {
+interface Props {
   datasetConfigs: DatasetConfigs
   onChange: (configs: DatasetConfigs, isRetrievalModeChange?: boolean) => void
   isInWorkflow?: boolean

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -19,7 +19,7 @@ import {
   getMultipleRetrievalConfig,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/utils'
 
-type ParamsConfigProps = {
+interface ParamsConfigProps {
   disabled?: boolean
   selectedDatasets: DataSet[]
 }

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -33,7 +33,7 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
 import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
 
-type SettingsModalProps = {
+interface SettingsModalProps {
   currentDataset: DataSet
   onCancel: () => void
   onSave: (newDataset: DataSet) => void

web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx

@@ -30,7 +30,7 @@ import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-
 import { useFeatures } from '@/app/components/base/features/hooks'
 import type { InputForm } from '@/app/components/base/chat/chat/type'
 
-type ChatItemProps = {
+interface ChatItemProps {
   modelAndParameter: ModelAndParameter
 }
 const ChatItem: FC<ChatItemProps> = ({

web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { createContext, useContext } from 'use-context-selector'
 import type { ModelAndParameter } from '../types'
+import { createSelectorCtx } from '@/utils/context'
 
 export type DebugWithMultipleModelContextType = {
   multipleModelConfigs: ModelAndParameter[]
@@ -9,13 +9,9 @@ export type DebugWithMultipleModelContextType = {
   onDebugWithMultipleModelChange: (singleModelConfig: ModelAndParameter) => void
   checkCanSend?: () => boolean
 }
-const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContextType>({
+const [,useDebugWithMultipleModelContext, DebugWithMultipleModelContext] = createSelectorCtx<DebugWithMultipleModelContextType>()
-  multipleModelConfigs: [],
-  onMultipleModelConfigsChange: () => {},
-  onDebugWithMultipleModelChange: () => {},
-})
 
-export const useDebugWithMultipleModelContext = () => useContext(DebugWithMultipleModelContext)
+export { useDebugWithMultipleModelContext }
 
 type DebugWithMultipleModelContextProviderProps = {
   children: React.ReactNode

web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx

@@ -15,7 +15,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
 import { useFeatures } from '@/app/components/base/features/hooks'
 
-type TextGenerationItemProps = {
+interface TextGenerationItemProps {
   modelAndParameter: ModelAndParameter
 }
 const TextGenerationItem: FC<TextGenerationItemProps> = ({

web/app/components/app/configuration/debug/debug-with-single-model/index.tsx

@@ -27,10 +27,10 @@ import { useFeatures } from '@/app/components/base/features/hooks'
 import { getLastAnswer } from '@/app/components/base/chat/utils'
 import type { InputForm } from '@/app/components/base/chat/chat/type'
 
-type DebugWithSingleModelProps = {
+interface DebugWithSingleModelProps {
   checkCanSend?: () => boolean
 }
-export type DebugWithSingleModelRefType = {
+export interface DebugWithSingleModelRefType {
   handleRestart: () => void
 }
 const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSingleModelProps>(({

web/app/components/app/configuration/debug/index.tsx

@@ -48,7 +48,7 @@ import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 
-type IDebug = {
+interface IDebug {
   isAPIKeySet: boolean
   onSetting: () => void
   inputs: Inputs

web/app/components/app/configuration/index.tsx

@@ -59,7 +59,7 @@ import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { fetchCollectionList } from '@/service/tools'
-import { type Collection } from '@/app/components/tools/types'
+import type { Collection } from '@/app/components/tools/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   getMultipleRetrievalConfig,
@@ -71,6 +71,7 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
+import { correctProvider } from '@/utils'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -156,7 +157,7 @@ const Configuration: FC = () => {
   const setCompletionParams = (value: FormValue) => {
     const params = { ...value }
 
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     if ((!params.stop || params.stop.length === 0) && (modeModeTypeRef.current === ModelModeType.completion)) {
       params.stop = getTempStop()
       setTempStop([])
@@ -165,7 +166,7 @@ const Configuration: FC = () => {
   }
 
   const [modelConfig, doSetModelConfig] = useState<ModelConfig>({
-    provider: 'openai',
+    provider: 'langgenius/openai/openai',
     model_id: 'gpt-3.5-turbo',
     mode: ModelModeType.unset,
     configs: {
@@ -188,7 +189,7 @@ const Configuration: FC = () => {
 
   const isAgent = mode === 'agent-chat'
 
-  const isOpenAI = modelConfig.provider === 'openai'
+  const isOpenAI = modelConfig.provider === 'langgenius/openai/openai'
 
   const [collectionList, setCollectionList] = useState<Collection[]>([])
   useEffect(() => {
@@ -357,7 +358,7 @@ const Configuration: FC = () => {
   const [canReturnToSimpleMode, setCanReturnToSimpleMode] = useState(true)
   const setPromptMode = async (mode: PromptMode) => {
     if (mode === PromptMode.advanced) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      // eslint-disable-next-line ts/no-use-before-define
       await migrateToDefaultPrompt()
       setCanReturnToSimpleMode(true)
     }
@@ -542,8 +543,19 @@ const Configuration: FC = () => {
         if (modelConfig.retriever_resource)
           setCitationConfig(modelConfig.retriever_resource)
 
-        if (modelConfig.annotation_reply)
+        if (modelConfig.annotation_reply) {
-          setAnnotationConfig(modelConfig.annotation_reply, true)
+          let annotationConfig = modelConfig.annotation_reply
+          if (modelConfig.annotation_reply.enabled) {
+            annotationConfig = {
+              ...modelConfig.annotation_reply,
+              embedding_model: {
+                ...modelConfig.annotation_reply.embedding_model,
+                embedding_provider_name: correctProvider(modelConfig.annotation_reply.embedding_model.embedding_provider_name),
+              },
+            }
+          }
+          setAnnotationConfig(annotationConfig, true)
+        }
 
         if (modelConfig.sensitive_word_avoidance)
           setModerationConfig(modelConfig.sensitive_word_avoidance)
@@ -553,7 +565,7 @@ const Configuration: FC = () => {
 
         const config = {
           modelConfig: {
-            provider: model.provider,
+            provider: correctProvider(model.provider),
             model_id: model.name,
             mode: model.mode,
             configs: {
@@ -595,7 +607,6 @@ const Configuration: FC = () => {
             annotation_reply: modelConfig.annotation_reply,
             external_data_tools: modelConfig.external_data_tools,
             dataSets: datasets || [],
-            // eslint-disable-next-line multiline-ternary
             agentConfig: res.mode === 'agent-chat' ? {
               max_iteration: DEFAULT_AGENT_SETTING.max_iteration,
               ...modelConfig.agent_mode,
@@ -608,6 +619,10 @@ const Configuration: FC = () => {
                   ...tool,
                   isDeleted: res.deleted_tools?.includes(tool.tool_name),
                   notAuthor: collectionList.find(c => tool.provider_id === c.id)?.is_team_authorization === false,
+                  ...(tool.provider_type === 'builtin' ? {
+                    provider_id: correctProvider(tool.provider_name),
+                    provider_name: correctProvider(tool.provider_name),
+                  } : {}),
                 }
               }),
             } : DEFAULT_AGENT_SETTING,
@@ -625,6 +640,12 @@ const Configuration: FC = () => {
           retrieval_model: RETRIEVE_TYPE.multiWay,
           ...modelConfig.dataset_configs,
           ...retrievalConfig,
+          ...(retrievalConfig.reranking_model ? {
+            reranking_model: {
+              ...retrievalConfig.reranking_model,
+              reranking_provider_name: correctProvider(modelConfig.dataset_configs.reranking_model.reranking_provider_name),
+            },
+          } : {}),
         })
         setHasFetchedDetail(true)
       })

web/app/components/app/configuration/prompt-value-panel/index.tsx

@@ -23,7 +23,7 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import cn from '@/utils/classnames'
 
-export type IPromptValuePanelProps = {
+export interface IPromptValuePanelProps {
   appType: AppType
   onSend?: () => void
   inputs: Inputs

web/app/components/app/configuration/toolbox/annotation/config-param.tsx

@@ -1,124 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { usePathname, useRouter } from 'next/navigation'
-import ConfigParamModal from './config-param-modal'
-import Panel from '@/app/components/app/configuration/base/feature-panel'
-import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
-import Tooltip from '@/app/components/base/tooltip'
-import { LinkExternal02, Settings04 } from '@/app/components/base/icons/src/vender/line/general'
-import ConfigContext from '@/context/debug-configuration'
-import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
-import { fetchAnnotationConfig, updateAnnotationScore } from '@/service/annotation'
-import type { AnnotationReplyConfig as AnnotationReplyConfigType } from '@/models/debug'
-
-type Props = {
-  onEmbeddingChange: (embeddingModel: EmbeddingModelConfig) => void
-  onScoreChange: (score: number, embeddingModel?: EmbeddingModelConfig) => void
-}
-
-export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }> = ({
-  title,
-  tooltip,
-  children,
-}) => {
-  return (
-    <div>
-      <div className='flex items-center space-x-1'>
-        <div>{title}</div>
-        <Tooltip
-          popupContent={
-            <div className='max-w-[200px] leading-[18px] text-[13px] font-medium text-gray-800'>{tooltip}</div>
-          }
-        />
-      </div>
-      <div>{children}</div>
-    </div>
-  )
-}
-
-const AnnotationReplyConfig: FC<Props> = ({
-  onEmbeddingChange,
-  onScoreChange,
-}) => {
-  const { t } = useTranslation()
-  const router = useRouter()
-  const pathname = usePathname()
-  const matched = pathname.match(/\/app\/([^/]+)/)
-  const appId = (matched?.length && matched[1]) ? matched[1] : ''
-  const {
-    annotationConfig,
-  } = useContext(ConfigContext)
-
-  const [isShowEdit, setIsShowEdit] = React.useState(false)
-
-  return (
-    <>
-      <Panel
-        className="mt-4"
-        headerIcon={
-          <MessageFast className='w-4 h-4 text-[#444CE7]' />
-        }
-        title={t('appDebug.feature.annotation.title')}
-        headerRight={
-          <div className='flex items-center'>
-            <div
-              className='flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200'
-              onClick={() => { setIsShowEdit(true) }}
-            >
-              <Settings04 className="w-[14px] h-[14px]" />
-              <div className='text-xs font-medium'>
-
-                {t('common.operation.params')}
-              </div>
-            </div>
-            <div
-              className='ml-1 flex items-center h-7 px-3 space-x-1 leading-[18px] text-xs font-medium text-gray-700 rounded-md cursor-pointer hover:bg-gray-200'
-              onClick={() => {
-                router.push(`/app/${appId}/annotations`)
-              }}>
-              <div>{t('appDebug.feature.annotation.cacheManagement')}</div>
-              <LinkExternal02 className='w-3.5 h-3.5' />
-            </div>
-          </div>
-        }
-        noBodySpacing
-      />
-      {isShowEdit && (
-        <ConfigParamModal
-          appId={appId}
-          isShow
-          onHide={() => {
-            setIsShowEdit(false)
-          }}
-          onSave={async (embeddingModel, score) => {
-            const annotationConfig = await fetchAnnotationConfig(appId) as AnnotationReplyConfigType
-            let isEmbeddingModelChanged = false
-            if (
-              embeddingModel.embedding_model_name !== annotationConfig.embedding_model.embedding_model_name
-              || embeddingModel.embedding_provider_name !== annotationConfig.embedding_model.embedding_provider_name
-            ) {
-              await onEmbeddingChange(embeddingModel)
-              isEmbeddingModelChanged = true
-            }
-
-            if (score !== annotationConfig.score_threshold) {
-              await updateAnnotationScore(appId, annotationConfig.id, score)
-              if (isEmbeddingModelChanged)
-                onScoreChange(score, embeddingModel)
-
-              else
-                onScoreChange(score)
-            }
-
-            setIsShowEdit(false)
-          }}
-          annotationConfig={annotationConfig}
-        />
-      )}
-    </>
-  )
-}
-export default React.memo(AnnotationReplyConfig)

web/app/components/app/configuration/toolbox/index.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import GroupName from '../base/group-name'
-import Moderation from './moderation'
-import Annotation from './annotation/config-param'
-import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
-
-export type ToolboxProps = {
-  showModerationSettings: boolean
-  showAnnotation: boolean
-  onEmbeddingChange: (embeddingModel: EmbeddingModelConfig) => void
-  onScoreChange: (score: number, embeddingModel?: EmbeddingModelConfig) => void
-}
-
-const Toolbox: FC<ToolboxProps> = ({
-  showModerationSettings,
-  showAnnotation,
-  onEmbeddingChange,
-  onScoreChange,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='mt-7'>
-      <GroupName name={t('appDebug.feature.toolbox.title')} />
-      {
-        showModerationSettings && (
-          <Moderation />
-        )
-      }
-      {
-        showAnnotation && (
-          <Annotation
-            onEmbeddingChange={onEmbeddingChange}
-            onScoreChange={onScoreChange}
-          />
-        )
-      }
-    </div>
-  )
-}
-export default React.memo(Toolbox)

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -21,13 +21,13 @@ import { useToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 
 const systemTypes = ['api']
-type ExternalDataToolModalProps = {
+interface ExternalDataToolModalProps {
   data: ExternalDataTool
   onCancel: () => void
   onSave: (externalDataTool: ExternalDataTool) => void
   onValidateBeforeSave?: (externalDataTool: ExternalDataTool) => boolean
 }
-type Provider = {
+interface Provider {
   key: string
   name: string
   form_schema?: CodeBasedExtensionItem['form_schema']

web/app/components/app/create-app-modal/index.tsx

@@ -29,7 +29,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 
-type CreateAppDialogProps = {
+interface CreateAppDialogProps {
   show: boolean
   onSuccess: () => void
   onClose: () => void

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -21,6 +21,7 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import cn from '@/utils/classnames'
+import { useMutationCheckDependenciesBeforeImportDSL } from '@/service/use-plugins'
 
 type CreateFromDSLModalProps = {
   show: boolean
@@ -43,6 +44,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   const [fileContent, setFileContent] = useState<string>()
   const [currentTab, setCurrentTab] = useState(activeTab)
   const [dslUrlValue, setDslUrlValue] = useState(dslUrl)
+  const { mutateAsync } = useMutationCheckDependenciesBeforeImportDSL()
 
   const readFile = (file: File) => {
     const reader = new FileReader()
@@ -78,11 +80,21 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       let app
 
       if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
+        const leakedData = await mutateAsync({ dslString: fileContent })
+        if (leakedData?.leaked.length) {
+          isCreatingRef.current = false
+          return
+        }
         app = await importApp({
           data: fileContent || '',
         })
       }
       if (currentTab === CreateFromDSLModalTab.FROM_URL) {
+        const leakedData = await mutateAsync({ url: dslUrlValue })
+        if (leakedData?.leaked.length) {
+          isCreatingRef.current = false
+          return
+        }
         app = await importAppFromUrl({
           url: dslUrlValue || '',
         })

web/app/components/app/duplicate-modal/index.tsx

@@ -13,7 +13,7 @@ import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import type { AppIconType } from '@/types/app'
 
-export type DuplicateAppModalProps = {
+export interface DuplicateAppModalProps {
   appName: string
   icon_type: AppIconType | null
   icon: string

web/app/components/app/log-annotation/index.tsx

@@ -12,7 +12,7 @@ import { PageType } from '@/app/components/base/features/new-feature-panel/annot
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
-type Props = {
+interface Props {
   pageType: PageType
 }
 

web/app/components/app/log/filter.tsx

@@ -27,7 +27,7 @@ export const TIME_PERIOD_LIST = [
   { value: 'all', name: 'allTime' },
 ]
 
-type IFilterProps = {
+interface IFilterProps {
   isChatMode?: boolean
   appId: string
   queryParams: QueryParam

web/app/components/app/log/index.tsx

@@ -17,11 +17,11 @@ import Loading from '@/app/components/base/loading'
 import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
 import { APP_PAGE_LIMIT } from '@/config'
 import type { App, AppMode } from '@/types/app'
-export type ILogsProps = {
+export interface ILogsProps {
   appDetail: App
 }
 
-export type QueryParam = {
+export interface QueryParam {
   period?: number | string
   annotation_status?: string
   keyword?: string

web/app/components/app/log/list.tsx

@@ -13,7 +13,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
-import { createContext, useContext } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
 import type { ChatItemInTree } from '../../base/chat/types'
@@ -44,6 +44,8 @@ import Tooltip from '@/app/components/base/tooltip'
 import { CopyIcon } from '@/app/components/base/copy-icon'
 import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
+import { correctProvider } from '@/utils'
+import { createSelectorCtx } from '@/utils/context'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -61,7 +63,7 @@ type IDrawerContext = {
   appDetail?: App
 }
 
-const DrawerContext = createContext<IDrawerContext>({} as IDrawerContext)
+const [,, DrawerContext] = createSelectorCtx<IDrawerContext>()
 
 /**
  * Icon component with numbers
@@ -324,7 +326,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
   })?.name ?? 'custom'
 
   const modelName = (detail.model_config as any).model?.name
-  const provideName = (detail.model_config as any).model?.provider as any
+  const provideName = correctProvider((detail.model_config as any).model?.provider as any)
   const {
     currentModel,
     currentProvider,

web/app/components/app/overview/apikey-info-panel/progress/index.tsx

@@ -20,7 +20,7 @@ const Progress: FC<IProgressProps> = ({
         className={cn(s.bar, exhausted && s['bar-error'], 'absolute top-0 left-0 right-0 bottom-0')}
         style={{ width: `${value}%` }}
       />
-      {Array(10).fill(0).map((i, k) => (
+      {Array.from({ length: 10 }).fill(0).map((i, k) => (
         <div key={k} className={s['bar-item']} />
       ))}
     </div>

web/app/components/app/overview/appChart.tsx

@@ -243,7 +243,7 @@ const Chart: React.FC<IChartProps> = ({
             ? ''
             : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
               <span className='ml-1 text-gray-500'>(</span>
-              <span className='text-orange-400'>~{sum(statistics.map(item => parseFloat(get(item, 'total_price', '0')))).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 })}</span>
+              <span className='text-orange-400'>~{sum(statistics.map(item => Number.parseFloat(get(item, 'total_price', '0')))).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 })}</span>
               <span className='text-gray-500'>)</span>
             </span></span>}
           textStyle={{ main: `!text-3xl !font-normal ${sumData === 0 ? '!text-gray-300' : ''}` }} />

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

@@ -22,7 +22,7 @@ import AppContext, { useAppContext } from '@/context/app-context'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 
-export type ISettingsModalProps = {
+export interface ISettingsModalProps {
   isChat: boolean
   appInfo: AppDetailResponse & Partial<AppSSO>
   isShow: boolean
@@ -31,7 +31,7 @@ export type ISettingsModalProps = {
   onSave?: (params: ConfigParams) => Promise<void>
 }
 
-export type ConfigParams = {
+export interface ConfigParams {
   title: string
   description: string
   default_language: string

web/app/components/app/store.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand'
 import type { App, AppSSO } from '@/types/app'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 
-type State = {
+interface State {
   appDetail?: App & Partial<AppSSO>
   appSidebarExpand: string
   currentLogItem?: IChatItem
@@ -13,7 +13,7 @@ type State = {
   showAppConfigureFeaturesModal: boolean
 }
 
-type Action = {
+interface Action {
   setAppDetail: (appDetail?: App & Partial<AppSSO>) => void
   setAppSiderbarExpand: (state: string) => void
   setCurrentLogItem: (item?: IChatItem) => void

web/app/components/app/switch-app-modal/index.tsx

@@ -25,7 +25,7 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/aler
 import AppIcon from '@/app/components/base/app-icon'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
-type SwitchAppModalProps = {
+interface SwitchAppModalProps {
   show: boolean
   appDetail: App
   onSuccess?: () => void

web/app/components/app/text-generate/item/index.tsx

@@ -33,7 +33,7 @@ import { useChatContext } from '@/app/components/base/chat/chat/context'
 
 const MAX_DEPTH = 3
 
-export type IGenerationItemProps = {
+export interface IGenerationItemProps {
   isWorkflow?: boolean
   workflowProcessData?: WorkflowProcess
   className?: string

web/app/components/app/workflow-log/detail.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Run from '@/app/components/workflow/run'
 
-type ILogDetail = {
+interface ILogDetail {
   runID: string
   onClose: () => void
 }

web/app/components/app/workflow-log/filter.tsx

@@ -6,7 +6,7 @@ import type { QueryParam } from './index'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 
-type IFilterProps = {
+interface IFilterProps {
   queryParams: QueryParam
   setQueryParams: (v: QueryParam) => void
 }

web/app/components/app/workflow-log/index.tsx

@@ -16,11 +16,11 @@ import { fetchWorkflowLogs } from '@/service/log'
 import { APP_PAGE_LIMIT } from '@/config'
 import type { App, AppMode } from '@/types/app'
 
-export type ILogsProps = {
+export interface ILogsProps {
   appDetail: App
 }
 
-export type QueryParam = {
+export interface QueryParam {
   status?: string
   keyword?: string
 }

web/app/components/app/workflow-log/list.tsx

@@ -13,7 +13,7 @@ import Indicator from '@/app/components/header/indicator'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
 
-type ILogs = {
+interface ILogs {
   logs?: WorkflowLogsResponse
   appDetail?: App
   onRefresh: () => void

web/app/components/base/action-button/index.css

@@ -2,9 +2,7 @@
 
 @layer components {
     .action-btn {
-        @apply inline-flex justify-center items-center cursor-pointer text-text-tertiary
+        @apply inline-flex justify-center items-center cursor-pointer text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover
-        hover:text-text-secondary 
-        hover:bg-state-base-hover 
     }
 
     .action-btn-disabled {
@@ -29,21 +27,15 @@
     }
 
     .action-btn.action-btn-active {
-        @apply 
+        @apply text-text-accent bg-state-accent-active hover:bg-state-accent-active-alt
-        text-text-accent 
-        bg-state-accent-active
-        hover:bg-state-accent-active-alt
     }
 
     .action-btn.action-btn-disabled {
-        @apply
+        @apply text-text-disabled
-        text-text-disabled
     }
 
     .action-btn.action-btn-destructive {
-        @apply
+        @apply text-text-destructive bg-state-destructive-hover
-        text-text-destructive
-        bg-state-destructive-hover
     }
 
 }

web/app/components/base/action-button/index.tsx

@@ -28,7 +28,7 @@ const actionButtonVariants = cva(
 )
 
 export type ActionButtonProps = {
-  size?: 'xs' | 'm' | 'l' | 'xl'
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants>

web/app/components/base/app-icon/style.module.css

@@ -15,7 +15,7 @@
 }
 
 .appIcon.xs {
-  @apply w-3 h-3 text-base;
+  @apply w-5 h-5 text-base;
 }
 
 .appIcon.rounded {

web/app/components/base/audio-btn/audio.player.manager.ts

@@ -1,6 +1,6 @@
 import AudioPlayer from '@/app/components/base/audio-btn/audio'
 declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  // eslint-disable-next-line ts/consistent-type-definitions
   interface AudioPlayerManager {
     instance: AudioPlayerManager
   }
@@ -12,6 +12,7 @@ export class AudioPlayerManager {
   private audioPlayers: AudioPlayer | null = null
   private msgId: string | undefined
 
+  // eslint-disable-next-line
   private constructor() {
   }
 

web/app/components/base/audio-btn/audio.ts

@@ -2,7 +2,7 @@ import Toast from '@/app/components/base/toast'
 import { textToAudioStream } from '@/service/share'
 
 declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  // eslint-disable-next-line ts/consistent-type-definitions
   interface Window {
     ManagedMediaSource: any
   }

web/app/components/base/audio-btn/index.tsx

@@ -7,7 +7,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 
-type AudioBtnProps = {
+interface AudioBtnProps {
   id?: string
   voice?: string
   value?: string

web/app/components/base/audio-gallery/AudioPlayer.module.css

@@ -2,15 +2,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #ffffff;
+  background-color: var(--color-components-chat-input-audio-bg-alt);
   border-radius: 10px;
   padding: 8px;
   min-width: 240px;
   max-width: 420px;
   max-height: 40px;
   backdrop-filter: blur(5px);
-  border: 1px solid rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--color-components-panel-border-subtle);
-  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
+  box-shadow: 0 1px 2px var(--color-shadow-shadow-3);
   gap: 8px;
 }
 
@@ -19,8 +19,8 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #296DFF;
+  background-color: var(--color-components-button-primary-bg);
-  color: white;
+  color: var(--color-components-chat-input-audio-bg-alt);
   border: none;
   cursor: pointer;
   align-items: center;
@@ -30,16 +30,15 @@
 }
 
 .playButton:hover {
-  background-color: #3367d6;
+  background-color: var(--color-components-button-primary-bg-hover);
 }
 
 .playButton:disabled {
-  background-color: #bdbdbf;
+  background-color: var(--color-components-button-primary-bg-disabled);
 }
 
 .audioControls {
   flex-grow: 1;
-  
 }
 
 .progressBarContainer {
@@ -76,8 +75,8 @@
 
 .timeDisplay {
   /* position: absolute; */
-  color: #296DFF;
+  color: var(--color-text-accent-secondary);
-  border-radius: 2px;
+  font-size: 12px;
   order: 0;
   height: 100%;
   width: 50px;
@@ -97,7 +96,6 @@
 } */
 
 .duration {
-  background-color: rgba(255, 255, 255, 0.8);
   padding: 2px 4px;
   border-radius: 10px;
 }

web/app/components/base/audio-gallery/AudioPlayer.tsx

@@ -55,7 +55,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src }) => {
     audio.load()
 
     // Delayed generation of waveform data
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     const timer = setTimeout(() => generateWaveformData(src), 1000)
 
     return () => {

web/app/components/base/auto-height-textarea/common.tsx

@@ -49,4 +49,6 @@ const AutoHeightTextarea = forwardRef<HTMLTextAreaElement, AutoHeightTextareaPro
   },
 )
 
+AutoHeightTextarea.displayName = 'AutoHeightTextarea'
+
 export default AutoHeightTextarea

web/app/components/base/badge.tsx

@@ -5,22 +5,28 @@ type BadgeProps = {
   className?: string
   text: string
   uppercase?: boolean
+  hasRedCornerMark?: boolean
 }
 
 const Badge = ({
   className,
   text,
   uppercase = true,
+  hasRedCornerMark,
 }: BadgeProps) => {
   return (
     <div
       className={cn(
-        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
+        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
     >
       {text}
+      {hasRedCornerMark && (
+        <div className='absolute top-[-2px] right-[-2px] w-1.5 h-1.5 border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg rounded-[2px] shadow-sm'>
+        </div>
+      )}
     </div>
   )
 }

web/app/components/base/badge/index.css

@@ -0,0 +1,28 @@
+@tailwind components;
+
+@layer components {
+    .badge {
+        @apply inline-flex justify-center items-center text-text-tertiary border border-divider-deep
+    }
+
+    .badge-l {
+        @apply rounded-md gap-1 min-w-6
+    }
+
+    /* m is for the regular button */
+    .badge-m {
+        @apply rounded-md gap-[3px] min-w-5
+    }
+
+    .badge-s {
+        @apply rounded-[5px] gap-0.5 min-w-[18px]
+    }
+
+    .badge.badge-warning {
+        @apply text-text-warning border border-text-warning
+    }
+
+    .badge.badge-accent {
+        @apply text-text-accent-secondary border border-text-accent-secondary
+    }
+}

web/app/components/base/badge/index.tsx

@@ -0,0 +1,81 @@
+import type { CSSProperties, ReactNode } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import classNames from '@/utils/classnames'
+import './index.css'
+
+enum BadgeState {
+  Warning = 'warning',
+  Accent = 'accent',
+  Default = '',
+}
+
+const BadgeVariants = cva(
+  'badge',
+  {
+    variants: {
+      size: {
+        s: 'badge-s',
+        m: 'badge-m',
+        l: 'badge-l',
+      },
+    },
+    defaultVariants: {
+      size: 'm',
+    },
+  },
+)
+
+type BadgeProps = {
+  size?: 's' | 'm' | 'l'
+  iconOnly?: boolean
+  uppercase?: boolean
+  state?: BadgeState
+  styleCss?: CSSProperties
+  children?: ReactNode
+} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof BadgeVariants>
+
+function getBadgeState(state: BadgeState) {
+  switch (state) {
+    case BadgeState.Warning:
+      return 'badge-warning'
+    case BadgeState.Accent:
+      return 'badge-accent'
+    default:
+      return ''
+  }
+}
+
+const Badge: React.FC<BadgeProps> = ({
+  className,
+  size,
+  state = BadgeState.Default,
+  iconOnly = false,
+  uppercase = false,
+  styleCss,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        BadgeVariants({ size, className }),
+        getBadgeState(state),
+        size === 's'
+          ? (iconOnly ? 'p-[3px]' : 'px-[5px] py-[3px]')
+          : size === 'l'
+            ? (iconOnly ? 'p-1.5' : 'px-2 py-1')
+            : (iconOnly ? 'p-1' : 'px-[5px] py-[2px]'),
+        uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium',
+      )}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+Badge.displayName = 'Badge'
+
+export default Badge
+export { Badge, BadgeState, BadgeVariants }

web/app/components/base/button/add-button.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { RiAddLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
-type Props = {
+interface Props {
   className?: string
   onClick: () => void
 }

web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
 import Textarea from '@/app/components/base/textarea'
 
-type InputProps = {
+interface InputProps {
   form: any
   value: string
   onChange: (variable: string, value: string) => void

web/app/components/base/chat/chat-with-history/context.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import type { RefObject } from 'react'
-import { createContext, useContext } from 'use-context-selector'
 import type {
   Callback,
   ChatConfig,
@@ -15,6 +14,7 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
+import { createSelectorCtx } from '@/utils/context'
 
 export type ChatWithHistoryContextValue = {
   appInfoError?: any
@@ -51,29 +51,4 @@ export type ChatWithHistoryContextValue = {
   themeBuilder?: ThemeBuilder
 }
 
-export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
+export const [, useChatWithHistoryContext, ChatWithHistoryContext] = createSelectorCtx<ChatWithHistoryContextValue>()
-  currentConversationId: '',
-  appPrevChatList: [],
-  pinnedConversationList: [],
-  conversationList: [],
-  showConfigPanelBeforeChat: false,
-  newConversationInputs: {},
-  newConversationInputsRef: { current: {} },
-  handleNewConversationInputsChange: () => {},
-  inputsForms: [],
-  handleNewConversation: () => {},
-  handleStartChat: () => {},
-  handleChangeConversation: () => {},
-  handlePinConversation: () => {},
-  handleUnpinConversation: () => {},
-  handleDeleteConversation: () => {},
-  conversationRenaming: false,
-  handleRenameConversation: () => {},
-  handleNewConversationCompleted: () => {},
-  chatShouldReloadKey: '',
-  isMobile: false,
-  isInstalledApp: false,
-  handleFeedback: () => {},
-  currentChatInstanceRef: { current: { handleStop: () => {} } },
-})
-export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)

web/app/components/base/chat/chat-with-history/index.tsx

@@ -20,7 +20,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { checkOrSetAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 
-type ChatWithHistoryProps = {
+interface ChatWithHistoryProps {
   className?: string
 }
 const ChatWithHistory: FC<ChatWithHistoryProps> = ({
@@ -99,7 +99,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
   )
 }
 
-export type ChatWithHistoryWrapProps = {
+export interface ChatWithHistoryWrapProps {
   installedAppInfo?: InstalledApp
   className?: string
 }

web/app/components/base/chat/chat/answer/agent-content.tsx

@@ -8,7 +8,7 @@ import Thought from '@/app/components/base/chat/chat/thought'
 import { FileList } from '@/app/components/base/file-uploader'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 
-type AgentContentProps = {
+interface AgentContentProps {
   item: ChatItem
   responding?: boolean
 }

web/app/components/base/chat/chat/answer/basic-content.tsx

@@ -4,7 +4,7 @@ import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
 import cn from '@/utils/classnames'
 
-type BasicContentProps = {
+interface BasicContentProps {
   item: ChatItem
 }
 const BasicContent: FC<BasicContentProps> = ({

web/app/components/base/chat/chat/answer/index.tsx

@@ -23,7 +23,7 @@ import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows
 import cn from '@/utils/classnames'
 import { FileList } from '@/app/components/base/file-uploader'
 
-type AnswerProps = {
+interface AnswerProps {
   item: ChatItem
   question: string
   index: number