chore: add show api error msg

Merge pull request #118 from langgenius/docs/env-description
docs: add more description to env
2026-02-03 00:55:29 +08:00 · 2024-11-25 13:15:14 +08:00 · 2024-11-22 11:35:27 +08:00 · 2024-11-22 11:33:10 +08:00 · 2024-09-04 18:04:16 +08:00 · 2024-09-04 17:55:45 +08:00
213 changed files with 43953 additions and 341 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +1,18 @@
-# Conversion Web App Template
+# Conversation Web App Template
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

 ## Config App
 Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Setting the following content:
 ```
-# APP ID
+# APP ID: This is the unique identifier for your app. You can find it in the app's detail page URL. 
+# For example, in the URL `https://cloud.dify.ai/app/xxx/workflow`, the value `xxx` is your APP ID.
 NEXT_PUBLIC_APP_ID=
-# APP API key
+
+# APP API Key: This is the key used to authenticate your app's API requests. 
+# You can generate it on the app's "API Access" page by clicking the "API Key" button in the top-right corner.
 NEXT_PUBLIC_APP_KEY=
-# APP URL
+
+# APP URL: This is the API's base URL. If you're using the Dify cloud service, set it to: https://api.dify.ai/v1.
 NEXT_PUBLIC_API_URL=
 ```

@ -68,7 +72,7 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next

 ## Deploy on Vercel

-> ⚠️ If you are using [Vercel Hobby](https://vercel.com/pricing), your message will be trucated due to the limitation of vercel.
+> ⚠️ If you are using [Vercel Hobby](https://vercel.com/pricing), your message will be truncated due to the limitation of vercel.


 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
--- a/app/api/conversations/[conversationId]/name/route.ts
+++ b/app/api/conversations/[conversationId]/name/route.ts
@ -0,0 +1,19 @@
+import { type NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { client, getInfo } from '@/app/api/utils/common'
+
+export async function POST(request: NextRequest, { params }: {
+  params: { conversationId: string }
+}) {
+  const body = await request.json()
+  const {
+    auto_generate,
+    name,
+  } = body
+  const { conversationId } = params
+  const { user } = getInfo(request)
+
+  // auto generate name
+  const { data } = await client.renameConversation(conversationId, name, user, auto_generate)
+  return NextResponse.json(data)
+}
--- a/app/api/conversations/route.ts
+++ b/app/api/conversations/route.ts
@ -1,5 +1,3 @@
-export const dynamic = 'force-dynamic'
-
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { client, getInfo, setSession } from '@/app/api/utils/common'
@ -11,7 +9,11 @@ export async function GET(request: NextRequest) {
    return NextResponse.json(data, {
      headers: setSession(sessionId),
    })
-  } catch (error) {
-    return NextResponse.json([]);
+  }
+  catch (error: any) {
+    return NextResponse.json({
+      data: [],
+      error: error.message,
+    })
  }
 }
--- a/app/api/parameters/route.ts
+++ b/app/api/parameters/route.ts
@ -9,7 +9,8 @@ export async function GET(request: NextRequest) {
    return NextResponse.json(data as object, {
      headers: setSession(sessionId),
    })
-  } catch (error) {
-    return NextResponse.json([]);
+  }
+  catch (error) {
+    return NextResponse.json([])
  }
 }
--- a/app/components/app-unavailable.tsx
+++ b/app/components/app-unavailable.tsx
@ -4,25 +4,25 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'

 type IAppUnavailableProps = {
-  isUnknwonReason: boolean
+  isUnknownReason: boolean
  errMessage?: string
 }

 const AppUnavailable: FC<IAppUnavailableProps> = ({
-  isUnknwonReason,
+  isUnknownReason,
  errMessage,
 }) => {
  const { t } = useTranslation()
  let message = errMessage
  if (!errMessage)
-    message = (isUnknwonReason ? t('app.common.appUnkonwError') : t('app.common.appUnavailable')) as string
+    message = (isUnknownReason ? t('app.common.appUnkonwError') : t('app.common.appUnavailable')) as string

  return (
    <div className='flex items-center justify-center w-screen h-screen'>
      <h1 className='mr-5 h-[50px] leading-[50px] pr-5 text-[24px] font-medium'
        style={{
          borderRight: '1px solid rgba(0,0,0,.3)',
-        }}>{(errMessage || isUnknwonReason) ? 500 : 404}</h1>
+        }}>{(errMessage || isUnknownReason) ? 500 : 404}</h1>
      <div className='text-sm'>{message}</div>
    </div>
  )
--- a/app/components/base/app-icon/index.tsx
+++ b/app/components/base/app-icon/index.tsx
@ -3,7 +3,7 @@ import classNames from 'classnames'
 import style from './style.module.css'

 export type AppIconProps = {
-  size?: 'tiny' | 'small' | 'medium' | 'large'
+  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
  rounded?: boolean
  icon?: string
  background?: string
--- a/app/components/base/app-icon/style.module.css
+++ b/app/components/base/app-icon/style.module.css
@ -1,15 +1,23 @@
 .appIcon {
  @apply flex items-center justify-center relative w-9 h-9 text-lg bg-teal-100 rounded-lg grow-0 shrink-0;
 }
+
 .appIcon.large {
  @apply w-10 h-10;
 }
+
 .appIcon.small {
  @apply w-8 h-8;
 }
+
+.appIcon.xs {
+  @apply w-3 h-3 text-base;
+}
+
 .appIcon.tiny {
  @apply w-6 h-6 text-base;
 }
+
 .appIcon.rounded {
  @apply rounded-full;
-}
+}
--- a/app/components/base/icons/line/alert-circle/AlertCircle.json
+++ b/app/components/base/icons/line/alert-circle/AlertCircle.json
@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "17",
+			"viewBox": "0 0 16 17",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Error"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M7.99992 5.83337V8.50004M7.99992 11.1667H8.00659M14.6666 8.50004C14.6666 12.1819 11.6818 15.1667 7.99992 15.1667C4.31802 15.1667 1.33325 12.1819 1.33325 8.50004C1.33325 4.81814 4.31802 1.83337 7.99992 1.83337C11.6818 1.83337 14.6666 4.81814 14.6666 8.50004Z",
+							"stroke": "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "AlertCircle"
+}
--- a/app/components/base/icons/line/alert-circle/index.tsx
+++ b/app/components/base/icons/line/alert-circle/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AlertCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AlertCircle'
+
+export default Icon
--- a/app/components/base/icons/line/alert-triangle/AlertTriangle.json
+++ b/app/components/base/icons/line/alert-triangle/AlertTriangle.json
@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "alert-triangle"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M7.99977 5.33314V7.99981M7.99977 10.6665H8.00644M6.85977 1.90648L1.2131 11.3331C1.09668 11.5348 1.03508 11.7633 1.03443 11.9962C1.03378 12.229 1.0941 12.4579 1.20939 12.6602C1.32468 12.8624 1.49092 13.031 1.69157 13.149C1.89223 13.2671 2.1203 13.3306 2.3531 13.3331H13.6464C13.8792 13.3306 14.1073 13.2671 14.308 13.149C14.5086 13.031 14.6749 12.8624 14.7902 12.6602C14.9054 12.4579 14.9658 12.229 14.9651 11.9962C14.9645 11.7633 14.9029 11.5348 14.7864 11.3331L9.13977 1.90648C9.02092 1.71055 8.85358 1.54856 8.6539 1.43613C8.45422 1.32371 8.22893 1.26465 7.99977 1.26465C7.77061 1.26465 7.54532 1.32371 7.34564 1.43613C7.14596 1.54856 6.97862 1.71055 6.85977 1.90648Z",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "AlertTriangle"
+}
--- a/app/components/base/icons/line/alert-triangle/index.tsx
+++ b/app/components/base/icons/line/alert-triangle/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AlertTriangle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AlertTriangle'
+
+export default Icon
--- a/app/components/base/icons/line/arrows/chevron-down/data.json
+++ b/app/components/base/icons/line/arrows/chevron-down/data.json
@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "12",
+			"height": "12",
+			"viewBox": "0 0 12 12",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "chevron-down"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M3 4.5L6 7.5L9 4.5",
+							"stroke": "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ChevronDown"
+}
--- a/app/components/base/icons/line/arrows/chevron-down/index.tsx
+++ b/app/components/base/icons/line/arrows/chevron-down/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './data.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ChevronDown'
+
+export default Icon
--- a/app/components/base/icons/line/arrows/collapse-04/Collapse04.json
+++ b/app/components/base/icons/line/arrows/collapse-04/Collapse04.json
@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4 14H10M10 14V20M10 14L3 21M20 10H14M14 10V4M14 10L21 3M20 14V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H14M10 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.07989 4 7.2V10",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Collapse04"
+}
--- a/app/components/base/icons/line/arrows/collapse-04/index.tsx
+++ b/app/components/base/icons/line/arrows/collapse-04/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Collapse04.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Collapse04'
+
+export default Icon
--- a/app/components/base/icons/line/check-circle/CheckCircle.json
+++ b/app/components/base/icons/line/check-circle/CheckCircle.json
@ -0,0 +1,66 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "check-circle",
+					"clip-path": "url(#clip0_465_21765)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M4.37533 6.99984L6.12533 8.74984L9.62533 5.24984M12.8337 6.99984C12.8337 10.2215 10.222 12.8332 7.00033 12.8332C3.77866 12.8332 1.16699 10.2215 1.16699 6.99984C1.16699 3.77818 3.77866 1.1665 7.00033 1.1665C10.222 1.1665 12.8337 3.77818 12.8337 6.99984Z",
+							"stroke": "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_465_21765"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "14",
+									"height": "14",
+									"fill": "white"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "CheckCircle"
+}
--- a/app/components/base/icons/line/check-circle/index.tsx
+++ b/app/components/base/icons/line/check-circle/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './CheckCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'CheckCircle'
+
+export default Icon
--- a/app/components/base/icons/line/chevron-right/ChevronRight.json
+++ b/app/components/base/icons/line/chevron-right/ChevronRight.json
@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "chevron-right"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M5.25 10.5L8.75 7L5.25 3.5",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ChevronRight"
+}
--- a/app/components/base/icons/line/chevron-right/index.tsx
+++ b/app/components/base/icons/line/chevron-right/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ChevronRight.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ChevronRight'
+
+export default Icon
--- a/app/components/base/icons/line/files/Clipboard.json
+++ b/app/components/base/icons/line/files/Clipboard.json
@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M16 4C16.93 4 17.395 4 17.7765 4.10222C18.8117 4.37962 19.6204 5.18827 19.8978 6.22354C20 6.60504 20 7.07003 20 8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V8C4 7.07003 4 6.60504 4.10222 6.22354C4.37962 5.18827 5.18827 4.37962 6.22354 4.10222C6.60504 4 7.07003 4 8 4M9.6 6H14.4C14.9601 6 15.2401 6 15.454 5.89101C15.6422 5.79513 15.7951 5.64215 15.891 5.45399C16 5.24008 16 4.96005 16 4.4V3.6C16 3.03995 16 2.75992 15.891 2.54601C15.7951 2.35785 15.6422 2.20487 15.454 2.10899C15.2401 2 14.9601 2 14.4 2H9.6C9.03995 2 8.75992 2 8.54601 2.10899C8.35785 2.20487 8.20487 2.35785 8.10899 2.54601C8 2.75992 8 3.03995 8 3.6V4.4C8 4.96005 8 5.24008 8.10899 5.45399C8.20487 5.64215 8.35785 5.79513 8.54601 5.89101C8.75992 6 9.03995 6 9.6 6Z",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Clipboard"
+}
--- a/app/components/base/icons/line/files/Clipboard.tsx
+++ b/app/components/base/icons/line/files/Clipboard.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Clipboard.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Clipboard'
+
+export default Icon
--- a/app/components/base/icons/line/files/ClipboardCheck.json
+++ b/app/components/base/icons/line/files/ClipboardCheck.json
@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M16 4C16.93 4 17.395 4 17.7765 4.10222C18.8117 4.37962 19.6204 5.18827 19.8978 6.22354C20 6.60504 20 7.07003 20 8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V8C4 7.07003 4 6.60504 4.10222 6.22354C4.37962 5.18827 5.18827 4.37962 6.22354 4.10222C6.60504 4 7.07003 4 8 4M9 15L11 17L15.5 12.5M9.6 6H14.4C14.9601 6 15.2401 6 15.454 5.89101C15.6422 5.79513 15.7951 5.64215 15.891 5.45399C16 5.24008 16 4.96005 16 4.4V3.6C16 3.03995 16 2.75992 15.891 2.54601C15.7951 2.35785 15.6422 2.20487 15.454 2.10899C15.2401 2 14.9601 2 14.4 2H9.6C9.03995 2 8.75992 2 8.54601 2.10899C8.35785 2.20487 8.20487 2.35785 8.10899 2.54601C8 2.75992 8 3.03995 8 3.6V4.4C8 4.96005 8 5.24008 8.10899 5.45399C8.20487 5.64215 8.35785 5.79513 8.54601 5.89101C8.75992 6 9.03995 6 9.6 6Z",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "ClipboardCheck"
+}
--- a/app/components/base/icons/line/files/ClipboardCheck.tsx
+++ b/app/components/base/icons/line/files/ClipboardCheck.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ClipboardCheck.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ClipboardCheck'
+
+export default Icon
--- a/app/components/base/icons/line/files/index.ts
+++ b/app/components/base/icons/line/files/index.ts
@ -0,0 +1,2 @@
+export { default as ClipboardCheck } from './ClipboardCheck'
+export { default as Clipboard } from './Clipboard'
--- a/app/components/base/icons/public/data-set/data.json
+++ b/app/components/base/icons/public/data-set/data.json
@ -0,0 +1,64 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "12",
+			"height": "12",
+			"viewBox": "0 0 12 12",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"clip-path": "url(#clip0_7847_32895)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M10.5 2.5C10.5 3.32843 8.48528 4 6 4C3.51472 4 1.5 3.32843 1.5 2.5M10.5 2.5C10.5 1.67157 8.48528 1 6 1C3.51472 1 1.5 1.67157 1.5 2.5M10.5 2.5V9.5C10.5 10.33 8.5 11 6 11C3.5 11 1.5 10.33 1.5 9.5V2.5M10.5 6C10.5 6.83 8.5 7.5 6 7.5C3.5 7.5 1.5 6.83 1.5 6",
+							"stroke": "#667085",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_7847_32895"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "12",
+									"height": "12",
+									"fill": "white"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "DataSet"
+}
--- a/app/components/base/icons/public/data-set/index.tsx
+++ b/app/components/base/icons/public/data-set/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './data.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'DataSet'
+
+export default Icon
--- a/app/components/base/icons/solid/alert-circle/AlertCircle.json
+++ b/app/components/base/icons/solid/alert-circle/AlertCircle.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "alert-circle"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M8 0.666626C3.94992 0.666626 0.666672 3.94987 0.666672 7.99996C0.666672 12.05 3.94992 15.3333 8 15.3333C12.0501 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.0501 0.666626 8 0.666626ZM8.66667 5.33329C8.66667 4.9651 8.36819 4.66663 8 4.66663C7.63181 4.66663 7.33334 4.9651 7.33334 5.33329V7.99996C7.33334 8.36815 7.63181 8.66663 8 8.66663C8.36819 8.66663 8.66667 8.36815 8.66667 7.99996V5.33329ZM8 9.99996C7.63181 9.99996 7.33334 10.2984 7.33334 10.6666C7.33334 11.0348 7.63181 11.3333 8 11.3333H8.00667C8.37486 11.3333 8.67334 11.0348 8.67334 10.6666C8.67334 10.2984 8.37486 9.99996 8.00667 9.99996H8Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "AlertCircle"
+}
--- a/app/components/base/icons/solid/alert-circle/index.tsx
+++ b/app/components/base/icons/solid/alert-circle/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AlertCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AlertCircle'
+
+export default Icon
--- a/app/components/base/icons/solid/expand-04/Expand04.json
+++ b/app/components/base/icons/solid/expand-04/Expand04.json
@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "15",
+			"viewBox": "0 0 14 15",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon_2",
+							"d": "M11.6667 8.66667V10.3C11.6667 10.9534 11.6667 11.2801 11.5395 11.5297C11.4277 11.7492 11.2492 11.9277 11.0297 12.0395C10.7801 12.1667 10.4534 12.1667 9.8 12.1667H8.16667M5.83333 2.83333H4.2C3.54661 2.83333 3.21991 2.83333 2.97034 2.96049C2.75082 3.07234 2.57234 3.25082 2.46049 3.47034C2.33333 3.71991 2.33333 4.04661 2.33333 4.7V6.33333M8.75 5.75L12.25 2.25M12.25 2.25H8.75M12.25 2.25V5.75M5.25 9.25L1.75 12.75M1.75 12.75H5.25M1.75 12.75L1.75 9.25",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Expand04"
+}
--- a/app/components/base/icons/solid/expand-04/index.tsx
+++ b/app/components/base/icons/solid/expand-04/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Expand04.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Expand04'
+
+export default Icon
--- a/app/components/base/icons/solid/general/check-circle/data.json
+++ b/app/components/base/icons/solid/general/check-circle/data.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "check-circle"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M8 0.666626C3.94992 0.666626 0.666672 3.94987 0.666672 7.99996C0.666672 12.05 3.94992 15.3333 8 15.3333C12.0501 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.0501 0.666626 8 0.666626ZM11.4714 6.47136C11.7318 6.21101 11.7318 5.7889 11.4714 5.52855C11.2111 5.26821 10.7889 5.26821 10.5286 5.52855L7 9.05715L5.47141 7.52855C5.21106 7.2682 4.78895 7.2682 4.5286 7.52855C4.26825 7.7889 4.26825 8.21101 4.5286 8.47136L6.5286 10.4714C6.78895 10.7317 7.21106 10.7317 7.47141 10.4714L11.4714 6.47136Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "CheckCircle"
+}
--- a/app/components/base/icons/solid/general/check-circle/index.tsx
+++ b/app/components/base/icons/solid/general/check-circle/index.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './data.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'CheckCircle'
+
+export default Icon
--- a/app/components/base/icons/workflow/Answer.json
+++ b/app/components/base/icons/workflow/Answer.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/answer"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M3.50114 1.67701L10.5011 1.677C11.5079 1.677 12.3241 2.49311 12.3241 3.49992V9.35414C12.3241 10.3609 11.5079 11.177 10.5012 11.1771H8.9954L7.41734 12.4845C7.17339 12.6866 6.81987 12.6856 6.57708 12.4821L5.02026 11.1771H3.50114C2.49436 11.1771 1.67822 10.3608 1.67822 9.35414V3.49993C1.67822 2.49316 2.49437 1.67701 3.50114 1.67701ZM10.5011 2.9895L3.50114 2.98951C3.21924 2.98951 2.99072 3.21803 2.99072 3.49993V9.35414C2.99072 9.63601 3.21926 9.86455 3.50114 9.86455H5.04675C5.33794 9.86455 5.61984 9.96705 5.84302 10.1541L7.00112 11.1249L8.17831 10.1496C8.40069 9.96537 8.68041 9.86455 8.96916 9.86455H10.5011C10.5011 9.86455 10.5011 9.86455 10.5011 9.86455C10.783 9.8645 11.0116 9.63592 11.0116 9.35414V3.49992C11.0116 3.21806 10.7831 2.9895 10.5011 2.9895ZM9.06809 4.93171C9.32437 5.18799 9.32437 5.60351 9.06809 5.85979L7.02642 7.90146C6.77014 8.15774 6.35464 8.15774 6.09835 7.90146L5.22333 7.02646C4.96704 6.77019 4.96704 6.35467 5.22332 6.09839C5.4796 5.8421 5.89511 5.8421 6.15139 6.09837L6.56238 6.50935L8.14001 4.93171C8.3963 4.67543 8.81181 4.67543 9.06809 4.93171Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Answer"
+}
--- a/app/components/base/icons/workflow/Answer.tsx
+++ b/app/components/base/icons/workflow/Answer.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Answer.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Answer'
+
+export default Icon
--- a/app/components/base/icons/workflow/Code.json
+++ b/app/components/base/icons/workflow/Code.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/code"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M8.32593 1.69675C8.67754 1.78466 8.89132 2.14096 8.80342 2.49257L6.47009 11.8259C6.38218 12.1775 6.02588 12.3913 5.67427 12.3034C5.32265 12.2155 5.10887 11.8592 5.19678 11.5076L7.53011 2.17424C7.61801 1.82263 7.97431 1.60885 8.32593 1.69675ZM3.96414 4.20273C4.22042 4.45901 4.22042 4.87453 3.96413 5.13081L2.45578 6.63914C2.45577 6.63915 2.45578 6.63914 2.45578 6.63914C2.25645 6.83851 2.25643 7.16168 2.45575 7.36103C2.45574 7.36103 2.45576 7.36104 2.45575 7.36103L3.96413 8.86936C4.22041 9.12564 4.22042 9.54115 3.96414 9.79744C3.70787 10.0537 3.29235 10.0537 3.03607 9.79745L1.52769 8.28913C0.815811 7.57721 0.815803 6.42302 1.52766 5.7111L3.03606 4.20272C3.29234 3.94644 3.70786 3.94644 3.96414 4.20273ZM10.0361 4.20273C10.2923 3.94644 10.7078 3.94644 10.9641 4.20272L12.4725 5.71108C13.1843 6.423 13.1844 7.57717 12.4725 8.28909L10.9641 9.79745C10.7078 10.0537 10.2923 10.0537 10.036 9.79744C9.77977 9.54115 9.77978 9.12564 10.0361 8.86936L11.5444 7.36107C11.7437 7.16172 11.7438 6.83854 11.5444 6.63917C11.5444 6.63915 11.5445 6.63918 11.5444 6.63917L10.0361 5.13081C9.77978 4.87453 9.77978 4.45901 10.0361 4.20273Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Code"
+}
--- a/app/components/base/icons/workflow/Code.tsx
+++ b/app/components/base/icons/workflow/Code.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Code.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Code'
+
+export default Icon
--- a/app/components/base/icons/workflow/End.json
+++ b/app/components/base/icons/workflow/End.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/end"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M6.67315 1.18094C6.87691 1.0639 7.12769 1.06475 7.33067 1.18315L10.8307 3.22481C11.0323 3.34242 11.1562 3.55826 11.1562 3.79167C11.1562 4.02507 11.0323 4.24091 10.8307 4.35852L7.65625 6.21026V9.91667C7.65625 10.2791 7.36244 10.5729 7 10.5729C6.63756 10.5729 6.34375 10.2791 6.34375 9.91667V5.84577C6.34361 5.83788 6.34361 5.83 6.34375 5.82213V1.75C6.34375 1.51502 6.46939 1.29797 6.67315 1.18094ZM7.65625 4.69078L9.19758 3.79167L7.65625 2.89256V4.69078ZM5.31099 8.25466C5.37977 8.61051 5.14704 8.95473 4.79119 9.0235C3.97285 9.18165 3.32667 9.41764 2.90374 9.67762C2.45323 9.95454 2.40625 10.1564 2.40625 10.2086C2.40625 10.2448 2.42254 10.3508 2.60674 10.5202C2.79151 10.6901 3.09509 10.8732 3.52555 11.0406C4.38229 11.3738 5.61047 11.594 7 11.594C8.38954 11.594 9.61773 11.3738 10.4745 11.0406C10.9049 10.8732 11.2085 10.6901 11.3933 10.5202C11.5775 10.3508 11.5938 10.2448 11.5938 10.2086C11.5938 10.1564 11.5468 9.95454 11.0963 9.67762C10.6733 9.41764 10.0271 9.18165 9.20881 9.0235C8.85296 8.95473 8.62023 8.61051 8.68901 8.25465C8.75778 7.8988 9.102 7.66608 9.45786 7.73485C10.3682 7.91077 11.1803 8.18867 11.7836 8.55947C12.3592 8.91331 12.9062 9.45912 12.9062 10.2086C12.9062 10.7361 12.6287 11.1672 12.2816 11.4864C11.935 11.805 11.4698 12.0618 10.9502 12.2639C9.90679 12.6696 8.50997 12.9065 7 12.9065C5.49004 12.9065 4.09322 12.6696 3.04983 12.2639C2.53023 12.0618 2.06497 11.805 1.7184 11.4864C1.37128 11.1672 1.09375 10.7361 1.09375 10.2086C1.09375 9.45913 1.64077 8.91332 2.21642 8.55947C2.81966 8.18867 3.63181 7.91077 4.54215 7.73485C4.898 7.66608 5.24222 7.8988 5.31099 8.25466Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "End"
+}
--- a/app/components/base/icons/workflow/End.tsx
+++ b/app/components/base/icons/workflow/End.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './End.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'End'
+
+export default Icon
--- a/app/components/base/icons/workflow/Home.json
+++ b/app/components/base/icons/workflow/Home.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/home"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M6.99999 2.44562C6.97241 2.46663 6.94086 2.49116 6.90151 2.52177L3.43971 5.21428C3.17896 5.41708 3.15115 5.44593 3.13396 5.46918C3.10759 5.50483 3.08794 5.545 3.07599 5.58771C3.0682 5.61555 3.0625 5.65522 3.0625 5.98554V9.67837C3.0625 9.97506 3.06301 10.1581 3.07422 10.2954C3.08463 10.4228 3.10101 10.4541 3.10219 10.4563C3.13714 10.5249 3.19296 10.5808 3.26156 10.6157C3.2638 10.6169 3.29514 10.6333 3.42254 10.6437C3.55984 10.6549 3.74289 10.6555 4.03958 10.6555H4.8125V7.53462C4.8125 7.52831 4.81249 7.52199 4.81249 7.51565C4.81247 7.38933 4.81245 7.25834 4.82163 7.14594C4.8319 7.02025 4.85685 6.86124 4.93966 6.69872C5.05151 6.4792 5.22998 6.30072 5.44951 6.18886C5.61203 6.10605 5.77104 6.08111 5.89673 6.07084C6.00913 6.06166 6.14012 6.06168 6.26644 6.0617C6.27278 6.0617 6.2791 6.06171 6.28541 6.06171H7.71458C7.72089 6.06171 7.72721 6.0617 7.73355 6.0617C7.85987 6.06168 7.99086 6.06166 8.10326 6.07084C8.22896 6.08111 8.38796 6.10605 8.55049 6.18886C8.77001 6.30072 8.94849 6.4792 9.06034 6.69872C9.14315 6.86124 9.16809 7.02025 9.17836 7.14594C9.18755 7.25834 9.18752 7.38933 9.1875 7.51565C9.1875 7.52199 9.1875 7.52831 9.1875 7.53462V10.6555H9.96041C10.2571 10.6555 10.4402 10.6549 10.5775 10.6437C10.7049 10.6333 10.7361 10.6169 10.7383 10.6158C10.8069 10.5808 10.8628 10.525 10.8978 10.4564C10.8989 10.4541 10.9154 10.4228 10.9258 10.2954C10.937 10.1581 10.9375 9.97506 10.9375 9.67837V5.98554C10.9375 5.65522 10.9318 5.61555 10.924 5.58771C10.912 5.545 10.8924 5.50483 10.866 5.46918C10.8488 5.44593 10.821 5.41708 10.5603 5.21428L7.09848 2.52177C7.05913 2.49116 7.02757 2.46663 6.99999 2.44562ZM9.98433 11.968C10.2497 11.968 10.4871 11.968 10.6843 11.9519C10.8951 11.9346 11.1172 11.8958 11.3343 11.7852C11.6499 11.6244 11.9064 11.3678 12.0672 11.0523C12.1778 10.8351 12.2167 10.6131 12.2339 10.4023C12.25 10.205 12.25 9.96764 12.25 9.70225L12.25 5.98554C12.25 5.9671 12.25 5.94866 12.2501 5.93025C12.2504 5.69307 12.2508 5.45861 12.1879 5.23392C12.1329 5.03748 12.0426 4.85272 11.9213 4.68871C11.7825 4.50112 11.5972 4.35747 11.4098 4.21216C11.3952 4.20087 11.3806 4.18958 11.3661 4.17826L7.90428 1.48574C7.89214 1.4763 7.87933 1.46621 7.86587 1.4556C7.73357 1.35131 7.53852 1.19755 7.3049 1.1343C7.10523 1.08023 6.89477 1.08023 6.69509 1.1343C6.46148 1.19755 6.26642 1.35131 6.13412 1.4556C6.12066 1.46621 6.10785 1.4763 6.09571 1.48574L2.63391 4.17826C2.61935 4.18958 2.60478 4.20088 2.59022 4.21216C2.40278 4.35747 2.21747 4.50112 2.07873 4.68871C1.95742 4.85271 1.86706 5.03748 1.81207 5.23392C1.74918 5.4586 1.74956 5.69307 1.74994 5.93024C1.74997 5.94866 1.75 5.96709 1.75 5.98554L1.75 9.70227C1.74998 9.96765 1.74997 10.205 1.76608 10.4023C1.78331 10.6131 1.82216 10.8351 1.93279 11.0523C2.09357 11.3678 2.35014 11.6244 2.6657 11.7852C2.88282 11.8958 3.10485 11.9346 3.31566 11.9519C3.5129 11.968 3.75029 11.968 4.01566 11.968H9.98433ZM7.875 10.6555V7.53462C7.875 7.47093 7.87498 7.41945 7.87447 7.37473C7.82975 7.37422 7.77828 7.37421 7.71458 7.37421H6.28541C6.22172 7.37421 6.17024 7.37422 6.12553 7.37473C6.12501 7.41945 6.125 7.47093 6.125 7.53462V10.6555H7.875Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Home"
+}
--- a/app/components/base/icons/workflow/Home.tsx
+++ b/app/components/base/icons/workflow/Home.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Home.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Home'
+
+export default Icon
--- a/app/components/base/icons/workflow/Http.json
+++ b/app/components/base/icons/workflow/Http.json
@ -0,0 +1,71 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/http"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M13.0968 4.66675H10.8387V9.18288H11.7419V7.82804H13.0968C13.3362 7.82772 13.5658 7.73245 13.7351 7.56313C13.9044 7.39382 13.9997 7.16426 14 6.92481V5.56997C13.9997 5.33051 13.9045 5.10093 13.7351 4.9316C13.5658 4.76227 13.3362 4.66702 13.0968 4.66675ZM11.7419 6.92481V5.56997H13.0968L13.0972 6.92481H11.7419Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M4.06452 5.56997H4.96774V9.18288H5.87097V5.56997H6.77419V4.66675H4.06452V5.56997Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.93548 4.66675H7.22581V5.56997H8.12903V9.18288H9.03226V5.56997H9.93548V4.66675Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M2.25806 4.66675V6.4732H0.903226V4.66675H0V9.18288H0.903226V7.37643H2.25806V9.18288H3.16129V4.66675H2.25806Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Http"
+}
--- a/app/components/base/icons/workflow/Http.tsx
+++ b/app/components/base/icons/workflow/Http.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Http.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Http'
+
+export default Icon
--- a/app/components/base/icons/workflow/IfElse.json
+++ b/app/components/base/icons/workflow/IfElse.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/if-else"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M8.16667 2.98975C7.80423 2.98975 7.51042 2.69593 7.51042 2.3335C7.51042 1.97106 7.80423 1.67725 8.16667 1.67725H11.0833C11.4458 1.67725 11.7396 1.97106 11.7396 2.3335V5.25016C11.7396 5.6126 11.4458 5.90641 11.0833 5.90641C10.7209 5.90641 10.4271 5.6126 10.4271 5.25016V3.91782L7.34474 7.00016L10.4271 10.0825V8.75016C10.4271 8.38773 10.7209 8.09391 11.0833 8.09391C11.4458 8.09391 11.7396 8.38773 11.7396 8.75016V11.6668C11.7396 12.0293 11.4458 12.3231 11.0833 12.3231H8.16667C7.80423 12.3231 7.51042 12.0293 7.51042 11.6668C7.51042 11.3044 7.80423 11.0106 8.16667 11.0106H9.49901L6.14484 7.65641H1.75C1.38756 7.65641 1.09375 7.3626 1.09375 7.00016C1.09375 6.63773 1.38756 6.34391 1.75 6.34391H6.14484L9.49901 2.98975H8.16667Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "IfElse"
+}
--- a/app/components/base/icons/workflow/IfElse.tsx
+++ b/app/components/base/icons/workflow/IfElse.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './IfElse.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'IfElse'
+
+export default Icon
--- a/app/components/base/icons/workflow/KnowledgeRetrieval.json
+++ b/app/components/base/icons/workflow/KnowledgeRetrieval.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/knowledge-retrieval"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M3.78528 2.62834C3.78527 2.62834 3.78528 2.62834 3.78528 2.62834L8 3.56494L12.2147 2.62834C13.5158 2.33921 14.75 3.32924 14.75 4.66206V11.2637C14.75 12.2401 14.0718 13.0855 13.1187 13.2974L8.1627 14.3987C8.05554 14.4225 7.94446 14.4225 7.8373 14.3987L2.88139 13.2974C1.92824 13.0855 1.25 12.2401 1.25 11.2637V4.66206C1.25 3.32925 2.4842 2.33921 3.78528 2.62834ZM7.25 4.93487L3.45988 4.09262C3.09558 4.01166 2.75 4.28887 2.75 4.66206V11.2637C2.75 11.537 2.93986 11.7738 3.20679 11.8331C3.20678 11.8331 3.20681 11.8331 3.20679 11.8331L7.25 12.7316V4.93487ZM8.75 12.7316L12.7932 11.8331C13.0601 11.7738 13.25 11.537 13.25 11.2637V4.66206C13.25 4.28887 12.9044 4.01165 12.5401 4.09262L8.75 4.93487V12.7316Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "KnowledgeRetrieval"
+}
--- a/app/components/base/icons/workflow/KnowledgeRetrieval.tsx
+++ b/app/components/base/icons/workflow/KnowledgeRetrieval.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './KnowledgeRetrieval.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'KnowledgeRetrieval'
+
+export default Icon
--- a/app/components/base/icons/workflow/Llm.json
+++ b/app/components/base/icons/workflow/Llm.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/llm"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M5.83333 2.40625C5.04971 2.40625 4.39011 2.94431 4.20689 3.67206C4.13982 3.93846 3.91391 4.1349 3.64078 4.16432C2.94692 4.23906 2.40625 4.82766 2.40625 5.54167C2.40625 5.92943 2.56471 6.27904 2.82212 6.53129C2.94807 6.65472 3.01905 6.82365 3.01905 7C3.01905 7.17635 2.94807 7.34528 2.82212 7.46871C2.56471 7.72096 2.40625 8.07057 2.40625 8.45833C2.40625 9.03652 2.76061 9.53347 3.26651 9.74092C3.45247 9.81717 3.59324 9.97444 3.64849 10.1677C3.8841 10.9917 4.64342 11.5938 5.54167 11.5938C5.82802 11.5938 6.09916 11.533 6.34375 11.4237V9.91667C6.34375 9.31258 5.85409 8.82292 5.25 8.82292C4.88756 8.82292 4.59375 8.5291 4.59375 8.16667C4.59375 7.80423 4.88756 7.51042 5.25 7.51042C5.64385 7.51042 6.0156 7.60503 6.34375 7.77278V2.48514C6.18319 2.43393 6.01183 2.40625 5.83333 2.40625ZM7.65625 2.48514V4.08333C7.65625 4.6874 8.14592 5.17708 8.75 5.17708C9.11244 5.17708 9.40625 5.4709 9.40625 5.83333C9.40625 6.19577 9.11244 6.48958 8.75 6.48958C8.35615 6.48958 7.9844 6.39496 7.65625 6.22722V11.4237C7.90087 11.533 8.17199 11.5938 8.45833 11.5938C9.35657 11.5938 10.1159 10.9917 10.3515 10.1677C10.4068 9.97444 10.5475 9.81717 10.7335 9.74092C11.2394 9.53347 11.5938 9.03652 11.5938 8.45833C11.5938 8.07056 11.4353 7.72096 11.1779 7.46871C11.0519 7.34528 10.981 7.17635 10.981 7C10.981 6.82365 11.0519 6.65472 11.1779 6.53129C11.4353 6.27904 11.5938 5.92944 11.5938 5.54167C11.5938 4.82766 11.0531 4.23906 10.3592 4.16432C10.0861 4.1349 9.86022 3.93847 9.79315 3.67208C9.6099 2.94432 8.95027 2.40625 8.16667 2.40625C7.98817 2.40625 7.81681 2.43393 7.65625 2.48514ZM7.00001 12.565C6.56031 12.7835 6.06472 12.9062 5.54167 12.9062C4.14996 12.9062 2.96198 12.0403 2.48457 10.8188C1.65595 10.3591 1.09375 9.47501 1.09375 8.45833C1.09375 7.9213 1.2511 7.42042 1.52161 7C1.2511 6.57958 1.09375 6.0787 1.09375 5.54167C1.09375 4.30153 1.93005 3.25742 3.06973 2.94157C3.51828 1.85715 4.586 1.09375 5.83333 1.09375C6.24643 1.09375 6.64104 1.17788 7 1.33013C7.35896 1.17788 7.75357 1.09375 8.16667 1.09375C9.41399 1.09375 10.4817 1.85716 10.9303 2.94157C12.0699 3.25742 12.9062 4.30153 12.9062 5.54167C12.9062 6.07869 12.7489 6.57958 12.4784 7C12.7489 7.42043 12.9062 7.92131 12.9062 8.45833C12.9062 9.47502 12.344 10.3591 11.5154 10.8188C11.038 12.0403 9.85003 12.9062 8.45833 12.9062C7.93526 12.9062 7.4397 12.7834 7.00001 12.565Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Llm"
+}
--- a/app/components/base/icons/workflow/Llm.tsx
+++ b/app/components/base/icons/workflow/Llm.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Llm.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Llm'
+
+export default Icon
--- a/app/components/base/icons/workflow/QuestionClassifier.json
+++ b/app/components/base/icons/workflow/QuestionClassifier.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/question-classifier"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M6.34379 3.53597C6.34379 2.35003 7.45832 1.47985 8.60885 1.76749L10.9422 2.35082C11.7537 2.55369 12.323 3.28283 12.323 4.1193V9.88081C12.323 10.7173 11.7537 11.4464 10.9422 11.6493L8.60886 12.2326C7.45832 12.5203 6.34379 11.6501 6.34379 10.4641V3.53597ZM8.29052 3.0408C7.96836 2.96026 7.65629 3.20392 7.65629 3.53597V10.4641C7.65629 10.7962 7.96836 11.0399 8.29051 10.9593L10.6238 10.376C10.6238 10.376 10.6238 10.376 10.6238 10.376C10.8511 10.3192 11.0105 10.115 11.0105 9.88081V4.1193C11.0105 3.88509 10.851 3.68093 10.6239 3.62413L8.29052 3.0408ZM4.66671 2.26048C5.02914 2.26048 5.32296 2.5543 5.32296 2.91673V11.0834C5.32296 11.4458 5.02914 11.7397 4.66671 11.7397C4.30427 11.7397 4.01046 11.4458 4.01046 11.0834V2.91673C4.01046 2.5543 4.30427 2.26048 4.66671 2.26048ZM2.33337 2.84382C2.69581 2.84382 2.98962 3.13763 2.98962 3.50007V10.5001C2.98962 10.8625 2.69581 11.1563 2.33337 11.1563C1.97094 11.1563 1.67712 10.8625 1.67712 10.5001V3.50007C1.67712 3.13763 1.97094 2.84382 2.33337 2.84382Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "QuestionClassifier"
+}
--- a/app/components/base/icons/workflow/QuestionClassifier.tsx
+++ b/app/components/base/icons/workflow/QuestionClassifier.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './QuestionClassifier.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'QuestionClassifier'
+
+export default Icon
--- a/app/components/base/icons/workflow/TemplatingTransform.json
+++ b/app/components/base/icons/workflow/TemplatingTransform.json
@ -0,0 +1,154 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/templating-transform"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"fill-rule": "evenodd",
+									"clip-rule": "evenodd",
+									"d": "M6.34375 1.75C6.34375 1.38756 6.63756 1.09375 7 1.09375C10.262 1.09375 12.9062 3.73807 12.9062 7C12.9062 10.262 10.262 12.9062 7 12.9062C6.63756 12.9062 6.34375 12.6124 6.34375 12.25V1.75Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.54167 3.64583C5.54167 3.968 5.2805 4.22917 4.95833 4.22917C4.63617 4.22917 4.375 3.968 4.375 3.64583C4.375 3.32367 4.63617 3.0625 4.95833 3.0625C5.2805 3.0625 5.54167 3.32367 5.54167 3.64583Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3.5 3.64583C3.5 3.968 3.23883 4.22917 2.91667 4.22917C2.5945 4.22917 2.33333 3.968 2.33333 3.64583C2.33333 3.32367 2.5945 3.0625 2.91667 3.0625C3.23883 3.0625 3.5 3.32367 3.5 3.64583Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.54167 10.3542C5.54167 10.6763 5.2805 10.9375 4.95833 10.9375C4.63617 10.9375 4.375 10.6763 4.375 10.3542C4.375 10.032 4.63617 9.77083 4.95833 9.77083C5.2805 9.77083 5.54167 10.032 5.54167 10.3542Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.39583 1.89583C5.39583 2.13746 5.19996 2.33333 4.95833 2.33333C4.71671 2.33333 4.52083 2.13746 4.52083 1.89583C4.52083 1.65421 4.71671 1.45833 4.95833 1.45833C5.19996 1.45833 5.39583 1.65421 5.39583 1.89583Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M1.75 5.83333C1.75 6.07495 1.55412 6.27083 1.3125 6.27083C1.07088 6.27083 0.875 6.07495 0.875 5.83333C0.875 5.59171 1.07088 5.39583 1.3125 5.39583C1.55412 5.39583 1.75 5.59171 1.75 5.83333Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M1.75 8.16667C1.75 8.40828 1.55412 8.60417 1.3125 8.60417C1.07088 8.60417 0.875 8.40828 0.875 8.16667C0.875 7.92505 1.07088 7.72917 1.3125 7.72917C1.55412 7.72917 1.75 7.92505 1.75 8.16667Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.39583 12.1042C5.39583 12.3458 5.19996 12.5417 4.95833 12.5417C4.71671 12.5417 4.52083 12.3458 4.52083 12.1042C4.52083 11.8625 4.71671 11.6667 4.95833 11.6667C5.19996 11.6667 5.39583 11.8625 5.39583 12.1042Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.83333 5.83333C5.83333 6.31657 5.44158 6.70833 4.95833 6.70833C4.47508 6.70833 4.08333 6.31657 4.08333 5.83333C4.08333 5.35008 4.47508 4.95833 4.95833 4.95833C5.44158 4.95833 5.83333 5.35008 5.83333 5.83333Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M5.83333 8.16667C5.83333 8.6499 5.44158 9.04167 4.95833 9.04167C4.47508 9.04167 4.08333 8.6499 4.08333 8.16667C4.08333 7.68343 4.47508 7.29167 4.95833 7.29167C5.44158 7.29167 5.83333 7.68343 5.83333 8.16667Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3.5 5.83333C3.5 6.15551 3.23883 6.41667 2.91667 6.41667C2.5945 6.41667 2.33333 6.15551 2.33333 5.83333C2.33333 5.51117 2.5945 5.25 2.91667 5.25C3.23883 5.25 3.5 5.51117 3.5 5.83333Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3.5 8.16667C3.5 8.48884 3.23883 8.75 2.91667 8.75C2.5945 8.75 2.33333 8.48884 2.33333 8.16667C2.33333 7.84449 2.5945 7.58333 2.91667 7.58333C3.23883 7.58333 3.5 7.84449 3.5 8.16667Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3.5 10.3542C3.5 10.6763 3.23883 10.9375 2.91667 10.9375C2.5945 10.9375 2.33333 10.6763 2.33333 10.3542C2.33333 10.032 2.5945 9.77083 2.91667 9.77083C3.23883 9.77083 3.5 10.032 3.5 10.3542Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "TemplatingTransform"
+}
--- a/app/components/base/icons/workflow/TemplatingTransform.tsx
+++ b/app/components/base/icons/workflow/TemplatingTransform.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './TemplatingTransform.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'TemplatingTransform'
+
+export default Icon
--- a/app/components/base/icons/workflow/VariableX.json
+++ b/app/components/base/icons/workflow/VariableX.json
@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "14",
+			"viewBox": "0 0 14 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "icons/variable-x"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon (Stroke)",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M0.714375 3.42875C0.714375 2.22516 1.68954 1.25 2.89313 1.25C3.30734 1.25 3.64313 1.58579 3.64313 2C3.64313 2.41421 3.30734 2.75 2.89313 2.75C2.51796 2.75 2.21438 3.05359 2.21438 3.42875V6.28563C2.21438 6.48454 2.13536 6.6753 1.9947 6.81596L1.81066 7L1.9947 7.18404C2.13536 7.3247 2.21438 7.51546 2.21438 7.71437V10.5713C2.21438 10.9464 2.51796 11.25 2.89313 11.25C3.30734 11.25 3.64313 11.5858 3.64313 12C3.64313 12.4142 3.30734 12.75 2.89313 12.75C1.68954 12.75 0.714375 11.7748 0.714375 10.5713V8.02503L0.21967 7.53033C0.0790176 7.38968 0 7.19891 0 7C0 6.80109 0.0790176 6.61032 0.21967 6.46967L0.714375 5.97497V3.42875ZM10.3568 2C10.3568 1.58579 10.6925 1.25 11.1068 1.25C12.3103 1.25 13.2855 2.22516 13.2855 3.42875V5.97497L13.7802 6.46967C13.9209 6.61032 13.9999 6.80109 13.9999 7C13.9999 7.19891 13.9209 7.38968 13.7802 7.53033L13.2855 8.02503V10.5713C13.2855 11.7751 12.3095 12.75 11.1068 12.75C10.6925 12.75 10.3568 12.4142 10.3568 12C10.3568 11.5858 10.6925 11.25 11.1068 11.25C11.4815 11.25 11.7855 10.9462 11.7855 10.5713V7.71437C11.7855 7.51546 11.8645 7.3247 12.0052 7.18404L12.1892 7L12.0052 6.81596C11.8645 6.6753 11.7855 6.48454 11.7855 6.28563V3.42875C11.7855 3.05359 11.4819 2.75 11.1068 2.75C10.6925 2.75 10.3568 2.41421 10.3568 2ZM4.59467 4.59467C4.88756 4.30178 5.36244 4.30178 5.65533 4.59467L7 5.93934L8.34467 4.59467C8.63756 4.30178 9.11244 4.30178 9.40533 4.59467C9.69822 4.88756 9.69822 5.36244 9.40533 5.65533L8.06066 7L9.40533 8.34467C9.69822 8.63756 9.69822 9.11244 9.40533 9.40533C9.11244 9.69822 8.63756 9.69822 8.34467 9.40533L7 8.06066L5.65533 9.40533C5.36244 9.69822 4.88756 9.69822 4.59467 9.40533C4.30178 9.11244 4.30178 8.63756 4.59467 8.34467L5.93934 7L4.59467 5.65533C4.30178 5.36244 4.30178 4.88756 4.59467 4.59467Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "VariableX"
+}
--- a/app/components/base/icons/workflow/VariableX.tsx
+++ b/app/components/base/icons/workflow/VariableX.tsx
@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './VariableX.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'VariableX'
+
+export default Icon
--- a/app/components/base/icons/workflow/index.ts
+++ b/app/components/base/icons/workflow/index.ts
@ -0,0 +1,11 @@
+export { default as Answer } from './Answer'
+export { default as Code } from './Code'
+export { default as End } from './End'
+export { default as Home } from './Home'
+export { default as Http } from './Http'
+export { default as IfElse } from './IfElse'
+export { default as KnowledgeRetrieval } from './KnowledgeRetrieval'
+export { default as Llm } from './Llm'
+export { default as QuestionClassifier } from './QuestionClassifier'
+export { default as TemplatingTransform } from './TemplatingTransform'
+export { default as VariableX } from './VariableX'
--- a/app/components/chat/answer/index.tsx
+++ b/app/components/chat/answer/index.tsx
@ -0,0 +1,207 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import LoadingAnim from '../loading-anim'
+import type { FeedbackFunc } from '../type'
+import s from '../style.module.css'
+import ImageGallery from '../../base/image-gallery'
+import Thought from '../thought'
+import { randomString } from '@/utils/string'
+import type { ChatItem, MessageRating, VisionFile } from '@/types/app'
+import Tooltip from '@/app/components/base/tooltip'
+import WorkflowProcess from '@/app/components/workflow/workflow-process'
+import { Markdown } from '@/app/components/base/markdown'
+import type { Emoji } from '@/types/tools'
+
+const OperationBtn = ({ innerContent, onClick, className }: { innerContent: React.ReactNode; onClick?: () => void; className?: string }) => (
+  <div
+    className={`relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-gray-500 hover:text-gray-800 ${className ?? ''}`}
+    style={{ boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05)' }}
+    onClick={onClick && onClick}
+  >
+    {innerContent}
+  </div>
+)
+
+const OpeningStatementIcon: FC<{ className?: string }> = ({ className }) => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clipRule="evenodd" d="M6.25002 1C3.62667 1 1.50002 3.12665 1.50002 5.75C1.50002 6.28 1.58702 6.79071 1.7479 7.26801C1.7762 7.35196 1.79285 7.40164 1.80368 7.43828L1.80722 7.45061L1.80535 7.45452C1.79249 7.48102 1.77339 7.51661 1.73766 7.58274L0.911727 9.11152C0.860537 9.20622 0.807123 9.30503 0.770392 9.39095C0.733879 9.47635 0.674738 9.63304 0.703838 9.81878C0.737949 10.0365 0.866092 10.2282 1.05423 10.343C1.21474 10.4409 1.38213 10.4461 1.475 10.4451C1.56844 10.444 1.68015 10.4324 1.78723 10.4213L4.36472 10.1549C4.406 10.1506 4.42758 10.1484 4.44339 10.1472L4.44542 10.147L4.45161 10.1492C4.47103 10.1562 4.49738 10.1663 4.54285 10.1838C5.07332 10.3882 5.64921 10.5 6.25002 10.5C8.87338 10.5 11 8.37335 11 5.75C11 3.12665 8.87338 1 6.25002 1ZM4.48481 4.29111C5.04844 3.81548 5.7986 3.9552 6.24846 4.47463C6.69831 3.9552 7.43879 3.82048 8.01211 4.29111C8.58544 4.76175 8.6551 5.562 8.21247 6.12453C7.93825 6.47305 7.24997 7.10957 6.76594 7.54348C6.58814 7.70286 6.49924 7.78255 6.39255 7.81466C6.30103 7.84221 6.19589 7.84221 6.10436 7.81466C5.99767 7.78255 5.90878 7.70286 5.73098 7.54348C5.24694 7.10957 4.55867 6.47305 4.28444 6.12453C3.84182 5.562 3.92117 4.76675 4.48481 4.29111Z" fill="#667085" />
+  </svg>
+)
+
+const RatingIcon: FC<{ isLike: boolean }> = ({ isLike }) => {
+  return isLike ? <HandThumbUpIcon className='w-4 h-4' /> : <HandThumbDownIcon className='w-4 h-4' />
+}
+
+const EditIcon: FC<{ className?: string }> = ({ className }) => {
+  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M14 11.9998L13.3332 12.7292C12.9796 13.1159 12.5001 13.3332 12.0001 13.3332C11.5001 13.3332 11.0205 13.1159 10.6669 12.7292C10.3128 12.3432 9.83332 12.1265 9.33345 12.1265C8.83359 12.1265 8.35409 12.3432 7.99998 12.7292M2 13.3332H3.11636C3.44248 13.3332 3.60554 13.3332 3.75899 13.2963C3.89504 13.2637 4.0251 13.2098 4.1444 13.1367C4.27895 13.0542 4.39425 12.9389 4.62486 12.7083L13 4.33316C13.5523 3.78087 13.5523 2.88544 13 2.33316C12.4477 1.78087 11.5523 1.78087 11 2.33316L2.62484 10.7083C2.39424 10.9389 2.27894 11.0542 2.19648 11.1888C2.12338 11.3081 2.0695 11.4381 2.03684 11.5742C2 11.7276 2 11.8907 2 12.2168V13.3332Z" stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+}
+
+export const EditIconSolid: FC<{ className?: string }> = ({ className }) => {
+  return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path fillRule="evenodd" clip-rule="evenodd" d="M10.8374 8.63108C11.0412 8.81739 11.0554 9.13366 10.8691 9.33747L10.369 9.88449C10.0142 10.2725 9.52293 10.5001 9.00011 10.5001C8.47746 10.5001 7.98634 10.2727 7.63157 9.8849C7.45561 9.69325 7.22747 9.59515 7.00014 9.59515C6.77271 9.59515 6.54446 9.69335 6.36846 9.88517C6.18177 10.0886 5.86548 10.1023 5.66201 9.91556C5.45853 9.72888 5.44493 9.41259 5.63161 9.20911C5.98678 8.82201 6.47777 8.59515 7.00014 8.59515C7.52251 8.59515 8.0135 8.82201 8.36867 9.20911L8.36924 9.20974C8.54486 9.4018 8.77291 9.50012 9.00011 9.50012C9.2273 9.50012 9.45533 9.40182 9.63095 9.20979L10.131 8.66276C10.3173 8.45895 10.6336 8.44476 10.8374 8.63108Z" fill="#6B7280" />
+    <path fillRule="evenodd" clip-rule="evenodd" d="M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90476 3.79281 9.91451C3.64909 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58242 10.5003 2.37897 10.5001C2.3652 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13497 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.4111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58566 7.70736C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656Z" fill="#6B7280" />
+  </svg>
+}
+
+const IconWrapper: FC<{ children: React.ReactNode | string }> = ({ children }) => {
+  return <div className={'rounded-lg h-6 w-6 flex items-center justify-center hover:bg-gray-100'}>
+    {children}
+  </div>
+}
+
+type IAnswerProps = {
+  item: ChatItem
+  feedbackDisabled: boolean
+  onFeedback?: FeedbackFunc
+  isResponding?: boolean
+  allToolIcons?: Record<string, string | Emoji>
+}
+
+// The component needs to maintain its own state to control whether to display input component
+const Answer: FC<IAnswerProps> = ({
+  item,
+  feedbackDisabled = false,
+  onFeedback,
+  isResponding,
+  allToolIcons,
+}) => {
+  const { id, content, feedback, agent_thoughts, workflowProcess } = item
+  const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
+
+  const { t } = useTranslation()
+
+  /**
+ * Render feedback results (distinguish between users and administrators)
+ * User reviews cannot be cancelled in Console
+ * @param rating feedback result
+ * @param isUserFeedback Whether it is user's feedback
+ * @returns comp
+ */
+  const renderFeedbackRating = (rating: MessageRating | undefined) => {
+    if (!rating)
+      return null
+
+    const isLike = rating === 'like'
+    const ratingIconClassname = isLike ? 'text-primary-600 bg-primary-100 hover:bg-primary-200' : 'text-red-600 bg-red-100 hover:bg-red-200'
+    // The tooltip is always displayed, but the content is different for different scenarios.
+    return (
+      <Tooltip
+        selector={`user-feedback-${randomString(16)}`}
+        content={isLike ? '取消赞同' : '取消反对'}
+      >
+        <div
+          className={'relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-gray-500 hover:text-gray-800'}
+          style={{ boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05)' }}
+          onClick={async () => {
+            await onFeedback?.(id, { rating: null })
+          }}
+        >
+          <div className={`${ratingIconClassname} rounded-lg h-6 w-6 flex items-center justify-center`}>
+            <RatingIcon isLike={isLike} />
+          </div>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  /**
+   * Different scenarios have different operation items.
+   * @returns comp
+   */
+  const renderItemOperation = () => {
+    const userOperation = () => {
+      return feedback?.rating
+        ? null
+        : <div className='flex gap-1'>
+          <Tooltip selector={`user-feedback-${randomString(16)}`} content={t('common.operation.like') as string}>
+            {OperationBtn({ innerContent: <IconWrapper><RatingIcon isLike={true} /></IconWrapper>, onClick: () => onFeedback?.(id, { rating: 'like' }) })}
+          </Tooltip>
+          <Tooltip selector={`user-feedback-${randomString(16)}`} content={t('common.operation.dislike') as string}>
+            {OperationBtn({ innerContent: <IconWrapper><RatingIcon isLike={false} /></IconWrapper>, onClick: () => onFeedback?.(id, { rating: 'dislike' }) })}
+          </Tooltip>
+        </div>
+    }
+
+    return (
+      <div className={`${s.itemOperation} flex gap-2`}>
+        {userOperation()}
+      </div>
+    )
+  }
+
+  const getImgs = (list?: VisionFile[]) => {
+    if (!list)
+      return []
+    return list.filter(file => file.type === 'image' && file.belongs_to === 'assistant')
+  }
+
+  const agentModeAnswer = (
+    <div>
+      {agent_thoughts?.map((item, index) => (
+        <div key={index}>
+          {item.thought && (
+            <Markdown content={item.thought} />
+          )}
+          {/* {item.tool} */}
+          {/* perhaps not use tool */}
+          {!!item.tool && (
+            <Thought
+              thought={item}
+              allToolIcons={allToolIcons || {}}
+              isFinished={!!item.observation || !isResponding}
+            />
+          )}
+
+          {getImgs(item.message_files).length > 0 && (
+            <ImageGallery srcs={getImgs(item.message_files).map(item => item.url)} />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+
+  return (
+    <div key={id}>
+      <div className='flex items-start'>
+        <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
+          {isResponding
+            && <div className={s.typeingIcon}>
+              <LoadingAnim type='avatar' />
+            </div>
+          }
+        </div>
+        <div className={`${s.answerWrap}`}>
+          <div className={`${s.answer} relative text-sm text-gray-900`}>
+            <div className={`ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl ${workflowProcess && 'min-w-[480px]'}`}>
+              {workflowProcess && (
+                <WorkflowProcess data={workflowProcess} hideInfo />
+              )}
+              {(isResponding && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
+                ? (
+                  <div className='flex items-center justify-center w-6 h-5'>
+                    <LoadingAnim type='text' />
+                  </div>
+                )
+                : (isAgentMode
+                  ? agentModeAnswer
+                  : (
+                    <Markdown content={content} />
+                  ))}
+            </div>
+            <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
+              {!feedbackDisabled && !item.feedbackDisabled && renderItemOperation()}
+              {/* User feedback must be displayed */}
+              {!feedbackDisabled && renderFeedbackRating(feedback?.rating)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Answer)
--- a/app/components/chat/index.tsx
+++ b/app/components/chat/index.tsx
@ -2,26 +2,22 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef } from 'react'
 import cn from 'classnames'
-import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'rc-textarea'
 import s from './style.module.css'
-import LoadingAnim from './loading-anim'
-import { randomString } from '@/utils/string'
-import type { Feedbacktype, MessageRating, VisionFile, VisionSettings } from '@/types/app'
+import Answer from './answer'
+import Question from './question'
+import type { FeedbackFunc } from './type'
+import type { ChatItem, VisionFile, VisionSettings } from '@/types/app'
 import { TransferMethod } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
 import Toast from '@/app/components/base/toast'
-import { Markdown } from '@/app/components/base/markdown'
 import ChatImageUploader from '@/app/components/base/image-uploader/chat-image-uploader'
 import ImageList from '@/app/components/base/image-uploader/image-list'
 import { useImageFiles } from '@/app/components/base/image-uploader/hooks'
-import ImageGallery from '@/app/components/base/image-gallery'
-
-export type FeedbackFunc = (messageId: string, feedback: Feedbacktype) => Promise<any>

 export type IChatProps = {
-  chatList: IChatItem[]
+  chatList: ChatItem[]
  /**
   * Whether to display the editing area and rating status
   */
@ -34,216 +30,11 @@ export type IChatProps = {
  checkCanSend?: () => boolean
  onSend?: (message: string, files: VisionFile[]) => void
  useCurrentUserAvatar?: boolean
-  isResponsing?: boolean
+  isResponding?: boolean
  controlClearQuery?: number
  visionConfig?: VisionSettings
 }

-export type IChatItem = {
-  id: string
-  content: string
-  /**
-   * Specific message type
-   */
-  isAnswer: boolean
-  /**
-   * The user feedback result of this message
-   */
-  feedback?: Feedbacktype
-  /**
-   * Whether to hide the feedback area
-   */
-  feedbackDisabled?: boolean
-  isIntroduction?: boolean
-  useCurrentUserAvatar?: boolean
-  isOpeningStatement?: boolean
-  message_files?: VisionFile[]
-}
-
-const OperationBtn = ({ innerContent, onClick, className }: { innerContent: React.ReactNode; onClick?: () => void; className?: string }) => (
-  <div
-    className={`relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-gray-500 hover:text-gray-800 ${className ?? ''}`}
-    style={{ boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05)' }}
-    onClick={onClick && onClick}
-  >
-    {innerContent}
-  </div>
-)
-
-const OpeningStatementIcon: FC<{ className?: string }> = ({ className }) => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fillRule="evenodd" clipRule="evenodd" d="M6.25002 1C3.62667 1 1.50002 3.12665 1.50002 5.75C1.50002 6.28 1.58702 6.79071 1.7479 7.26801C1.7762 7.35196 1.79285 7.40164 1.80368 7.43828L1.80722 7.45061L1.80535 7.45452C1.79249 7.48102 1.77339 7.51661 1.73766 7.58274L0.911727 9.11152C0.860537 9.20622 0.807123 9.30503 0.770392 9.39095C0.733879 9.47635 0.674738 9.63304 0.703838 9.81878C0.737949 10.0365 0.866092 10.2282 1.05423 10.343C1.21474 10.4409 1.38213 10.4461 1.475 10.4451C1.56844 10.444 1.68015 10.4324 1.78723 10.4213L4.36472 10.1549C4.406 10.1506 4.42758 10.1484 4.44339 10.1472L4.44542 10.147L4.45161 10.1492C4.47103 10.1562 4.49738 10.1663 4.54285 10.1838C5.07332 10.3882 5.64921 10.5 6.25002 10.5C8.87338 10.5 11 8.37335 11 5.75C11 3.12665 8.87338 1 6.25002 1ZM4.48481 4.29111C5.04844 3.81548 5.7986 3.9552 6.24846 4.47463C6.69831 3.9552 7.43879 3.82048 8.01211 4.29111C8.58544 4.76175 8.6551 5.562 8.21247 6.12453C7.93825 6.47305 7.24997 7.10957 6.76594 7.54348C6.58814 7.70286 6.49924 7.78255 6.39255 7.81466C6.30103 7.84221 6.19589 7.84221 6.10436 7.81466C5.99767 7.78255 5.90878 7.70286 5.73098 7.54348C5.24694 7.10957 4.55867 6.47305 4.28444 6.12453C3.84182 5.562 3.92117 4.76675 4.48481 4.29111Z" fill="#667085" />
-  </svg>
-)
-
-const RatingIcon: FC<{ isLike: boolean }> = ({ isLike }) => {
-  return isLike ? <HandThumbUpIcon className='w-4 h-4' /> : <HandThumbDownIcon className='w-4 h-4' />
-}
-
-const EditIcon: FC<{ className?: string }> = ({ className }) => {
-  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <path d="M14 11.9998L13.3332 12.7292C12.9796 13.1159 12.5001 13.3332 12.0001 13.3332C11.5001 13.3332 11.0205 13.1159 10.6669 12.7292C10.3128 12.3432 9.83332 12.1265 9.33345 12.1265C8.83359 12.1265 8.35409 12.3432 7.99998 12.7292M2 13.3332H3.11636C3.44248 13.3332 3.60554 13.3332 3.75899 13.2963C3.89504 13.2637 4.0251 13.2098 4.1444 13.1367C4.27895 13.0542 4.39425 12.9389 4.62486 12.7083L13 4.33316C13.5523 3.78087 13.5523 2.88544 13 2.33316C12.4477 1.78087 11.5523 1.78087 11 2.33316L2.62484 10.7083C2.39424 10.9389 2.27894 11.0542 2.19648 11.1888C2.12338 11.3081 2.0695 11.4381 2.03684 11.5742C2 11.7276 2 11.8907 2 12.2168V13.3332Z" stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-}
-
-export const EditIconSolid: FC<{ className?: string }> = ({ className }) => {
-  return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <path fillRule="evenodd" clip-rule="evenodd" d="M10.8374 8.63108C11.0412 8.81739 11.0554 9.13366 10.8691 9.33747L10.369 9.88449C10.0142 10.2725 9.52293 10.5001 9.00011 10.5001C8.47746 10.5001 7.98634 10.2727 7.63157 9.8849C7.45561 9.69325 7.22747 9.59515 7.00014 9.59515C6.77271 9.59515 6.54446 9.69335 6.36846 9.88517C6.18177 10.0886 5.86548 10.1023 5.66201 9.91556C5.45853 9.72888 5.44493 9.41259 5.63161 9.20911C5.98678 8.82201 6.47777 8.59515 7.00014 8.59515C7.52251 8.59515 8.0135 8.82201 8.36867 9.20911L8.36924 9.20974C8.54486 9.4018 8.77291 9.50012 9.00011 9.50012C9.2273 9.50012 9.45533 9.40182 9.63095 9.20979L10.131 8.66276C10.3173 8.45895 10.6336 8.44476 10.8374 8.63108Z" fill="#6B7280" />
-    <path fillRule="evenodd" clip-rule="evenodd" d="M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90476 3.79281 9.91451C3.64909 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58242 10.5003 2.37897 10.5001C2.3652 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13497 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.4111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58566 7.70736C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656Z" fill="#6B7280" />
-  </svg>
-}
-
-const IconWrapper: FC<{ children: React.ReactNode | string }> = ({ children }) => {
-  return <div className={'rounded-lg h-6 w-6 flex items-center justify-center hover:bg-gray-100'}>
-    {children}
-  </div>
-}
-
-type IAnswerProps = {
-  item: IChatItem
-  feedbackDisabled: boolean
-  onFeedback?: FeedbackFunc
-  isResponsing?: boolean
-}
-
-// The component needs to maintain its own state to control whether to display input component
-const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, onFeedback, isResponsing }) => {
-  const { id, content, feedback } = item
-  const { t } = useTranslation()
-
-  /**
- * Render feedback results (distinguish between users and administrators)
- * User reviews cannot be cancelled in Console
- * @param rating feedback result
- * @param isUserFeedback Whether it is user's feedback
- * @returns comp
- */
-  const renderFeedbackRating = (rating: MessageRating | undefined) => {
-    if (!rating)
-      return null
-
-    const isLike = rating === 'like'
-    const ratingIconClassname = isLike ? 'text-primary-600 bg-primary-100 hover:bg-primary-200' : 'text-red-600 bg-red-100 hover:bg-red-200'
-    // The tooltip is always displayed, but the content is different for different scenarios.
-    return (
-      <Tooltip
-        selector={`user-feedback-${randomString(16)}`}
-        content={isLike ? '取消赞同' : '取消反对'}
-      >
-        <div
-          className={'relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-gray-500 hover:text-gray-800'}
-          style={{ boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05)' }}
-          onClick={async () => {
-            await onFeedback?.(id, { rating: null })
-          }}
-        >
-          <div className={`${ratingIconClassname} rounded-lg h-6 w-6 flex items-center justify-center`}>
-            <RatingIcon isLike={isLike} />
-          </div>
-        </div>
-      </Tooltip>
-    )
-  }
-
-  /**
-   * Different scenarios have different operation items.
-   * @returns comp
-   */
-  const renderItemOperation = () => {
-    const userOperation = () => {
-      return feedback?.rating
-        ? null
-        : <div className='flex gap-1'>
-          <Tooltip selector={`user-feedback-${randomString(16)}`} content={t('common.operation.like') as string}>
-            {OperationBtn({ innerContent: <IconWrapper><RatingIcon isLike={true} /></IconWrapper>, onClick: () => onFeedback?.(id, { rating: 'like' }) })}
-          </Tooltip>
-          <Tooltip selector={`user-feedback-${randomString(16)}`} content={t('common.operation.dislike') as string}>
-            {OperationBtn({ innerContent: <IconWrapper><RatingIcon isLike={false} /></IconWrapper>, onClick: () => onFeedback?.(id, { rating: 'dislike' }) })}
-          </Tooltip>
-        </div>
-    }
-
-    return (
-      <div className={`${s.itemOperation} flex gap-2`}>
-        {userOperation()}
-      </div>
-    )
-  }
-
-  return (
-    <div key={id}>
-      <div className='flex items-start'>
-        <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
-          {isResponsing
-            && <div className={s.typeingIcon}>
-              <LoadingAnim type='avatar' />
-            </div>
-          }
-        </div>
-        <div className={`${s.answerWrap}`}>
-          <div className={`${s.answer} relative text-sm text-gray-900`}>
-            <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
-              {item.isOpeningStatement && (
-                <div className='flex items-center mb-1 gap-1'>
-                  <OpeningStatementIcon />
-                  <div className='text-xs text-gray-500'>{t('app.chat.openingStatementTitle')}</div>
-                </div>
-              )}
-              {(isResponsing && !content)
-                ? (
-                  <div className='flex items-center justify-center w-6 h-5'>
-                    <LoadingAnim type='text' />
-                  </div>
-                )
-                : (
-                  <Markdown content={content} />
-                )}
-            </div>
-            <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
-              {!feedbackDisabled && !item.feedbackDisabled && renderItemOperation()}
-              {/* User feedback must be displayed */}
-              {!feedbackDisabled && renderFeedbackRating(feedback?.rating)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'useCurrentUserAvatar'> & {
-  imgSrcs?: string[]
-}
-
-const Question: FC<IQuestionProps> = ({ id, content, useCurrentUserAvatar, imgSrcs }) => {
-  const userName = ''
-  return (
-    <div className='flex items-start justify-end' key={id}>
-      <div>
-        <div className={`${s.question} relative text-sm text-gray-900`}>
-          <div
-            className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'}
-          >
-            {imgSrcs && imgSrcs.length > 0 && (
-              <ImageGallery srcs={imgSrcs} />
-            )}
-            <Markdown content={content} />
-          </div>
-        </div>
-      </div>
-      {useCurrentUserAvatar
-        ? (
-          <div className='w-10 h-10 shrink-0 leading-10 text-center mr-2 rounded-full bg-primary-600 text-white'>
-            {userName?.[0].toLocaleUpperCase()}
-          </div>
-        )
-        : (
-          <div className={`${s.questionIcon} w-10 h-10 shrink-0 `}></div>
-        )}
-    </div>
-  )
-}
-
 const Chat: FC<IChatProps> = ({
  chatList,
  feedbackDisabled = false,
@ -252,7 +43,7 @@ const Chat: FC<IChatProps> = ({
  checkCanSend,
  onSend = () => { },
  useCurrentUserAvatar,
-  isResponsing,
+  isResponding,
  controlClearQuery,
  visionConfig,
 }) => {
@ -304,7 +95,7 @@ const Chat: FC<IChatProps> = ({
    if (!files.find(item => item.type === TransferMethod.local_file && !item.fileId)) {
      if (files.length)
        onClear()
-      if (!isResponsing)
+      if (!isResponding)
        setQuery('')
    }
  }
@ -338,7 +129,7 @@ const Chat: FC<IChatProps> = ({
              item={item}
              feedbackDisabled={feedbackDisabled}
              onFeedback={onFeedback}
-              isResponsing={isResponsing && isLast}
+              isResponding={isResponding && isLast}
            />
          }
          return (
--- a/app/components/chat/question/index.tsx
+++ b/app/components/chat/question/index.tsx
@ -0,0 +1,43 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { IChatItem } from '../type'
+import s from '../style.module.css'
+
+import { Markdown } from '@/app/components/base/markdown'
+import ImageGallery from '@/app/components/base/image-gallery'
+
+type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'useCurrentUserAvatar'> & {
+  imgSrcs?: string[]
+}
+
+const Question: FC<IQuestionProps> = ({ id, content, useCurrentUserAvatar, imgSrcs }) => {
+  const userName = ''
+  return (
+    <div className='flex items-start justify-end' key={id}>
+      <div>
+        <div className={`${s.question} relative text-sm text-gray-900`}>
+          <div
+            className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'}
+          >
+            {imgSrcs && imgSrcs.length > 0 && (
+              <ImageGallery srcs={imgSrcs} />
+            )}
+            <Markdown content={content} />
+          </div>
+        </div>
+      </div>
+      {useCurrentUserAvatar
+        ? (
+          <div className='w-10 h-10 shrink-0 leading-10 text-center mr-2 rounded-full bg-primary-600 text-white'>
+            {userName?.[0].toLocaleUpperCase()}
+          </div>
+        )
+        : (
+          <div className={`${s.questionIcon} w-10 h-10 shrink-0 `}></div>
+        )}
+    </div>
+  )
+}
+
+export default React.memo(Question)
--- a/app/components/chat/thought/index.tsx
+++ b/app/components/chat/thought/index.tsx
@ -0,0 +1,61 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ThoughtItem, ToolInfoInThought } from '../type'
+import Tool from './tool'
+import type { Emoji } from '@/types/tools'
+
+export type IThoughtProps = {
+  thought: ThoughtItem
+  allToolIcons: Record<string, string | Emoji>
+  isFinished: boolean
+}
+
+function getValue(value: string, isValueArray: boolean, index: number) {
+  if (isValueArray) {
+    try {
+      return JSON.parse(value)[index]
+    }
+    catch (e) {
+    }
+  }
+  return value
+}
+
+const Thought: FC<IThoughtProps> = ({
+  thought,
+  allToolIcons,
+  isFinished,
+}) => {
+  const [toolNames, isValueArray]: [string[], boolean] = (() => {
+    try {
+      if (Array.isArray(JSON.parse(thought.tool)))
+        return [JSON.parse(thought.tool), true]
+    }
+    catch (e) {
+    }
+    return [[thought.tool], false]
+  })()
+
+  const toolThoughtList = toolNames.map((toolName, index) => {
+    return {
+      name: toolName,
+      input: getValue(thought.tool_input, isValueArray, index),
+      output: getValue(thought.observation, isValueArray, index),
+      isFinished,
+    }
+  })
+
+  return (
+    <div className='my-2 space-y-2'>
+      {toolThoughtList.map((item: ToolInfoInThought, index) => (
+        <Tool
+          key={index}
+          payload={item}
+          allToolIcons={allToolIcons}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(Thought)
--- a/app/components/chat/thought/panel.tsx
+++ b/app/components/chat/thought/panel.tsx
@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  isRequest: boolean
+  toolName: string
+  content: string
+}
+
+const Panel: FC<Props> = ({
+  isRequest,
+  toolName,
+  content,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='rounded-md bg-gray-100 overflow-hidden border border-black/5'>
+      <div className='flex items-center px-2 py-1 leading-[18px] bg-gray-50 uppercase text-xs font-medium text-gray-500'>
+        {t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
+      </div>
+      <div className='p-2 border-t border-black/5 leading-4 text-xs text-gray-700'>{content}</div>
+    </div>
+  )
+}
+export default React.memo(Panel)
--- a/app/components/chat/thought/style.module.css
+++ b/app/components/chat/thought/style.module.css
@ -0,0 +1,7 @@
+.wrap {
+  background-color: rgba(255, 255, 255, 0.92);
+}
+
+.wrapHoverEffect:hover{
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+}
--- a/app/components/chat/thought/tool.tsx
+++ b/app/components/chat/thought/tool.tsx
@ -0,0 +1,103 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import cn from 'classnames'
+import type { ToolInfoInThought } from '../type'
+import Panel from './panel'
+import Loading02 from '@/app/components/base/icons/line/loading-02'
+import ChevronDown from '@/app/components/base/icons/line/arrows/chevron-down'
+import CheckCircle from '@/app/components/base/icons/solid/general/check-circle'
+import DataSetIcon from '@/app/components/base/icons/public/data-set'
+import type { Emoji } from '@/types/tools'
+import AppIcon from '@/app/components/base/app-icon'
+
+type Props = {
+  payload: ToolInfoInThought
+  allToolIcons?: Record<string, string | Emoji>
+}
+
+const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>) => {
+  if (toolName.startsWith('dataset-'))
+    return <DataSetIcon className='shrink-0'></DataSetIcon>
+  const icon = allToolIcons[toolName]
+  if (!icon)
+    return null
+  return (
+    typeof icon === 'string'
+      ? (
+        <div
+          className='w-3 h-3 bg-cover bg-center rounded-[3px] shrink-0'
+          style={{
+            backgroundImage: `url(${icon})`,
+          }}
+        ></div>
+      )
+      : (
+        <AppIcon
+          className='rounded-[3px] shrink-0'
+          size='xs'
+          icon={icon?.content}
+          background={icon?.background}
+        />
+      ))
+}
+
+const Tool: FC<Props> = ({
+  payload,
+  allToolIcons = {},
+}) => {
+  const { t } = useTranslation()
+  const { name, input, isFinished, output } = payload
+  const toolName = name.startsWith('dataset-') ? t('dataset.knowledge') : name
+  const [isShowDetail, setIsShowDetail] = useState(false)
+  const icon = getIcon(toolName, allToolIcons) as any
+  return (
+    <div>
+      <div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto bg-white rounded-md')}>
+        <div
+          className={cn('flex items-center h-7 px-2 cursor-pointer')}
+          onClick={() => setIsShowDetail(!isShowDetail)}
+        >
+          {!isFinished && (
+            <Loading02 className='w-3 h-3 text-gray-500 animate-spin shrink-0' />
+          )}
+          {isFinished && !isShowDetail && (
+            <CheckCircle className='w-3 h-3 text-[#12B76A] shrink-0' />
+          )}
+          {isFinished && isShowDetail && (
+            icon
+          )}
+          <span className='mx-1 text-xs font-medium text-gray-500 shrink-0'>
+            {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
+          </span>
+          <span
+            className='text-xs font-medium text-gray-700 truncate'
+            title={toolName}
+          >
+            {toolName}
+          </span>
+          <ChevronDown
+            className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}
+          />
+        </div>
+        {isShowDetail && (
+          <div className='border-t border-black/5 p-2 space-y-2 '>
+            <Panel
+              isRequest={true}
+              toolName={toolName}
+              content={input} />
+            {output && (
+              <Panel
+                isRequest={false}
+                toolName={toolName}
+                content={output as string} />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)
--- a/app/components/chat/type.ts
+++ b/app/components/chat/type.ts
@ -0,0 +1,134 @@
+import type { VisionFile } from '@/types/app'
+
+export type LogAnnotation = {
+  content: string
+  account: {
+    id: string
+    name: string
+    email: string
+  }
+  created_at: number
+}
+
+export type Annotation = {
+  id: string
+  authorName: string
+  logAnnotation?: LogAnnotation
+  created_at?: number
+}
+
+export const MessageRatings = ['like', 'dislike', null] as const
+export type MessageRating = typeof MessageRatings[number]
+
+export type MessageMore = {
+  time: string
+  tokens: number
+  latency: number | string
+}
+
+export type Feedbacktype = {
+  rating: MessageRating
+  content?: string | null
+}
+
+export type FeedbackFunc = (messageId: string, feedback: Feedbacktype) => Promise<any>
+export type SubmitAnnotationFunc = (messageId: string, content: string) => Promise<any>
+
+export type DisplayScene = 'web' | 'console'
+
+export type ToolInfoInThought = {
+  name: string
+  input: string
+  output: string
+  isFinished: boolean
+}
+
+export type ThoughtItem = {
+  id: string
+  tool: string // plugin or dataset. May has multi.
+  thought: string
+  tool_input: string
+  message_id: string
+  observation: string
+  position: number
+  files?: string[]
+  message_files?: VisionFile[]
+}
+
+export type CitationItem = {
+  content: string
+  data_source_type: string
+  dataset_name: string
+  dataset_id: string
+  document_id: string
+  document_name: string
+  hit_count: number
+  index_node_hash: string
+  segment_id: string
+  segment_position: number
+  score: number
+  word_count: number
+}
+
+export type IChatItem = {
+  id: string
+  content: string
+  citation?: CitationItem[]
+  /**
+   * Specific message type
+   */
+  isAnswer: boolean
+  /**
+   * The user feedback result of this message
+   */
+  feedback?: Feedbacktype
+  /**
+   * The admin feedback result of this message
+   */
+  adminFeedback?: Feedbacktype
+  /**
+   * Whether to hide the feedback area
+   */
+  feedbackDisabled?: boolean
+  /**
+   * More information about this message
+   */
+  more?: MessageMore
+  annotation?: Annotation
+  useCurrentUserAvatar?: boolean
+  isOpeningStatement?: boolean
+  suggestedQuestions?: string[]
+  log?: { role: string; text: string }[]
+  agent_thoughts?: ThoughtItem[]
+  message_files?: VisionFile[]
+}
+
+export type MessageEnd = {
+  id: string
+  metadata: {
+    retriever_resources?: CitationItem[]
+    annotation_reply: {
+      id: string
+      account: {
+        id: string
+        name: string
+      }
+    }
+  }
+}
+
+export type MessageReplace = {
+  id: string
+  task_id: string
+  answer: string
+  conversation_id: string
+}
+
+export type AnnotationReply = {
+  id: string
+  task_id: string
+  answer: string
+  conversation_id: string
+  annotation_id: string
+  annotation_author_name: string
+}
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@ -3,16 +3,16 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import produce, { setAutoFreeze } from 'immer'
 import { useBoolean, useGetState } from 'ahooks'
 import useConversation from '@/hooks/use-conversation'
 import Toast from '@/app/components/base/toast'
 import Sidebar from '@/app/components/sidebar'
 import ConfigSence from '@/app/components/config-scence'
 import Header from '@/app/components/header'
-import { fetchAppParams, fetchChatList, fetchConversations, sendChatMessage, updateFeedback } from '@/service'
-import type { ConversationItem, Feedbacktype, IChatItem, PromptConfig, VisionFile, VisionSettings } from '@/types/app'
-import { TransferMethod } from '@/types/app'
+import { fetchAppParams, fetchChatList, fetchConversations, generationConversationName, sendChatMessage, updateFeedback } from '@/service'
+import type { ChatItem, ConversationItem, Feedbacktype, PromptConfig, VisionFile, VisionSettings } from '@/types/app'
+import { Resolution, TransferMethod, WorkflowRunningStatus } from '@/types/app'
 import Chat from '@/app/components/chat'
 import { setLocaleOnClient } from '@/i18n/client'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@ -20,6 +20,8 @@ import Loading from '@/app/components/base/loading'
 import { replaceVarWithValues, userInputsFormToPromptVariables } from '@/utils/prompt'
 import AppUnavailable from '@/app/components/app-unavailable'
 import { API_KEY, APP_ID, APP_INFO, isShowPrompt, promptTemplate } from '@/config'
+import type { Annotation as AnnotationType } from '@/types/log'
+import { addFileInfos, sortAgentSorts } from '@/utils/tools'

 const Main: FC = () => {
  const { t } = useTranslation()
@ -31,18 +33,31 @@ const Main: FC = () => {
  * app info
  */
  const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
-  const [isUnknwonReason, setIsUnknwonReason] = useState<boolean>(false)
+  const [isUnknownReason, setIsUnknownReason] = useState<boolean>(false)
  const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
  const [inited, setInited] = useState<boolean>(false)
  // in mobile, show sidebar by click button
  const [isShowSidebar, { setTrue: showSidebar, setFalse: hideSidebar }] = useBoolean(false)
-  const [visionConfig, setVisionConfig] = useState<VisionSettings | undefined>(undefined)
+  const [visionConfig, setVisionConfig] = useState<VisionSettings | undefined>({
+    enabled: false,
+    number_limits: 2,
+    detail: Resolution.low,
+    transfer_methods: [TransferMethod.local_file],
+  })

  useEffect(() => {
    if (APP_INFO?.title)
      document.title = `${APP_INFO.title} - Powered by Dify`
  }, [APP_INFO?.title])

+  // onData change thought (the produce obj). https://github.com/immerjs/immer/issues/576
+  useEffect(() => {
+    setAutoFreeze(false)
+    return () => {
+      setAutoFreeze(true)
+    }
+  }, [])
+
  /*
  * conversation info
  */
@ -50,6 +65,7 @@ const Main: FC = () => {
    conversationList,
    setConversationList,
    currConversationId,
+    getCurrConversationId,
    setCurrConversationId,
    getConversationIdFromStorage,
    isNewConversation,
@ -70,7 +86,7 @@ const Main: FC = () => {
    setCurrInputs(inputs)
    setChatStarted()
    // parse variables in introduction
-    setChatList(generateNewChatListWithOpenstatement('', inputs))
+    setChatList(generateNewChatListWithOpenStatement('', inputs))
  }
  const hasSetInputs = (() => {
    if (!isNewConversation)
@ -105,23 +121,26 @@ const Main: FC = () => {
    }

    // update chat list of current conversation
-    if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponsing) {
+    if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponding) {
      fetchChatList(currConversationId).then((res: any) => {
        const { data } = res
-        const newChatList: IChatItem[] = generateNewChatListWithOpenstatement(notSyncToStateIntroduction, notSyncToStateInputs)
+        const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs)

        data.forEach((item: any) => {
          newChatList.push({
            id: `question-${item.id}`,
            content: item.query,
            isAnswer: false,
-            message_files: item.message_files,
+            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
+
          })
          newChatList.push({
            id: item.id,
            content: item.answer,
+            agent_thoughts: addFileInfos(item.agent_thoughts ? sortAgentSorts(item.agent_thoughts) : item.agent_thoughts, item.message_files),
            feedback: item.feedback,
            isAnswer: true,
+            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
          })
        })
        setChatList(newChatList)
@ -129,7 +148,7 @@ const Main: FC = () => {
    }

    if (isNewConversation && isChatStarted)
-      setChatList(generateNewChatListWithOpenstatement())
+      setChatList(generateNewChatListWithOpenStatement())
  }
  useEffect(handleConversationSwitch, [currConversationId, inited])

@ -149,7 +168,7 @@ const Main: FC = () => {
  /*
  * chat info. chat is under conversation.
  */
-  const [chatList, setChatList, getChatList] = useGetState<IChatItem[]>([])
+  const [chatList, setChatList, getChatList] = useGetState<ChatItem[]>([])
  const chatListDomRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    // scroll to bottom
@ -157,7 +176,7 @@ const Main: FC = () => {
      chatListDomRef.current.scrollTop = chatListDomRef.current.scrollHeight
  }, [chatList, currConversationId])
  // user can not edit inputs if user had send message
-  const canEditInpus = !chatList.some(item => item.isAnswer === false) && isNewConversation
+  const canEditInputs = !chatList.some(item => item.isAnswer === false) && isNewConversation
  const createNewChat = () => {
    // if new chat is already exist, do not create new chat
    if (conversationList.some(item => item.id === '-1'))
@ -174,21 +193,21 @@ const Main: FC = () => {
  }

  // sometime introduction is not applied to state
-  const generateNewChatListWithOpenstatement = (introduction?: string, inputs?: Record<string, any> | null) => {
-    let caculatedIntroduction = introduction || conversationIntroduction || ''
-    const caculatedPromptVariables = inputs || currInputs || null
-    if (caculatedIntroduction && caculatedPromptVariables)
-      caculatedIntroduction = replaceVarWithValues(caculatedIntroduction, promptConfig?.prompt_variables || [], caculatedPromptVariables)
+  const generateNewChatListWithOpenStatement = (introduction?: string, inputs?: Record<string, any> | null) => {
+    let calculatedIntroduction = introduction || conversationIntroduction || ''
+    const calculatedPromptVariables = inputs || currInputs || null
+    if (calculatedIntroduction && calculatedPromptVariables)
+      calculatedIntroduction = replaceVarWithValues(calculatedIntroduction, promptConfig?.prompt_variables || [], calculatedPromptVariables)

-    const openstatement = {
+    const openStatement = {
      id: `${Date.now()}`,
-      content: caculatedIntroduction,
+      content: calculatedIntroduction,
      isAnswer: true,
      feedbackDisabled: true,
      isOpeningStatement: isShowPrompt,
    }
-    if (caculatedIntroduction)
-      return [openstatement]
+    if (calculatedIntroduction)
+      return [openStatement]

    return []
  }
@ -204,7 +223,12 @@ const Main: FC = () => {
        const [conversationData, appParams] = await Promise.all([fetchConversations(), fetchAppParams()])

        // handle current conversation id
-        const { data: conversations } = conversationData as { data: ConversationItem[] }
+        const { data: conversations, error } = conversationData as { data: ConversationItem[]; error: string }
+        if (error) {
+          Toast.notify({ type: 'error', message: error })
+          throw new Error(error)
+          return
+        }
        const _conversationId = getConversationIdFromStorage(APP_ID)
        const isNotNewConversation = conversations.some(item => item.id === _conversationId)

@ -236,14 +260,15 @@ const Main: FC = () => {
          setAppUnavailable(true)
        }
        else {
-          setIsUnknwonReason(true)
+          setIsUnknownReason(true)
          setAppUnavailable(true)
        }
      }
    })()
  }, [])

-  const [isResponsing, { setTrue: setResponsingTrue, setFalse: setResponsingFalse }] = useBoolean(false)
+  const [isResponding, { setTrue: setRespondingTrue, setFalse: setRespondingFalse }] = useBoolean(false)
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
  const { notify } = Toast
  const logError = (message: string) => {
    notify({ type: 'error', message })
@ -259,16 +284,46 @@ const Main: FC = () => {
    const inputLens = Object.values(currInputs).length
    const promptVariablesLens = promptConfig.prompt_variables.length

-    const emytyInput = inputLens < promptVariablesLens || Object.values(currInputs).find(v => !v)
-    if (emytyInput) {
+    const emptyInput = inputLens < promptVariablesLens || Object.values(currInputs).find(v => !v)
+    if (emptyInput) {
      logError(t('app.errorMessage.valueOfVarRequired'))
      return false
    }
    return true
  }

+  const [controlFocus, setControlFocus] = useState(0)
+  const [openingSuggestedQuestions, setOpeningSuggestedQuestions] = useState<string[]>([])
+  const [messageTaskId, setMessageTaskId] = useState('')
+  const [hasStopResponded, setHasStopResponded, getHasStopResponded] = useGetState(false)
+  const [isRespondingConIsCurrCon, setIsRespondingConCurrCon, getIsRespondingConIsCurrCon] = useGetState(true)
+  const [userQuery, setUserQuery] = useState('')
+
+  const updateCurrentQA = ({
+    responseItem,
+    questionId,
+    placeholderAnswerId,
+    questionItem,
+  }: {
+    responseItem: ChatItem
+    questionId: string
+    placeholderAnswerId: string
+    questionItem: ChatItem
+  }) => {
+    // closesure new list is outdated.
+    const newListWithAnswer = produce(
+      getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+      (draft) => {
+        if (!draft.find(item => item.id === questionId))
+          draft.push({ ...questionItem })
+
+        draft.push({ ...responseItem })
+      })
+    setChatList(newListWithAnswer)
+  }
+
  const handleSend = async (message: string, files?: VisionFile[]) => {
-    if (isResponsing) {
+    if (isResponding) {
      notify({ type: 'info', message: t('app.errorMessage.waitForResponse') })
      return
    }
@ -290,7 +345,7 @@ const Main: FC = () => {
      })
    }

-    // qustion
+    // question
    const questionId = `question-${Date.now()}`
    const questionItem = {
      id: questionId,
@ -309,23 +364,145 @@ const Main: FC = () => {
    const newList = [...getChatList(), questionItem, placeholderAnswerItem]
    setChatList(newList)

+    let isAgentMode = false
+
    // answer
-    const responseItem = {
+    const responseItem: ChatItem = {
      id: `${Date.now()}`,
      content: '',
+      agent_thoughts: [],
+      message_files: [],
      isAnswer: true,
    }
+    let hasSetResponseId = false

+    const prevTempNewConversationId = getCurrConversationId() || '-1'
    let tempNewConversationId = ''
-    setResponsingTrue()
+
+    setRespondingTrue()
    sendChatMessage(data, {
-      onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId }: any) => {
-        responseItem.content = responseItem.content + message
-        responseItem.id = messageId
+      getAbortController: (abortController) => {
+        setAbortController(abortController)
+      },
+      onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
+        if (!isAgentMode) {
+          responseItem.content = responseItem.content + message
+        }
+        else {
+          const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+          if (lastThought)
+            lastThought.thought = lastThought.thought + message // need immer setAutoFreeze
+        }
+        if (messageId && !hasSetResponseId) {
+          responseItem.id = messageId
+          hasSetResponseId = true
+        }
+
        if (isFirstMessage && newConversationId)
          tempNewConversationId = newConversationId

-        // closesure new list is outdated.
+        setMessageTaskId(taskId)
+        // has switched to other conversation
+        if (prevTempNewConversationId !== getCurrConversationId()) {
+          setIsRespondingConCurrCon(false)
+          return
+        }
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
+      async onCompleted(hasError?: boolean) {
+        if (hasError)
+          return
+
+        if (getConversationIdChangeBecauseOfNew()) {
+          const { data: allConversations }: any = await fetchConversations()
+          const newItem: any = await generationConversationName(allConversations[0].id)
+
+          const newAllConversations = produce(allConversations, (draft: any) => {
+            draft[0].name = newItem.name
+          })
+          setConversationList(newAllConversations as any)
+        }
+        setConversationIdChangeBecauseOfNew(false)
+        resetNewConversationInputs()
+        setChatNotStarted()
+        setCurrConversationId(tempNewConversationId, APP_ID, true)
+        setRespondingFalse()
+      },
+      onFile(file) {
+        const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+        if (lastThought)
+          lastThought.message_files = [...(lastThought as any).message_files, { ...file }]
+
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
+      onThought(thought) {
+        isAgentMode = true
+        const response = responseItem as any
+        if (thought.message_id && !hasSetResponseId) {
+          response.id = thought.message_id
+          hasSetResponseId = true
+        }
+        // responseItem.id = thought.message_id;
+        if (response.agent_thoughts.length === 0) {
+          response.agent_thoughts.push(thought)
+        }
+        else {
+          const lastThought = response.agent_thoughts[response.agent_thoughts.length - 1]
+          // thought changed but still the same thought, so update.
+          if (lastThought.id === thought.id) {
+            thought.thought = lastThought.thought
+            thought.message_files = lastThought.message_files
+            responseItem.agent_thoughts![response.agent_thoughts.length - 1] = thought
+          }
+          else {
+            responseItem.agent_thoughts!.push(thought)
+          }
+        }
+        // has switched to other conversation
+        if (prevTempNewConversationId !== getCurrConversationId()) {
+          setIsRespondingConCurrCon(false)
+          return false
+        }
+
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
+      onMessageEnd: (messageEnd) => {
+        if (messageEnd.metadata?.annotation_reply) {
+          responseItem.id = messageEnd.id
+          responseItem.annotation = ({
+            id: messageEnd.metadata.annotation_reply.id,
+            authorName: messageEnd.metadata.annotation_reply.account.name,
+          } as AnnotationType)
+          const newListWithAnswer = produce(
+            getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+            (draft) => {
+              if (!draft.find(item => item.id === questionId))
+                draft.push({ ...questionItem })
+
+              draft.push({
+                ...responseItem,
+              })
+            })
+          setChatList(newListWithAnswer)
+          return
+        }
+        // not support show citation
+        // responseItem.citation = messageEnd.retriever_resources
        const newListWithAnswer = produce(
          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
          (draft) => {
@ -336,27 +513,70 @@ const Main: FC = () => {
          })
        setChatList(newListWithAnswer)
      },
-      async onCompleted() {
-        setResponsingFalse()
-        if (!tempNewConversationId)
-          return
+      onMessageReplace: (messageReplace) => {
+        setChatList(produce(
+          getChatList(),
+          (draft) => {
+            const current = draft.find(item => item.id === messageReplace.id)

-        if (getConversationIdChangeBecauseOfNew()) {
-          const { data: conversations }: any = await fetchConversations()
-          setConversationList(conversations as ConversationItem[])
-        }
-        setConversationIdChangeBecauseOfNew(false)
-        resetNewConversationInputs()
-        setChatNotStarted()
-        setCurrConversationId(tempNewConversationId, APP_ID, true)
+            if (current)
+              current.content = messageReplace.answer
+          },
+        ))
      },
      onError() {
-        setResponsingFalse()
+        setRespondingFalse()
        // role back placeholder answer
        setChatList(produce(getChatList(), (draft) => {
          draft.splice(draft.findIndex(item => item.id === placeholderAnswerId), 1)
        }))
      },
+      onWorkflowStarted: ({ workflow_run_id, task_id }) => {
+        // taskIdRef.current = task_id
+        responseItem.workflow_run_id = workflow_run_id
+        responseItem.workflowProcess = {
+          status: WorkflowRunningStatus.Running,
+          tracing: [],
+        }
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onWorkflowFinished: ({ data }) => {
+        responseItem.workflowProcess!.status = data.status as WorkflowRunningStatus
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onNodeStarted: ({ data }) => {
+        responseItem.workflowProcess!.tracing!.push(data as any)
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onNodeFinished: ({ data }) => {
+        const currentIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === data.node_id)
+        responseItem.workflowProcess!.tracing[currentIndex] = data as any
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
    })
  }

@ -389,7 +609,7 @@ const Main: FC = () => {
  }

  if (appUnavailable)
-    return <AppUnavailable isUnknwonReason={isUnknwonReason} errMessage={!hasSetAppConfig ? 'Please set APP_ID and API_KEY in config/index.tsx' : ''} />
+    return <AppUnavailable isUnknownReason={isUnknownReason} errMessage={!hasSetAppConfig ? 'Please set APP_ID and API_KEY in config/index.tsx' : ''} />

  if (!APP_ID || !APP_INFO || !promptConfig)
    return <Loading type='app' />
@ -424,7 +644,7 @@ const Main: FC = () => {
            siteInfo={APP_INFO}
            promptConfig={promptConfig}
            onStartChat={handleStartChat}
-            canEidtInpus={canEditInpus}
+            canEditInputs={canEditInputs}
            savedInputs={currInputs as Record<string, any>}
            onInputsChange={setCurrInputs}
          ></ConfigSence>
@ -437,7 +657,7 @@ const Main: FC = () => {
                    chatList={chatList}
                    onSend={handleSend}
                    onFeedback={handleFeedback}
-                    isResponsing={isResponsing}
+                    isResponding={isResponding}
                    checkCanSend={checkCanSend}
                    visionConfig={visionConfig}
                  />
--- a/app/components/welcome/index.tsx
+++ b/app/components/welcome/index.tsx
@ -20,7 +20,7 @@ export type IWelcomeProps = {
  siteInfo: AppInfo
  promptConfig: PromptConfig
  onStartChat: (inputs: Record<string, any>) => void
-  canEidtInpus: boolean
+  canEditInputs: boolean
  savedInputs: Record<string, any>
  onInputsChange: (inputs: Record<string, any>) => void
 }
@ -32,7 +32,7 @@ const Welcome: FC<IWelcomeProps> = ({
  siteInfo,
  promptConfig,
  onStartChat,
-  canEidtInpus,
+  canEditInputs,
  savedInputs,
  onInputsChange,
 }) => {
@ -107,7 +107,7 @@ const Welcome: FC<IWelcomeProps> = ({
              )}
            {item.type === 'string' && (
              <input
-                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                placeholder={`${item.name}${!item.required ? `(${t('app.variableTable.optional')})` : ''}`}
                value={inputs?.[item.key] || ''}
                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
                className={'w-full flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50'}
@ -117,11 +117,20 @@ const Welcome: FC<IWelcomeProps> = ({
            {item.type === 'paragraph' && (
              <textarea
                className="w-full h-[104px] flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50"
-                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                placeholder={`${item.name}${!item.required ? `(${t('app.variableTable.optional')})` : ''}`}
                value={inputs?.[item.key] || ''}
                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
              />
            )}
+            {item.type === 'number' && (
+              <input
+                type="number"
+                className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                value={inputs[item.key]}
+                onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
+              />
+            )}
          </div>
        ))}
      </div>
@ -131,8 +140,8 @@ const Welcome: FC<IWelcomeProps> = ({
  const canChat = () => {
    const inputLens = Object.values(inputs).length
    const promptVariablesLens = promptConfig.prompt_variables.length
-    const emytyInput = inputLens < promptVariablesLens || Object.values(inputs).filter(v => v === '').length > 0
-    if (emytyInput) {
+    const emptyInput = inputLens < promptVariablesLens || Object.values(inputs).filter(v => v === '').length > 0
+    if (emptyInput) {
      logError(t('app.errorMessage.valueOfVarRequired'))
      return false
    }
@ -217,7 +226,7 @@ const Welcome: FC<IWelcomeProps> = ({
  }

  const renderHasSetInputsPublic = () => {
-    if (!canEidtInpus) {
+    if (!canEditInputs) {
      return (
        <TemplateVarPanel
          isFold={false}
@ -260,7 +269,7 @@ const Welcome: FC<IWelcomeProps> = ({
  }

  const renderHasSetInputsPrivate = () => {
-    if (!canEidtInpus || !hasVar)
+    if (!canEditInputs || !hasVar)
      return null

    return (
@ -284,7 +293,7 @@ const Welcome: FC<IWelcomeProps> = ({
  }

  const renderHasSetInputs = () => {
-    if ((!isPublicVersion && !canEidtInpus) || !hasVar)
+    if ((!isPublicVersion && !canEditInputs) || !hasVar)
      return null

    return (
--- a/app/components/workflow/block-icon.tsx
+++ b/app/components/workflow/block-icon.tsx
@ -0,0 +1,119 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import { BlockEnum } from '@/types/app'
+import {
+  Answer,
+  Code,
+  End,
+  Home,
+  Http,
+  IfElse,
+  KnowledgeRetrieval,
+  Llm,
+  QuestionClassifier,
+  TemplatingTransform,
+  VariableX,
+} from '@/app/components/base/icons/workflow'
+import AppIcon from '@/app/components/base/app-icon'
+
+type BlockIconProps = {
+  type: BlockEnum
+  size?: string
+  className?: string
+  toolIcon?: string | { content: string; background: string }
+}
+const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
+  xs: 'w-4 h-4 rounded-[5px] shadow-xs',
+  sm: 'w-5 h-5 rounded-md shadow-xs',
+  md: 'w-6 h-6 rounded-lg shadow-md',
+}
+const getIcon = (type: BlockEnum, className: string) => {
+  return {
+    [BlockEnum.Start]: <Home className={className} />,
+    [BlockEnum.LLM]: <Llm className={className} />,
+    [BlockEnum.Code]: <Code className={className} />,
+    [BlockEnum.End]: <End className={className} />,
+    [BlockEnum.IfElse]: <IfElse className={className} />,
+    [BlockEnum.HttpRequest]: <Http className={className} />,
+    [BlockEnum.Answer]: <Answer className={className} />,
+    [BlockEnum.KnowledgeRetrieval]: <KnowledgeRetrieval className={className} />,
+    [BlockEnum.QuestionClassifier]: <QuestionClassifier className={className} />,
+    [BlockEnum.TemplateTransform]: <TemplatingTransform className={className} />,
+    [BlockEnum.VariableAssigner]: <VariableX className={className} />,
+    [BlockEnum.Tool]: <VariableX className={className} />,
+  }[type]
+}
+const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
+  [BlockEnum.Start]: 'bg-[#2970FF]',
+  [BlockEnum.LLM]: 'bg-[#6172F3]',
+  [BlockEnum.Code]: 'bg-[#2E90FA]',
+  [BlockEnum.End]: 'bg-[#F79009]',
+  [BlockEnum.IfElse]: 'bg-[#06AED4]',
+  [BlockEnum.HttpRequest]: 'bg-[#875BF7]',
+  [BlockEnum.Answer]: 'bg-[#F79009]',
+  [BlockEnum.KnowledgeRetrieval]: 'bg-[#16B364]',
+  [BlockEnum.QuestionClassifier]: 'bg-[#16B364]',
+  [BlockEnum.TemplateTransform]: 'bg-[#2E90FA]',
+  [BlockEnum.VariableAssigner]: 'bg-[#2E90FA]',
+}
+const BlockIcon: FC<BlockIconProps> = ({
+  type,
+  size = 'sm',
+  className,
+  toolIcon,
+}) => {
+  return (
+    <div className={`
+      flex items-center justify-center border-[0.5px] border-white/[0.02] text-white
+      ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]} 
+      ${ICON_CONTAINER_BG_COLOR_MAP[type]}
+      ${toolIcon && '!shadow-none'}
+      ${className}
+    `}
+    >
+      {
+        type !== BlockEnum.Tool && (
+          getIcon(type, size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5')
+        )
+      }
+      {
+        type === BlockEnum.Tool && toolIcon && (
+          <>
+            {
+              typeof toolIcon === 'string'
+                ? (
+                  <div
+                    className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
+                    style={{
+                      backgroundImage: `url(${toolIcon})`,
+                    }}
+                  ></div>
+                )
+                : (
+                  <AppIcon
+                    className='shrink-0 !w-full !h-full'
+                    size='tiny'
+                    icon={toolIcon?.content}
+                    background={toolIcon?.background}
+                  />
+                )
+            }
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export const VarBlockIcon: FC<BlockIconProps> = ({
+  type,
+  className,
+}) => {
+  return (
+    <>
+      {getIcon(type, `w-3 h-3 ${className}`)}
+    </>
+  )
+}
+
+export default memo(BlockIcon)
--- a/app/components/workflow/code-editor/index.tsx
+++ b/app/components/workflow/code-editor/index.tsx
@ -0,0 +1,122 @@
+'use client'
+import type { FC } from 'react'
+import Editor, { loader } from '@monaco-editor/react'
+import React, { useRef } from 'react'
+import Base from '../editor/base'
+import { CodeLanguage } from '@/types/app'
+import './style.css'
+
+// load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
+loader.config({ paths: { vs: '/vs' } })
+
+type Props = {
+  value?: string | object
+  onChange?: (value: string) => void
+  title: JSX.Element
+  language: CodeLanguage
+  headerRight?: JSX.Element
+  readOnly?: boolean
+  isJSONStringifyBeauty?: boolean
+  height?: number
+}
+
+const languageMap = {
+  [CodeLanguage.javascript]: 'javascript',
+  [CodeLanguage.python3]: 'python',
+  [CodeLanguage.json]: 'json',
+}
+
+const CodeEditor: FC<Props> = ({
+  value = '',
+  onChange = () => { },
+  title,
+  headerRight,
+  language,
+  readOnly,
+  isJSONStringifyBeauty,
+  height,
+}) => {
+  const [isFocus, setIsFocus] = React.useState(false)
+
+  const handleEditorChange = (value: string | undefined) => {
+    onChange(value || '')
+  }
+
+  const editorRef = useRef(null)
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor
+    editor.onDidFocusEditorText(() => {
+      setIsFocus(true)
+    })
+    editor.onDidBlurEditorText(() => {
+      setIsFocus(false)
+    })
+
+    monaco.editor.defineTheme('blur-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#F2F4F7',
+      },
+    })
+
+    monaco.editor.defineTheme('focus-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#ffffff',
+      },
+    })
+  }
+
+  const outPutValue = (() => {
+    if (!isJSONStringifyBeauty)
+      return value as string
+    try {
+      return JSON.stringify(value as object, null, 2)
+    }
+    catch (e) {
+      return value as string
+    }
+  })()
+
+  return (
+    <div>
+      <Base
+        title={title}
+        value={outPutValue}
+        headerRight={headerRight}
+        isFocus={isFocus && !readOnly}
+        minHeight={height || 200}
+      >
+        <>
+          {/* https://www.npmjs.com/package/@monaco-editor/react */}
+          <Editor
+            className='h-full'
+            // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
+            language={languageMap[language] || 'javascript'}
+            theme={isFocus ? 'focus-theme' : 'blur-theme'}
+            value={outPutValue}
+            onChange={handleEditorChange}
+            // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
+            options={{
+              readOnly,
+              domReadOnly: true,
+              quickSuggestions: false,
+              minimap: { enabled: false },
+              lineNumbersMinChars: 1, // would change line num width
+              wordWrap: 'on', // auto line wrap
+              // lineNumbers: (num) => {
+              //   return <div>{num}</div>
+              // }
+            }}
+            onMount={handleEditorDidMount}
+          />
+        </>
+      </Base>
+    </div>
+  )
+}
+export default React.memo(CodeEditor)
--- a/app/components/workflow/code-editor/style.css
+++ b/app/components/workflow/code-editor/style.css
@ -0,0 +1,8 @@
+.margin-view-overlays {
+  padding-left: 10px;
+}
+
+/* hide readonly tooltip */
+.monaco-editor-overlaymessage {
+  display: none !important;
+}
--- a/app/components/workflow/editor/base.tsx
+++ b/app/components/workflow/editor/base.tsx
@ -0,0 +1,81 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import copy from 'copy-to-clipboard'
+import cn from 'classnames'
+import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
+import ToggleExpandBtn from './toggle-expand-btn'
+import useToggleExpend from './use-toggle-expend'
+import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/line/files'
+
+type Props = {
+  className?: string
+  title: JSX.Element | string
+  headerRight?: JSX.Element
+  children: JSX.Element
+  minHeight?: number
+  value: string
+  isFocus: boolean
+}
+
+const Base: FC<Props> = ({
+  className,
+  title,
+  headerRight,
+  children,
+  minHeight = 120,
+  value,
+  isFocus,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    wrapClassName,
+    isExpand,
+    setIsExpand,
+    editorExpandHeight,
+  } = useToggleExpend({ ref, hasFooter: false })
+
+  const editorContentMinHeight = minHeight - 28
+  const [editorContentHeight, setEditorContentHeight] = useState(editorContentMinHeight)
+
+  const [isCopied, setIsCopied] = React.useState(false)
+  const handleCopy = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value])
+
+  return (
+    <div className={cn(wrapClassName)}>
+      <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
+        <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
+          <div className='text-xs font-semibold text-gray-700'>{title}</div>
+          <div className='flex items-center'>
+            {headerRight}
+            {!isCopied
+              ? (
+                <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
+              )
+              : (
+                <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
+              )
+            }
+            <div className='ml-1'>
+              <ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />
+            </div>
+          </div>
+        </div>
+        <PromptEditorHeightResizeWrap
+          height={isExpand ? editorExpandHeight : editorContentHeight}
+          minHeight={editorContentMinHeight}
+          onHeightChange={setEditorContentHeight}
+          hideResize={isExpand}
+        >
+          <div className='h-full pb-2'>
+            {children}
+          </div>
+        </PromptEditorHeightResizeWrap>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Base)
--- a/app/components/workflow/editor/prompt-editor-height-resize-wrap.tsx
+++ b/app/components/workflow/editor/prompt-editor-height-resize-wrap.tsx
@ -0,0 +1,95 @@
+'use client'
+import React, { useCallback, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import { useDebounceFn } from 'ahooks'
+import cn from 'classnames'
+
+type Props = {
+  className?: string
+  height: number
+  minHeight: number
+  onHeightChange: (height: number) => void
+  children: JSX.Element
+  footer?: JSX.Element
+  hideResize?: boolean
+}
+
+const PromptEditorHeightResizeWrap: FC<Props> = ({
+  className,
+  height,
+  minHeight,
+  onHeightChange,
+  children,
+  footer,
+  hideResize,
+}) => {
+  const [clientY, setClientY] = useState(0)
+  const [isResizing, setIsResizing] = useState(false)
+  const [prevUserSelectStyle, setPrevUserSelectStyle] = useState(getComputedStyle(document.body).userSelect)
+
+  const handleStartResize = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    setClientY(e.clientY)
+    setIsResizing(true)
+    setPrevUserSelectStyle(getComputedStyle(document.body).userSelect)
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  const handleStopResize = useCallback(() => {
+    setIsResizing(false)
+    document.body.style.userSelect = prevUserSelectStyle
+  }, [prevUserSelectStyle])
+
+  const { run: didHandleResize } = useDebounceFn((e) => {
+    if (!isResizing)
+      return
+
+    const offset = e.clientY - clientY
+    let newHeight = height + offset
+    setClientY(e.clientY)
+    if (newHeight < minHeight)
+      newHeight = minHeight
+    onHeightChange(newHeight)
+  }, {
+    wait: 0,
+  })
+
+  const handleResize = useCallback(didHandleResize, [isResizing, height, minHeight, clientY])
+
+  useEffect(() => {
+    document.addEventListener('mousemove', handleResize)
+    return () => {
+      document.removeEventListener('mousemove', handleResize)
+    }
+  }, [handleResize])
+
+  useEffect(() => {
+    document.addEventListener('mouseup', handleStopResize)
+    return () => {
+      document.removeEventListener('mouseup', handleStopResize)
+    }
+  }, [handleStopResize])
+
+  return (
+    <div
+      className='relative'
+    >
+      <div className={cn(className, 'overflow-y-auto')}
+        style={{
+          height,
+        }}
+      >
+        {children}
+      </div>
+      {/* resize handler */}
+      {footer}
+      {!hideResize && (
+        <div
+          className='absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize'
+          onMouseDown={handleStartResize}>
+          <div className='w-5 h-[3px] rounded-sm bg-gray-300'></div>
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(PromptEditorHeightResizeWrap)
--- a/app/components/workflow/editor/toggle-expand-btn.tsx
+++ b/app/components/workflow/editor/toggle-expand-btn.tsx
@ -0,0 +1,25 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import Expand04 from '@/app/components/base/icons/solid/expand-04'
+import Collapse04 from '@/app/components/base/icons/line/arrows/collapse-04'
+
+type Props = {
+  isExpand: boolean
+  onExpandChange: (isExpand: boolean) => void
+}
+
+const ExpandBtn: FC<Props> = ({
+  isExpand,
+  onExpandChange,
+}) => {
+  const handleToggle = useCallback(() => {
+    onExpandChange(!isExpand)
+  }, [isExpand])
+
+  const Icon = isExpand ? Collapse04 : Expand04
+  return (
+    <Icon className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleToggle} />
+  )
+}
+export default React.memo(ExpandBtn)
--- a/app/components/workflow/editor/use-toggle-expend.ts
+++ b/app/components/workflow/editor/use-toggle-expend.ts
@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+type Params = {
+  ref: React.RefObject<HTMLDivElement>
+  hasFooter?: boolean
+}
+
+const useToggleExpend = ({ ref, hasFooter = true }: Params) => {
+  const [isExpand, setIsExpand] = useState(false)
+  const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
+  const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
+  useEffect(() => {
+    setWrapHeight(ref.current?.clientHeight)
+  }, [isExpand])
+
+  const wrapClassName = isExpand && 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
+
+  return {
+    wrapClassName,
+    editorExpandHeight,
+    isExpand,
+    setIsExpand,
+  }
+}
+
+export default useToggleExpend
--- a/app/components/workflow/node.tsx
+++ b/app/components/workflow/node.tsx
@ -0,0 +1,81 @@
+'use client'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import cn from 'classnames'
+import BlockIcon from './block-icon'
+import AlertCircle from '@/app/components/base/icons/line/alert-circle'
+import AlertTriangle from '@/app/components/base/icons/line/alert-triangle'
+import Loading02 from '@/app/components/base/icons/line/loading-02'
+import CheckCircle from '@/app/components/base/icons/line/check-circle'
+import type { NodeTracing } from '@/types/app'
+
+type Props = {
+  nodeInfo: NodeTracing
+  hideInfo?: boolean
+}
+
+const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
+  const [collapseState, setCollapseState] = useState<boolean>(true)
+
+  const getTime = (time: number) => {
+    if (time < 1)
+      return `${(time * 1000).toFixed(3)} ms`
+    if (time > 60)
+      return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
+    return `${time.toFixed(3)} s`
+  }
+
+  const getTokenCount = (tokens: number) => {
+    if (tokens < 1000)
+      return tokens
+    if (tokens >= 1000 && tokens < 1000000)
+      return `${parseFloat((tokens / 1000).toFixed(3))}K`
+    if (tokens >= 1000000)
+      return `${parseFloat((tokens / 1000000).toFixed(3))}M`
+  }
+
+  useEffect(() => {
+    setCollapseState(!nodeInfo.expand)
+  }, [nodeInfo.expand])
+
+  return (
+    <div className={cn('px-4 py-1', hideInfo && '!p-0')}>
+      <div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
+        <div
+          className={cn(
+            'flex items-center pl-[6px] pr-3 cursor-pointer',
+            hideInfo ? 'py-2' : 'py-3',
+            !collapseState && (hideInfo ? '!pb-1' : '!pb-2'),
+          )}
+          onClick={() => setCollapseState(!collapseState)}
+        >
+          <BlockIcon size={hideInfo ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', hideInfo && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
+          <div className={cn(
+            'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
+            hideInfo && '!text-xs',
+          )} title={nodeInfo.title}>{nodeInfo.title}</div>
+          {nodeInfo.status !== 'running' && !hideInfo && (
+            <div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
+          )}
+          {nodeInfo.status === 'succeeded' && (
+            <CheckCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
+          )}
+          {nodeInfo.status === 'failed' && (
+            <AlertCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
+          )}
+          {nodeInfo.status === 'stopped' && (
+            <AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
+          )}
+          {nodeInfo.status === 'running' && (
+            <div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
+              <Loading02 className='mr-1 w-3.5 h-3.5 animate-spin' />
+              <span>Running</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NodePanel
--- a/app/components/workflow/workflow-process.tsx
+++ b/app/components/workflow/workflow-process.tsx
@ -0,0 +1,104 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import cn from 'classnames'
+import NodePanel from './node'
+import type { WorkflowProcess } from '@/types/app'
+import CheckCircle from '@/app/components/base/icons/solid/general/check-circle'
+import AlertCircle from '@/app/components/base/icons/solid/alert-circle'
+import Loading02 from '@/app/components/base/icons/line/loading-02'
+import ChevronRight from '@/app/components/base/icons/line/chevron-right'
+import { WorkflowRunningStatus } from '@/types/app'
+
+type WorkflowProcessProps = {
+  data: WorkflowProcess
+  grayBg?: boolean
+  expand?: boolean
+  hideInfo?: boolean
+}
+const WorkflowProcessItem = ({
+  data,
+  grayBg,
+  expand = false,
+  hideInfo = false,
+}: WorkflowProcessProps) => {
+  const [collapse, setCollapse] = useState(!expand)
+  const running = data.status === WorkflowRunningStatus.Running
+  const succeeded = data.status === WorkflowRunningStatus.Succeeded
+  const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
+
+  const background = useMemo(() => {
+    if (running && !collapse)
+      return 'linear-gradient(180deg, #E1E4EA 0%, #EAECF0 100%)'
+
+    if (succeeded && !collapse)
+      return 'linear-gradient(180deg, #ECFDF3 0%, #F6FEF9 100%)'
+
+    if (failed && !collapse)
+      return 'linear-gradient(180deg, #FEE4E2 0%, #FEF3F2 100%)'
+  }, [running, succeeded, failed, collapse])
+
+  useEffect(() => {
+    setCollapse(!expand)
+  }, [expand])
+
+  return (
+    <div
+      className={cn(
+        'mb-2 rounded-xl border-[0.5px] border-black/[0.08]',
+        collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
+        collapse && (!grayBg ? 'bg-white' : 'bg-gray-50'),
+        hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
+      )}
+      style={{
+        background,
+      }}
+    >
+      <div
+        className={cn(
+          'flex items-center h-[18px] cursor-pointer',
+          hideInfo && 'px-[6px]',
+        )}
+        onClick={() => setCollapse(!collapse)}
+      >
+        {
+          running && (
+            <Loading02 className='shrink-0 mr-1 w-3 h-3 text-[#667085] animate-spin' />
+          )
+        }
+        {
+          succeeded && (
+            <CheckCircle className='shrink-0 mr-1 w-3 h-3 text-[#12B76A]' />
+          )
+        }
+        {
+          failed && (
+            <AlertCircle className='shrink-0 mr-1 w-3 h-3 text-[#F04438]' />
+          )
+        }
+        <div className='grow text-xs font-medium text-gray-700 leading-[18px]'>Workflow Process</div>
+        <ChevronRight className={`'ml-1 w-3 h-3 text-gray-500' ${collapse ? '' : 'rotate-90'}`} />
+      </div>
+      {
+        !collapse && (
+          <div className='mt-1.5'>
+            {
+              data.tracing.map(node => (
+                <div key={node.id} className='mb-0.5 last-of-type:mb-0'>
+                  <NodePanel
+                    nodeInfo={node}
+                    hideInfo={hideInfo}
+                  />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default WorkflowProcessItem
--- a/config/index.ts
+++ b/config/index.ts
@ -7,7 +7,7 @@ export const APP_INFO: AppInfo = {
  description: '',
  copyright: '',
  privacy_policy: '',
-  default_language: 'zh-Hans',
+  default_language: 'en',
 }

 export const isShowPrompt = false
--- a/hooks/use-conversation.ts
+++ b/hooks/use-conversation.ts
@ -1,5 +1,6 @@
 import { useState } from 'react'
 import produce from 'immer'
+import { useGetState } from 'ahooks'
 import type { ConversationItem } from '@/types/app'

 const storageConversationIdKey = 'conversationIdInfo'
@ -7,7 +8,7 @@ const storageConversationIdKey = 'conversationIdInfo'
 type ConversationInfoType = Omit<ConversationItem, 'inputs' | 'id'>
 function useConversation() {
  const [conversationList, setConversationList] = useState<ConversationItem[]>([])
-  const [currConversationId, doSetCurrConversationId] = useState<string>('-1')
+  const [currConversationId, doSetCurrConversationId, getCurrConversationId] = useGetState<string>('-1')
  // when set conversation id, we do not have set appId
  const setCurrConversationId = (id: string, appId: string, isSetToLocalStroge = true, newConversationName = '') => {
    doSetCurrConversationId(id)
@ -50,6 +51,7 @@ function useConversation() {
    conversationList,
    setConversationList,
    currConversationId,
+    getCurrConversationId,
    setCurrConversationId,
    getConversationIdFromStorage,
    isNewConversation,
--- a/i18n/i18next-config.ts
+++ b/i18n/i18next-config.ts
@ -2,9 +2,20 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import commonEn from './lang/common.en'
+import commonEs from './lang/common.es'
 import commonZh from './lang/common.zh'
+import commonVi from './lang/common.vi'
+import commonJa from './lang/common.ja'
 import appEn from './lang/app.en'
+import appEs from './lang/app.es'
 import appZh from './lang/app.zh'
+import appVi from './lang/app.vi'
+import appJa from './lang/app.ja'
+import toolsEn from './lang/tools.en'
+import toolsZh from './lang/tools.zh'
+import toolsVi from './lang/tools.vi'
+import toolsJa from './lang/tools.ja'
+
 import type { Locale } from '.'

 const resources = {
@ -12,12 +23,38 @@ const resources = {
    translation: {
      common: commonEn,
      app: appEn,
+      // tools
+      tools: toolsEn,
+    },
+  },
+  'es': {
+    translation: {
+      common: commonEs,
+      app: appEs,
    },
  },
  'zh-Hans': {
    translation: {
      common: commonZh,
      app: appZh,
+      // tools
+      tools: toolsZh,
+    },
+  },
+  'vi': {
+    translation: {
+      common: commonVi,
+      app: appVi,
+      // tools
+      tools: toolsVi,
+    },
+  },
+  'ja': {
+    translation: {
+      common: commonJa,
+      app: appJa,
+      // tools
+      tools: toolsJa,
    },
  },
 }
--- a/i18n/index.ts
+++ b/i18n/index.ts
@ -1,6 +1,6 @@
 export const i18n = {
  defaultLocale: 'en',
-  locales: ['en', 'zh-Hans'],
+  locales: ['en', 'es', 'zh-Hans', 'ja'],
 } as const

 export type Locale = typeof i18n['locales'][number]
--- a/i18n/lang/app.en.ts
+++ b/i18n/lang/app.en.ts
@ -28,6 +28,9 @@ const translation = {
    waitForResponse:
      'Please wait for the response to the previous message to complete.',
  },
+  variableTable: {
+    optional: 'Optional',
+  },
 }

 export default translation
--- a/i18n/lang/app.es.ts
+++ b/i18n/lang/app.es.ts
@ -0,0 +1,33 @@
+const translation = {
+  common: {
+    welcome: 'Bienvenido a usar',
+    appUnavailable: 'App es inaccesible',
+    appUnkonwError: 'App es inaccesible',
+  },
+  chat: {
+    newChat: 'Nuevo chat',
+    newChatDefaultName: 'Nueva conversación',
+    openingStatementTitle: 'Frase de apertura',
+    powerBy: 'Desarrollado por',
+    prompt: 'Prompt',
+    privatePromptConfigTitle: 'Ajustes de conversación',
+    publicPromptConfigTitle: 'Prompt inicial',
+    configStatusDes: 'Antes de comenzar, puede modificar la configuración de la conversación',
+    configDisabled:
+      'La configuración de la sesión anterior se ha utilizado para esta sesión.',
+    startChat: 'Comenzar chat',
+    privacyPolicyLeft:
+      'Por favor lea la ',
+    privacyPolicyMiddle:
+      'política de privacidad',
+    privacyPolicyRight:
+      ' proporcionada por el desarrollador de la aplicación.',
+  },
+  errorMessage: {
+    valueOfVarRequired: 'El valor de las variables no puede estar vacío',
+    waitForResponse:
+      'Por favor espere a que la respuesta al mensaje anterior se complete.',
+  },
+}
+
+export default translation
--- a/i18n/lang/app.ja.ts
+++ b/i18n/lang/app.ja.ts
@ -0,0 +1,36 @@
+const translation = {
+  common: {
+    welcome: 'ご利用いただきありがとうございます',
+    appUnavailable: 'アプリは利用できません',
+    appUnkonwError: 'アプリは利用できません',
+  },
+  chat: {
+    newChat: '新しいチャット',
+    newChatDefaultName: '新しい会話',
+    openingStatementTitle: 'オープニングステートメント',
+    powerBy: '提供元',
+    prompt: 'プロンプト',
+    privatePromptConfigTitle: '会話設定',
+    publicPromptConfigTitle: '初期プロンプト',
+    configStatusDes: '開始前に、会話設定を変更できます',
+    configDisabled:
+      '前回のセッション設定がこのセッションで使用されています。',
+    startChat: '開始',
+    privacyPolicyLeft:
+      'ご利用前に、',
+    privacyPolicyMiddle:
+      'プライバシーポリシー',
+    privacyPolicyRight:
+      ' をお読みください。',
+  },
+  errorMessage: {
+    valueOfVarRequired: '変数の値は空にできません',
+    waitForResponse:
+      '前のメッセージの応答が完了するまでお待ちください。',
+  },
+  variableTable: {
+    optional: '任意',
+  },
+}
+
+export default translation
--- a/i18n/lang/app.vi.ts
+++ b/i18n/lang/app.vi.ts
@ -0,0 +1,36 @@
+const translation = {
+  common: {
+    welcome: 'Chào mừng bạn sử dụng',
+    appUnavailable: 'Ứng dụng không khả dụng',
+    appUnkonwError: 'Ứng dụng không khả dụng',
+  },
+  chat: {
+    newChat: 'Cuộc trò chuyện mới',
+    newChatDefaultName: 'Cuộc trò chuyện mới',
+    openingStatementTitle: 'Lời mở đầu',
+    powerBy: 'Được hỗ trợ bởi',
+    prompt: 'Nhắc nhở',
+    privatePromptConfigTitle: 'Cài đặt cuộc trò chuyện',
+    publicPromptConfigTitle: 'Nhắc nhở ban đầu',
+    configStatusDes: 'Trước khi bắt đầu, bạn có thể chỉnh sửa cài đặt cuộc trò chuyện',
+    configDisabled:
+      'Cài đặt của phiên trước đã được sử dụng cho phiên này.',
+    startChat: 'Bắt đầu trò chuyện',
+    privacyPolicyLeft:
+      'Vui lòng đọc ',
+    privacyPolicyMiddle:
+      'chính sách bảo mật',
+    privacyPolicyRight:
+      ' được cung cấp bởi nhà phát triển ứng dụng.',
+  },
+  errorMessage: {
+    valueOfVarRequired: 'Giá trị của biến không thể để trống',
+    waitForResponse:
+      'Vui lòng đợi phản hồi từ tin nhắn trước khi gửi tin nhắn mới.',
+  },
+  variableTable: {
+    optional: 'Tùy chọn',
+  },
+}
+
+export default translation;
--- a/i18n/lang/app.zh.ts
+++ b/i18n/lang/app.zh.ts
@ -23,6 +23,9 @@ const translation = {
    valueOfVarRequired: '变量值必填',
    waitForResponse: '请等待上条信息响应完成',
  },
+  variableTable: {
+    optional: '可选',
+  },
 }

 export default translation
--- a/i18n/lang/common.es.ts
+++ b/i18n/lang/common.es.ts
@ -0,0 +1,33 @@
+const translation = {
+  api: {
+    success: 'Éxito',
+    saved: 'Guardado',
+    create: 'Creado',
+  },
+  operation: {
+    confirm: 'Confirmar',
+    cancel: 'Cancelar',
+    clear: 'Limpiar',
+    save: 'Guardar',
+    edit: 'Editar',
+    refresh: 'Reiniciar',
+    search: 'Buscar',
+    send: 'Enviar',
+    lineBreak: 'Salto de línea',
+    like: 'Me gusta',
+    dislike: 'No me gusta',
+    ok: 'OK',
+  },
+  imageUploader: {
+    uploadFromComputer: 'Subir desde el ordenador',
+    uploadFromComputerReadError: 'La lectura de la imagen falló, por favor inténtelo de nuevo.',
+    uploadFromComputerUploadError: 'Error al subir la imagen, por favor inténtelo de nuevo.',
+    uploadFromComputerLimit: 'Las imágenes subidas no pueden superar los {{size}} MB',
+    pasteImageLink: 'Pegar enlace de imagen',
+    pasteImageLinkInputPlaceholder: 'Pegar enlace de imagen aquí',
+    pasteImageLinkInvalid: 'Enlace de imagen no válido',
+    imageUpload: 'Subir imagen',
+  },
+}
+
+export default translation
--- a/i18n/lang/common.ja.ts
+++ b/i18n/lang/common.ja.ts
@ -0,0 +1,33 @@
+const translation = {
+  api: {
+    success: '成功',
+    saved: '保存しました',
+    create: '作成しました',
+  },
+  operation: {
+    confirm: '確認',
+    cancel: 'キャンセル',
+    clear: 'クリア',
+    save: '保存',
+    edit: '編集',
+    refresh: '再起動',
+    search: '検索',
+    send: '送信',
+    lineBreak: '改行',
+    like: 'いいね',
+    dislike: 'よくないね',
+    ok: 'OK',
+  },
+  imageUploader: {
+    uploadFromComputer: 'コンピューターからアップロード',
+    uploadFromComputerReadError: '画像の読み込みに失敗しました。もう一度お試しください。',
+    uploadFromComputerUploadError: '画像のアップロードに失敗しました。もう一度アップロードしてください。',
+    uploadFromComputerLimit: 'アップロードする画像は{{size}} MBを超えてはいけません',
+    pasteImageLink: '画像リンクを貼り付け',
+    pasteImageLinkInputPlaceholder: 'ここに画像リンクを貼り付けてください',
+    pasteImageLinkInvalid: '無効な画像リンクです',
+    imageUpload: '画像アップロード',
+  },
+}
+
+export default translation
--- a/i18n/lang/common.vi.ts
+++ b/i18n/lang/common.vi.ts
@ -0,0 +1,33 @@
+const translation = {
+  api: {
+    success: 'Thành công',
+    saved: 'Đã lưu',
+    create: 'Đã tạo',
+  },
+  operation: {
+    confirm: 'Xác nhận',
+    cancel: 'Hủy',
+    clear: 'Xóa',
+    save: 'Lưu',
+    edit: 'Chỉnh sửa',
+    refresh: 'Khởi động lại',
+    search: 'Tìm kiếm',
+    send: 'Gửi',
+    lineBreak: 'Xuống dòng',
+    like: 'thích',
+    dislike: 'không thích',
+    ok: 'OK',
+  },
+  imageUploader: {
+    uploadFromComputer: 'Tải lên từ máy tính',
+    uploadFromComputerReadError: 'Đọc ảnh thất bại, vui lòng thử lại.',
+    uploadFromComputerUploadError: 'Tải ảnh lên thất bại, vui lòng tải lại.',
+    uploadFromComputerLimit: 'Ảnh tải lên không được vượt quá {{size}} MB',
+    pasteImageLink: 'Dán liên kết ảnh',
+    pasteImageLinkInputPlaceholder: 'Dán liên kết ảnh vào đây',
+    pasteImageLinkInvalid: 'Liên kết ảnh không hợp lệ',
+    imageUpload: 'Tải ảnh lên',
+  },
+}
+
+export default translation;
--- a/i18n/lang/tools.en.ts
+++ b/i18n/lang/tools.en.ts
@ -0,0 +1,103 @@
+const translation = {
+  title: 'Tools',
+  createCustomTool: 'Create Custom Tool',
+  type: {
+    all: 'All',
+    builtIn: 'Built-in',
+    custom: 'Custom',
+  },
+  contribute: {
+    line1: 'I\'m interested in ',
+    line2: 'contributing tools to Dify.',
+    viewGuide: 'View the guide',
+  },
+  author: 'By',
+  auth: {
+    unauthorized: 'To Authorize',
+    authorized: 'Authorized',
+    setup: 'Set up authorization to use',
+    setupModalTitle: 'Set Up Authorization',
+    setupModalTitleDescription: 'After configuring credentials, all members within the workspace can use this tool when orchestrating applications.',
+  },
+  includeToolNum: '{{num}} tools included',
+  addTool: 'Add Tool',
+  createTool: {
+    title: 'Create Custom Tool',
+    editAction: 'Configure',
+    editTitle: 'Edit Custom Tool',
+    name: 'Name',
+    toolNamePlaceHolder: 'Enter the tool name',
+    schema: 'Schema',
+    schemaPlaceHolder: 'Enter your OpenAPI schema here',
+    viewSchemaSpec: 'View the OpenAPI-Swagger Specification',
+    importFromUrl: 'Import from URL',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: 'Please enter a valid URL',
+    examples: 'Examples',
+    exampleOptions: {
+      json: 'Weather(JSON)',
+      yaml: 'Pet Store(YAML)',
+      blankTemplate: 'Blank Template',
+    },
+    availableTools: {
+      title: 'Available Tools',
+      name: 'Name',
+      description: 'Description',
+      method: 'Method',
+      path: 'Path',
+      action: 'Actions',
+      test: 'Test',
+    },
+    authMethod: {
+      title: 'Authorization method',
+      type: 'Authorization type',
+      types: {
+        none: 'None',
+        api_key: 'API Key',
+      },
+      key: 'Key',
+      value: 'Value',
+    },
+    privacyPolicy: 'Privacy policy',
+    privacyPolicyPlaceholder: 'Please enter privacy policy',
+  },
+  test: {
+    title: 'Test',
+    parametersValue: 'Parameters & Value',
+    parameters: 'Parameters',
+    value: 'Value',
+    testResult: 'Test Results',
+    testResultPlaceholder: 'Test result will show here',
+  },
+  thought: {
+    using: 'Using',
+    used: 'Used',
+    requestTitle: 'Request to',
+    responseTitle: 'Response from',
+  },
+  setBuiltInTools: {
+    info: 'Info',
+    setting: 'Setting',
+    toolDescription: 'Tool description',
+    parameters: 'parameters',
+    string: 'string',
+    number: 'number',
+    required: 'Required',
+    infoAndSetting: 'Info & Settings',
+  },
+  noCustomTool: {
+    title: 'No custom tools!',
+    content: 'Add and manage your custom tools here for building AI apps.',
+    createTool: 'Create Tool',
+  },
+  noSearchRes: {
+    title: 'Sorry, no results!',
+    content: 'We couldn\'t find any tools that match your search.',
+    reset: 'Reset Search',
+  },
+  builtInPromptTitle: 'Prompt',
+  toolRemoved: 'Tool removed',
+  notAuthorized: 'Tool not authorized',
+}
+
+export default translation
--- a/i18n/lang/tools.ja.ts
+++ b/i18n/lang/tools.ja.ts
@ -0,0 +1,103 @@
+const translation = {
+  title: 'ツール',
+  createCustomTool: 'カスタムツールの作成',
+  type: {
+    all: 'すべて',
+    builtIn: '内蔵',
+    custom: 'カスタム',
+  },
+  contribute: {
+    line1: '興味があります ',
+    line2: 'Difyにツールを貢献すること。',
+    viewGuide: 'ガイドを見る',
+  },
+  author: '作成者',
+  auth: {
+    unauthorized: '認証が必要',
+    authorized: '認証済み',
+    setup: '使用するために認証を設定',
+    setupModalTitle: '認証設定',
+    setupModalTitleDescription: '資格情報を設定すると、ワークスペース内のすべてのメンバーがアプリケーションを編成する際にこのツールを使用できるようになります。',
+  },
+  includeToolNum: '{{num}} のツールが含まれています',
+  addTool: 'ツールを追加',
+  createTool: {
+    title: 'カスタムツールの作成',
+    editAction: '設定',
+    editTitle: 'カスタムツールの編集',
+    name: '名前',
+    toolNamePlaceHolder: 'ツール名を入力してください',
+    schema: 'スキーマ',
+    schemaPlaceHolder: 'ここにOpenAPIスキーマを入力してください',
+    viewSchemaSpec: 'OpenAPI-Swagger仕様を見る',
+    importFromUrl: 'URLからインポート',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: '有効なURLを入力してください',
+    examples: '例',
+    exampleOptions: {
+      json: '天気予報（JSON）',
+      yaml: 'ペットストア（YAML）',
+      blankTemplate: '空のテンプレート',
+    },
+    availableTools: {
+      title: '利用可能なツール',
+      name: '名前',
+      description: '説明',
+      method: 'メソッド',
+      path: 'パス',
+      action: 'アクション',
+      test: 'テスト',
+    },
+    authMethod: {
+      title: '認証方法',
+      type: '認証タイプ',
+      types: {
+        none: 'なし',
+        api_key: 'APIキー',
+      },
+      key: 'キー',
+      value: '値',
+    },
+    privacyPolicy: 'プライバシーポリシー',
+    privacyPolicyPlaceholder: 'プライバシーポリシーを入力してください',
+  },
+  test: {
+    title: 'テスト',
+    parametersValue: 'パラメータと値',
+    parameters: 'パラメータ',
+    value: '値',
+    testResult: 'テスト結果',
+    testResultPlaceholder: 'テスト結果はここに表示されます',
+  },
+  thought: {
+    using: '使用中',
+    used: '使用済み',
+    requestTitle: 'リクエスト先',
+    responseTitle: 'レスポンス元',
+  },
+  setBuiltInTools: {
+    info: '情報',
+    setting: '設定',
+    toolDescription: 'ツールの説明',
+    parameters: 'パラメータ',
+    string: '文字列',
+    number: '数値',
+    required: '必須',
+    infoAndSetting: '情報と設定',
+  },
+  noCustomTool: {
+    title: 'カスタムツールがありません！',
+    content: 'ここでカスタムツールを追加および管理して、AIアプリを構築します。',
+    createTool: 'ツールの作成',
+  },
+  noSearchRes: {
+    title: '申し訳ありません、結果が見つかりません！',
+    content: '検索条件に一致するツールは見つかりませんでした。',
+    reset: '検索をリセット',
+  },
+  builtInPromptTitle: 'プロンプト',
+  toolRemoved: 'ツールが削除されました',
+  notAuthorized: 'ツールが認証されていません',
+}
+
+export default translation
--- a/i18n/lang/tools.vi.ts
+++ b/i18n/lang/tools.vi.ts
@ -0,0 +1,103 @@
+const translation = {
+  title: 'Công cụ',
+  createCustomTool: 'Tạo công cụ tùy chỉnh',
+  type: {
+    all: 'Tất cả',
+    builtIn: 'Có sẵn',
+    custom: 'Tùy chỉnh',
+  },
+  contribute: {
+    line1: 'Tôi quan tâm đến việc ',
+    line2: 'đóng góp công cụ cho Dify.',
+    viewGuide: 'Xem hướng dẫn',
+  },
+  author: 'Bởi',
+  auth: {
+    unauthorized: 'Chưa ủy quyền',
+    authorized: 'Đã ủy quyền',
+    setup: 'Thiết lập ủy quyền để sử dụng',
+    setupModalTitle: 'Thiết lập ủy quyền',
+    setupModalTitleDescription: 'Sau khi cấu hình thông tin xác thực, tất cả các thành viên trong không gian làm việc đều có thể sử dụng công cụ này khi sắp xếp các ứng dụng.',
+  },
+  includeToolNum: 'Bao gồm {{num}} công cụ',
+  addTool: 'Thêm công cụ',
+  createTool: {
+    title: 'Tạo công cụ tùy chỉnh',
+    editAction: 'Cấu hình',
+    editTitle: 'Chỉnh sửa công cụ tùy chỉnh',
+    name: 'Tên',
+    toolNamePlaceHolder: 'Nhập tên công cụ',
+    schema: 'Schema',
+    schemaPlaceHolder: 'Nhập schema OpenAPI của bạn tại đây',
+    viewSchemaSpec: 'Xem đặc tả OpenAPI-Swagger',
+    importFromUrl: 'Nhập từ URL',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: 'Vui lòng nhập URL hợp lệ',
+    examples: 'Ví dụ',
+    exampleOptions: {
+      json: 'Thời tiết(JSON)',
+      yaml: 'Cửa hàng thú cưng(YAML)',
+      blankTemplate: 'Mẫu trống',
+    },
+    availableTools: {
+      title: 'Công cụ có sẵn',
+      name: 'Tên',
+      description: 'Mô tả',
+      method: 'Phương thức',
+      path: 'Đường dẫn',
+      action: 'Hành động',
+      test: 'Kiểm tra',
+    },
+    authMethod: {
+      title: 'Phương thức ủy quyền',
+      type: 'Loại ủy quyền',
+      types: {
+        none: 'Không có',
+        api_key: 'API Key',
+      },
+      key: 'Khóa',
+      value: 'Giá trị',
+    },
+    privacyPolicy: 'Chính sách bảo mật',
+    privacyPolicyPlaceholder: 'Vui lòng nhập chính sách bảo mật',
+  },
+  test: {
+    title: 'Kiểm tra',
+    parametersValue: 'Tham số & Giá trị',
+    parameters: 'Tham số',
+    value: 'Giá trị',
+    testResult: 'Kết quả kiểm tra',
+    testResultPlaceholder: 'Kết quả kiểm tra sẽ hiển thị ở đây',
+  },
+  thought: {
+    using: 'Đang sử dụng',
+    used: 'Đã sử dụng',
+    requestTitle: 'Yêu cầu đến',
+    responseTitle: 'Phản hồi từ',
+  },
+  setBuiltInTools: {
+    info: 'Thông tin',
+    setting: 'Cài đặt',
+    toolDescription: 'Mô tả công cụ',
+    parameters: 'tham số',
+    string: 'chuỗi',
+    number: 'số',
+    required: 'Bắt buộc',
+    infoAndSetting: 'Thông tin & Cài đặt',
+  },
+  noCustomTool: {
+    title: 'Không có công cụ tùy chỉnh!',
+    content: 'Thêm và quản lý các công cụ tùy chỉnh của bạn tại đây để xây dựng các ứng dụng AI.',
+    createTool: 'Tạo công cụ',
+  },
+  noSearchRes: {
+    title: 'Xin lỗi, không tìm thấy kết quả!',
+    content: 'Chúng tôi không thể tìm thấy bất kỳ công cụ nào phù hợp với tìm kiếm của bạn.',
+    reset: 'Đặt lại tìm kiếm',
+  },
+  builtInPromptTitle: 'Nhắc nhở',
+  toolRemoved: 'Công cụ đã được xóa',
+  notAuthorized: 'Công cụ chưa được ủy quyền',
+}
+
+export default translation;
--- a/i18n/lang/tools.zh.ts
+++ b/i18n/lang/tools.zh.ts
@ -0,0 +1,95 @@
+const translation = {
+  title: '工具',
+  createCustomTool: '创建自定义工具',
+  type: {
+    all: '全部',
+    builtIn: '内置',
+    custom: '自定义',
+  },
+  contribute: {
+    line1: '我有兴趣为 ',
+    line2: 'Dify 贡献工具。',
+    viewGuide: '查看指南',
+  },
+  author: '作者',
+  auth: {
+    unauthorized: '去授权',
+    authorized: '已授权',
+    setup: '要使用请先授权',
+    setupModalTitle: '设置授权',
+    setupModalTitleDescription: '配置凭据后，工作区中的所有成员都可以在编排应用程序时使用此工具。',
+  },
+  includeToolNum: '包含 {{num}} 个工具',
+  addTool: '添加工具',
+  createTool: {
+    title: '创建自定义工具',
+    editAction: '编辑',
+    editTitle: '编辑自定义工具',
+    name: '名称',
+    toolNamePlaceHolder: '输入工具名称',
+    schema: 'Schema',
+    schemaPlaceHolder: '在此处输入您的 OpenAPI schema',
+    viewSchemaSpec: '查看 OpenAPI-Swagger 规范',
+    importFromUrl: '从 URL 中导入',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: '请输入有效的 URL',
+    examples: '例子',
+    exampleOptions: {
+      json: '天气(JSON)',
+      yaml: '宠物商店(YAML)',
+      blankTemplate: '空白模版',
+    },
+    availableTools: {
+      title: '可用工具',
+      name: '名称',
+      description: '描述',
+      method: '方法',
+      path: '路径',
+      action: '操作',
+      test: '测试',
+    },
+    authMethod: {
+      title: '鉴权方法',
+      type: '鉴权类型',
+      types: {
+        none: '无',
+        api_key: 'API Key',
+      },
+      key: '键',
+      value: '值',
+    },
+    privacyPolicy: '隐私协议',
+    privacyPolicyPlaceholder: '请输入隐私协议',
+  },
+  thought: {
+    using: '正在使用',
+    used: '已使用',
+    requestTitle: '请求来自',
+    responseTitle: '响应来自',
+  },
+  setBuiltInTools: {
+    info: '信息',
+    setting: '设置',
+    toolDescription: '工具描述',
+    parameters: '参数',
+    string: '字符串',
+    number: '数字',
+    required: '必填',
+    infoAndSetting: '信息和设置',
+  },
+  noCustomTool: {
+    title: '没有自定义工具!',
+    content: '在此统一添加和管理你的自定义工具，方便构建应用时使用。',
+    createTool: '创建工具',
+  },
+  noSearchRes: {
+    title: '抱歉，没有结果！',
+    content: '我们找不到任何与您的搜索相匹配的工具。',
+    reset: '重置搜索',
+  },
+  builtInPromptTitle: '提示词',
+  toolRemoved: '工具已被移除',
+  notAuthorized: '工具未授权',
+}
+
+export default translation
--- a/next.config.js
+++ b/next.config.js
@ -4,7 +4,7 @@ const nextConfig = {
  // Configure pageExtensions to include md and mdx
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  experimental: {
-    appDir: true,
+    // appDir: true,
  },
  // fix all before production. Now it slow the develop speed.
  eslint: {
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "@heroicons/react": "^2.0.16",
    "@mdx-js/loader": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
+    "@monaco-editor/react": "^4.6.0",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
@ -27,7 +28,7 @@
    "axios": "^1.3.5",
    "classnames": "^2.3.2",
    "copy-to-clipboard": "^3.3.3",
-    "dify-client": "^2.1.0",
+    "dify-client": "^2.3.1",
    "eslint": "8.36.0",
    "eslint-config-next": "13.4.0",
    "eventsource-parser": "^1.0.0",
@ -38,7 +39,7 @@
    "js-cookie": "^3.0.1",
    "katex": "^0.16.7",
    "negotiator": "^0.6.3",
-    "next": "13.4.0",
+    "next": "^14.0.4",
    "rc-textarea": "^1.5.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
--- a/public/vs/base/browser/ui/codicons/codicon/codicon.ttf
+++ b/public/vs/base/browser/ui/codicons/codicon/codicon.ttf
--- a/public/vs/base/common/worker/simpleWorker.nls.de.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.de.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.de",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["Array","Boolescher Wert","Klasse","Konstante","Konstruktor","Enumeration","Enumerationsmember","Ereignis","Feld","Datei","Funktion","Schnittstelle","Schl\xFCssel","Methode","Modul","Namespace","NULL","Zahl","Objekt","Operator","Paket","Eigenschaft","Zeichenfolge","Struktur","Typparameter","Variable","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.de.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.es.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.es.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.es",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["matriz","booleano","clase","constante","constructor","enumeraci\xF3n","miembro de la enumeraci\xF3n","evento","campo","archivo","funci\xF3n","interfaz","clave","m\xE9todo","m\xF3dulo","espacio de nombres","NULL","n\xFAmero","objeto","operador","paquete","propiedad","cadena","estructura","par\xE1metro de tipo","variable","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.es.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.fr.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.fr.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.fr",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["tableau","bool\xE9en","classe","constante","constructeur","\xE9num\xE9ration","membre d'\xE9num\xE9ration","\xE9v\xE9nement","champ","fichier","fonction","interface","cl\xE9","m\xE9thode","module","espace de noms","NULL","nombre","objet","op\xE9rateur","package","propri\xE9t\xE9","cha\xEEne","struct","param\xE8tre de type","variable","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.fr.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.it.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.it.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.it",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["matrice","valore booleano","classe","costante","costruttore","enumerazione","membro di enumerazione","evento","campo","file","funzione","interfaccia","chiave","metodo","modulo","spazio dei nomi","Null","numero","oggetto","operatore","pacchetto","propriet\xE0","stringa","struct","parametro di tipo","variabile","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.it.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.ja.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.ja.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.ja",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\u914D\u5217","\u30D6\u30FC\u30EB\u5024","\u30AF\u30E9\u30B9","\u5B9A\u6570","\u30B3\u30F3\u30B9\u30C8\u30E9\u30AF\u30BF\u30FC","\u5217\u6319\u578B","\u5217\u6319\u578B\u30E1\u30F3\u30D0\u30FC","\u30A4\u30D9\u30F3\u30C8","\u30D5\u30A3\u30FC\u30EB\u30C9","\u30D5\u30A1\u30A4\u30EB","\u95A2\u6570","\u30A4\u30F3\u30BF\u30FC\u30D5\u30A7\u30A4\u30B9","\u30AD\u30FC","\u30E1\u30BD\u30C3\u30C9","\u30E2\u30B8\u30E5\u30FC\u30EB","\u540D\u524D\u7A7A\u9593","NULL","\u6570\u5024","\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8","\u6F14\u7B97\u5B50","\u30D1\u30C3\u30B1\u30FC\u30B8","\u30D7\u30ED\u30D1\u30C6\u30A3","\u6587\u5B57\u5217","\u69CB\u9020\u4F53","\u578B\u30D1\u30E9\u30E1\u30FC\u30BF\u30FC","\u5909\u6570","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.ja.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["array","boolean","class","constant","constructor","enumeration","enumeration member","event","field","file","function","interface","key","method","module","namespace","null","number","object","operator","package","property","string","struct","type parameter","variable","{0} ({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.js.map
--- a/public/vs/base/common/worker/simpleWorker.nls.ko.js
+++ b/public/vs/base/common/worker/simpleWorker.nls.ko.js
@ -0,0 +1,8 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Released under the MIT license
+ * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.ko",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\uBC30\uC5F4","\uBD80\uC6B8","\uD074\uB798\uC2A4","\uC0C1\uC218","\uC0DD\uC131\uC790","\uC5F4\uAC70\uD615","\uC5F4\uAC70\uD615 \uBA64\uBC84","\uC774\uBCA4\uD2B8","\uD544\uB4DC","\uD30C\uC77C","\uD568\uC218","\uC778\uD130\uD398\uC774\uC2A4","\uD0A4","\uBA54\uC11C\uB4DC","\uBAA8\uB4C8","\uB124\uC784\uC2A4\uD398\uC774\uC2A4","Null","\uC22B\uC790","\uAC1C\uCCB4","\uC5F0\uC0B0\uC790","\uD328\uD0A4\uC9C0","\uC18D\uC131","\uBB38\uC790\uC5F4","\uAD6C\uC870\uCCB4","\uD615\uC2DD \uB9E4\uAC1C \uBCC0\uC218","\uBCC0\uC218","{0}({1})"]});
+
+//# sourceMappingURL=../../../../../min-maps/vs/base/common/worker/simpleWorker.nls.ko.js.map
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Joel	25ef02d2aa	chore: add show api error msg	2024-11-25 13:15:14 +08:00
Joel	f6f65cff68	Merge pull request #118 from langgenius/docs/env-description docs: add more description to env	2024-11-22 11:35:27 +08:00
Joel	8c6302d1fc	docs: add more description to env	2024-11-22 11:33:10 +08:00
Joel	291e9a067b	Merge pull request #105 from langgenius/fix/not-support-num-input fix: not support num input	2024-09-04 18:04:16 +08:00
Joel	ac0e3e807d	chore: paragrpah form type	2024-09-04 17:55:45 +08:00
Joel	b7f703852e	fix: not support num input	2024-09-04 17:51:22 +08:00
Joel	ef15747e4a	Merge pull request #104 from langgenius/fix/i18n-files-problem fix: i18n problems	2024-09-03 14:54:40 +08:00
Joel	f9bd745bb0	fix: i18n problems	2024-09-03 14:52:11 +08:00
Joel	e2b37c1a9c	Merge pull request #100 from bcat95/patch-5 Update i18next-config.ts	2024-09-03 14:45:52 +08:00
Joel	0f490de7ff	Merge branch 'main' into patch-5	2024-09-03 14:44:35 +08:00
Joel	aaeb440210	Merge pull request #99 from bcat95/patch-1 Create app.vi.ts	2024-09-03 14:40:15 +08:00
Joel	b45262add9	Merge pull request #97 from bcat95/patch-3 Create tools.vi.ts	2024-09-03 14:39:53 +08:00
Joel	368c6b3dae	Merge pull request #94 from yusuke-ten/feat/add-japanese Add Japanese language settings to i18n	2024-09-03 14:39:28 +08:00
Joel	f6fb9c7cea	Merge pull request #98 from bcat95/patch-2 Create common.vi.ts	2024-09-03 14:38:07 +08:00
Joel	69044eb8a3	Merge pull request #103 from langgenius/fix/not-show-opening-statement fix: not show opening statement	2024-09-03 14:32:46 +08:00
Joel	cafd643c00	fix: not show opening statement	2024-09-03 14:31:05 +08:00
bcat95	1c12b1dce3	Update i18next-config.ts	2024-08-18 22:43:22 +07:00
bcat95	94d09ed23b	Create tools.vi.ts	2024-08-18 22:41:51 +07:00
bcat95	5d313f7463	Create common.vi.ts	2024-08-18 22:41:11 +07:00
bcat95	97203f5ac6	Create app.vi.ts	2024-08-18 22:40:29 +07:00
Yusuke Tenkyo	7f24387eef	Add Japanese language settings to i18n”	2024-08-12 18:44:49 +09:00
Joel	8d21cbc2da	Merge pull request #71 from eltociear/patch-1 docs: update README.md	2024-08-07 18:29:39 +08:00
Joel	7bb19ed8ec	Merge pull request #90 from langgenius/chore/hide-workflow-run-detail chore: hide workflow run detail	2024-08-07 18:04:19 +08:00
Joel	5a85f0d427	chore: hide workflow run detail	2024-08-07 18:01:00 +08:00
Joel	96bd12af44	Merge pull request #38 from Saul-BT/feat/spanish-language feat: add spanish language	2024-08-07 17:14:47 +08:00
Joel	484a5dc102	Merge pull request #81 from yoyocircle/main fix: typos	2024-08-07 17:08:50 +08:00
Joel	10eb176f72	Merge pull request #84 from langgenius/fix/optional-i18n fix: optional copywriting i18n	2024-07-31 11:56:15 +08:00
Joel	fcd6a0215d	fix: optional copywriting i18n	2024-07-31 11:54:30 +08:00
yoyocircle	f6b4b4a361	fix: typos	2024-07-17 03:59:08 +00:00
Ikko Eltociear Ashimine	df0ae34be1	docs: update README.md trucated -> truncated	2024-05-09 15:15:24 +09:00
Joel	884e72b4f0	Merge pull request #64 from langgenius/feat/support-workflow Feat: support workflow	2024-04-24 10:14:30 +08:00
JzoNg	6933b5923b	fix style of answer	2024-04-23 18:23:06 +08:00
JzoNg	30509d92a3	add workflow process	2024-04-23 17:57:24 +08:00
JzoNg	c73753138d	support workflow events	2024-04-23 17:09:12 +08:00
crazywoola	2bd93dcbaa	Merge pull request #61 from langgenius/chore/update-nextjs chore: update Next.js version	2024-04-19 11:00:35 +08:00
Joel	1df62f49f1	Merge branch 'main' into chore/update-nextjs	2024-04-19 10:36:28 +08:00
crazywoola	0ddaa92a12	Merge pull request #53 from Yefori-Go/patch-1 docs: fix typo in readme	2024-04-19 10:27:41 +08:00
Joel	65f90f56ac	chore: update nextjs version	2024-04-19 09:05:39 +08:00
Yefori	924a008de8	docs: fix typo in readme Fix typo in README.md `Conversion` -> `Conversation`	2024-04-03 13:41:33 +08:00
Joel	631a4f1f21	Merge pull request #42 from langgenius/feat/support-agent feat: support agent	2024-01-29 16:05:51 +08:00
Joel	25ba4ac476	feat: show agent show	2024-01-29 16:03:50 +08:00
Joel	83695999ea	feat: conversation support show thought	2024-01-29 13:33:15 +08:00
Joel	b62e34c6fa	feat: support output agent info	2024-01-29 13:00:14 +08:00
Joel	2019d8f3e3	feat: change service code	2024-01-29 10:27:55 +08:00
Joel	ed839618a7	feat: move anwser related code	2024-01-26 18:06:04 +08:00
Joel	3de8abdd7a	Merge pull request #40 from langgenius/chore/split-question-answer-comp chore: split question and and answer to components	2024-01-26 16:44:33 +08:00
Joel	4a75e3774a	chore: split question and and answer to components	2024-01-26 16:41:16 +08:00
Saul Blanco Tejero	f7ff288ff1	feat: add spanish language	2023-12-07 21:20:21 +01:00
zxhlyh	c8f730208d	Merge pull request #33 from langgenius/feat/support-upload-image feat: support upload image	2023-11-22 17:18:22 +08:00