chore: add show api error msg

docs: add more description to env

.env.example

@@ -0,0 +1,6 @@
+# APP ID
+NEXT_PUBLIC_APP_ID=
+# APP API key
+NEXT_PUBLIC_APP_KEY=
+# API url prefix
+NEXT_PUBLIC_API_URL=

.eslintrc.json

@@ -25,4 +25,4 @@
     ],
     "react-hooks/exhaustive-deps": "warn"
   }
-}
+}

.gitignore

@@ -17,6 +17,7 @@
 
 # misc
 .DS_Store
+.vscode
 *.pem
 
 # debug
@@ -27,6 +28,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -46,4 +48,4 @@ yarn.lock
 .yarnrc.yml
 
 # pmpm
-pnpm-lock.yaml
+pnpm-lock.yaml

.vscode/launch.json

@@ -25,4 +25,4 @@
       }
     }
   ]
-}
+}

.vscode/settings.json

@@ -29,4 +29,4 @@
     "i18n/lang",
     "app/api/messages"
   ]
-}
+}

README.md

@@ -1,19 +1,29 @@
-# 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
-Config app in `config/index.ts`.Please config:
-- APP_ID
-- API_KEY
+Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Setting the following content:
+```
+# 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=
 
-More config:
+# 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: 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=
+```
+
+Config more in `config/index.ts` file:   
 ```js
 export const APP_INFO: AppInfo = {
-  "title": 'Chat APP',
-  "description": '',
-  "copyright": '',
-  "privacy_policy": '',
-  "default_language": 'zh-Hans'
+  title: 'Chat APP',
+  description: '',
+  copyright: '',
+  privacy_policy: '',
+  default_language: 'zh-Hans'
 }
 
 export const isShowPrompt = true
@@ -39,6 +49,7 @@ yarn dev
 # or
 pnpm dev
 ```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Using Docker
 
@@ -61,6 +72,9 @@ 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 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.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/api/chat-messages/route.ts

@@ -1,17 +1,16 @@
 import { type NextRequest } from 'next/server'
-import { getInfo, client } from '@/app/api/utils/common'
-import { OpenAIStream } from '@/app/api/utils/stream'
+import { client, getInfo } from '@/app/api/utils/common'
 
 export async function POST(request: NextRequest) {
   const body = await request.json()
   const {
     inputs,
     query,
+    files,
     conversation_id: conversationId,
-    response_mode: responseMode
+    response_mode: responseMode,
   } = body
-  const { user } = getInfo(request);
-  const res = await client.createChatMessage(inputs, query, user, responseMode, conversationId)
-  const stream = await OpenAIStream(res as any)
-  return new Response(stream as any)
-}
+  const { user } = getInfo(request)
+  const res = await client.createChatMessage(inputs, query, user, responseMode, conversationId, files)
+  return new Response(res.data as any)
+}

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)
+}

app/api/conversations/route.ts

@@ -1,11 +1,19 @@
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
-import { getInfo, setSession, client } from '@/app/api/utils/common'
+import { client, getInfo, setSession } from '@/app/api/utils/common'
 
 export async function GET(request: NextRequest) {
-  const { sessionId, user } = getInfo(request);
-  const { data }: any = await client.getConversations(user);
-  return NextResponse.json(data, {
-    headers: setSession(sessionId)
-  })
-}
+  const { sessionId, user } = getInfo(request)
+  try {
+    const { data }: any = await client.getConversations(user)
+    return NextResponse.json(data, {
+      headers: setSession(sessionId),
+    })
+  }
+  catch (error: any) {
+    return NextResponse.json({
+      data: [],
+      error: error.message,
+    })
+  }
+}

app/api/file-upload/route.ts

@@ -0,0 +1,15 @@
+import { type NextRequest } from 'next/server'
+import { client, getInfo } from '@/app/api/utils/common'
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const { user } = getInfo(request)
+    formData.append('user', user)
+    const res = await client.fileUpload(formData)
+    return new Response(res.data.id as any)
+  }
+  catch (e: any) {
+    return new Response(e.message)
+  }
+}

app/api/messages/[messageId]/feedbacks/route.ts

@@ -1,16 +1,16 @@
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
-import { getInfo, client } from '@/app/api/utils/common'
+import { client, getInfo } from '@/app/api/utils/common'
 
 export async function POST(request: NextRequest, { params }: {
   params: { messageId: string }
 }) {
   const body = await request.json()
   const {
-    rating
+    rating,
   } = body
   const { messageId } = params
-  const { user } = getInfo(request);
+  const { user } = getInfo(request)
   const { data } = await client.messageFeedback(messageId, rating, user)
   return NextResponse.json(data)
 }

app/api/messages/route.ts

@@ -1,13 +1,13 @@
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
-import { getInfo, setSession, client } from '@/app/api/utils/common'
+import { client, getInfo, setSession } from '@/app/api/utils/common'
 
 export async function GET(request: NextRequest) {
-  const { sessionId, user } = getInfo(request);
-  const { searchParams } = new URL(request.url);
+  const { sessionId, user } = getInfo(request)
+  const { searchParams } = new URL(request.url)
   const conversationId = searchParams.get('conversation_id')
-  const { data }: any = await client.getConversationMessages(user, conversationId as string);
+  const { data }: any = await client.getConversationMessages(user, conversationId as string)
   return NextResponse.json(data, {
-    headers: setSession(sessionId)
+    headers: setSession(sessionId),
   })
-}
+}

app/api/parameters/route.ts

@@ -1,11 +1,16 @@
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
-import { getInfo, setSession, client } from '@/app/api/utils/common'
+import { client, getInfo, setSession } from '@/app/api/utils/common'
 
 export async function GET(request: NextRequest) {
-  const { sessionId, user } = getInfo(request);
-  const { data } = await client.getApplicationParameters(user);
-  return NextResponse.json(data as object, {
-    headers: setSession(sessionId)
-  })
-}
+  const { sessionId, user } = getInfo(request)
+  try {
+    const { data } = await client.getApplicationParameters(user)
+    return NextResponse.json(data as object, {
+      headers: setSession(sessionId),
+    })
+  }
+  catch (error) {
+    return NextResponse.json([])
+  }
+}

app/api/utils/common.ts

@@ -1,16 +1,16 @@
 import { type NextRequest } from 'next/server'
-import { APP_ID, API_KEY } from '@/config'
-import { ChatClient } from 'langgenius-client'
+import { ChatClient } from 'dify-client'
 import { v4 } from 'uuid'
+import { API_KEY, API_URL, APP_ID } from '@/config'
 
-const userPrefix = `user_${APP_ID}:`;
+const userPrefix = `user_${APP_ID}:`
 
 export const getInfo = (request: NextRequest) => {
-  const sessionId = request.cookies.get('session_id')?.value || v4();
-  const user = userPrefix + sessionId;
+  const sessionId = request.cookies.get('session_id')?.value || v4()
+  const user = userPrefix + sessionId
   return {
     sessionId,
-    user
+    user,
   }
 }
 
@@ -18,4 +18,4 @@ export const setSession = (sessionId: string) => {
   return { 'Set-Cookie': `session_id=${sessionId}` }
 }
 
-export const client = new ChatClient(API_KEY)
+export const client = new ChatClient(API_KEY, API_URL || undefined)

app/api/utils/stream.ts

@@ -1,25 +0,0 @@
-export async function OpenAIStream(res: { body: any }) {
-  const reader = res.body.getReader();
-
-  const stream = new ReadableStream({
-    // https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams
-    // https://github.com/whichlight/chatgpt-api-streaming/blob/master/pages/api/OpenAIStream.ts
-    start(controller) {
-      return pump();
-      function pump() {
-        return reader.read().then(({ done, value }: any) => {
-          // When no more data needs to be consumed, close the stream
-          if (done) {
-            controller.close();
-            return;
-          }
-          // Enqueue the next data chunk into our target stream
-          controller.enqueue(value);
-          return pump();
-        });
-      }
-    },
-  });
-
-  return stream;
-}

app/components/app-unavailable.tsx

@@ -4,26 +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
-  }
+  if (!errMessage)
+    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>
   )

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

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;
-}
+}

app/components/base/auto-height-textarea/index.tsx

@@ -19,6 +19,7 @@ const AutoHeightTextarea = forwardRef(
     { value, onChange, placeholder, className, minHeight = 36, maxHeight = 96, autoFocus, controlFocus, onKeyDown, onKeyUp }: IProps,
     outerRef: any,
   ) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = outerRef || useRef<HTMLTextAreaElement>(null)
 
     const doFocus = () => {

app/components/base/icons/IconBase.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react'
+import { generate } from './utils'
+import type { AbstractNode } from './utils'
+
+export type IconData = {
+  name: string
+  icon: AbstractNode
+}
+
+export type IconBaseProps = {
+  data: IconData
+  className?: string
+  onClick?: React.MouseEventHandler<SVGElement>
+  style?: React.CSSProperties
+}
+
+const IconBase = forwardRef<React.MutableRefObject<HTMLOrSVGElement>, IconBaseProps>((props, ref) => {
+  const { data, className, onClick, style, ...restProps } = props
+
+  return generate(data.icon, `svg-${data.name}`, {
+    className,
+    onClick,
+    style,
+    'data-icon': data.name,
+    'aria-hidden': 'true',
+    ...restProps,
+    'ref': ref,
+  })
+})
+
+export default IconBase

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

app/components/base/icons/line/files/index.ts

@@ -0,0 +1,2 @@
+export { default as ClipboardCheck } from './ClipboardCheck'
+export { default as Clipboard } from './Clipboard'

app/components/base/icons/line/image-plus/data.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": "image-plus"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "id": "Icon",
+              "d": "M8.33333 2.00016H5.2C4.0799 2.00016 3.51984 2.00016 3.09202 2.21815C2.71569 2.4099 2.40973 2.71586 2.21799 3.09218C2 3.52001 2 4.08006 2 5.20016V10.8002C2 11.9203 2 12.4803 2.21799 12.9081C2.40973 13.2845 2.71569 13.5904 3.09202 13.7822C3.51984 14.0002 4.07989 14.0002 5.2 14.0002H11.3333C11.9533 14.0002 12.2633 14.0002 12.5176 13.932C13.2078 13.7471 13.7469 13.208 13.9319 12.5178C14 12.2635 14 11.9535 14 11.3335M12.6667 5.3335V1.3335M10.6667 3.3335H14.6667M7 5.66683C7 6.40321 6.40305 7.00016 5.66667 7.00016C4.93029 7.00016 4.33333 6.40321 4.33333 5.66683C4.33333 4.93045 4.93029 4.3335 5.66667 4.3335C6.40305 4.3335 7 4.93045 7 5.66683ZM9.99336 7.94559L4.3541 13.0722C4.03691 13.3605 3.87831 13.5047 3.86429 13.6296C3.85213 13.7379 3.89364 13.8453 3.97546 13.9172C4.06985 14.0002 4.28419 14.0002 4.71286 14.0002H10.9707C11.9301 14.0002 12.4098 14.0002 12.7866 13.839C13.2596 13.6366 13.6365 13.2598 13.8388 12.7868C14 12.41 14 11.9303 14 10.9708C14 10.648 14 10.4866 13.9647 10.3363C13.9204 10.1474 13.8353 9.9704 13.7155 9.81776C13.6202 9.6963 13.4941 9.59546 13.242 9.3938L11.3772 7.90194C11.1249 7.7001 10.9988 7.59919 10.8599 7.56357C10.7374 7.53218 10.6086 7.53624 10.4884 7.57529C10.352 7.61959 10.2324 7.72826 9.99336 7.94559Z",
+              "stroke": "currentColor",
+              "stroke-width": "1.25",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  },
+  "name": "ImagePlus"
+}

app/components/base/icons/line/image-plus/index.tsx

@@ -0,0 +1,13 @@
+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 = 'ImagePlus'
+
+export default Icon

app/components/base/icons/line/link-03/data.json

@@ -0,0 +1,57 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "17",
+      "height": "16",
+      "viewBox": "0 0 17 16",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "g",
+        "attributes": {
+          "id": "link-03"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "g",
+            "attributes": {
+              "id": "Solid"
+            },
+            "children": [
+              {
+                "type": "element",
+                "name": "path",
+                "attributes": {
+                  "fill-rule": "evenodd",
+                  "clip-rule": "evenodd",
+                  "d": "M9.01569 1.83378C9.7701 1.10515 10.7805 0.701975 11.8293 0.711089C12.8781 0.720202 13.8813 1.14088 14.623 1.88251C15.3646 2.62414 15.7853 3.62739 15.7944 4.67618C15.8035 5.72497 15.4003 6.73538 14.6717 7.48979L14.6636 7.49805L12.6637 9.49796C12.2581 9.90362 11.7701 10.2173 11.2327 10.4178C10.6953 10.6183 10.1211 10.7008 9.54897 10.6598C8.97686 10.6189 8.42025 10.4553 7.91689 10.1803C7.41354 9.90531 6.97522 9.52527 6.63165 9.06596C6.41112 8.77113 6.47134 8.35334 6.76618 8.1328C7.06101 7.91226 7.4788 7.97249 7.69934 8.26732C7.92838 8.57353 8.2206 8.82689 8.55617 9.01023C8.89174 9.19356 9.26281 9.30259 9.64422 9.3299C10.0256 9.35722 10.4085 9.30219 10.7667 9.16854C11.125 9.0349 11.4503 8.82576 11.7207 8.55532L13.7164 6.55956C14.1998 6.05705 14.4672 5.38513 14.4611 4.68777C14.455 3.98857 14.1746 3.31974 13.6802 2.82532C13.1857 2.3309 12.5169 2.05045 11.8177 2.04437C11.12 2.03831 10.4478 2.30591 9.94526 2.78967L8.80219 3.92609C8.54108 4.18568 8.11898 4.18445 7.85939 3.92334C7.5998 3.66223 7.60103 3.24012 7.86214 2.98053L9.0088 1.84053L9.01569 1.83378Z",
+                  "fill": "currentColor"
+                },
+                "children": []
+              },
+              {
+                "type": "element",
+                "name": "path",
+                "attributes": {
+                  "fill-rule": "evenodd",
+                  "clip-rule": "evenodd",
+                  "d": "M5.76493 5.58217C6.30234 5.3817 6.87657 5.29915 7.44869 5.34012C8.0208 5.3811 8.57741 5.54463 9.08077 5.81964C9.58412 6.09465 10.0224 6.47469 10.366 6.93399C10.5865 7.22882 10.5263 7.64662 10.2315 7.86715C9.93665 8.08769 9.51886 8.02746 9.29832 7.73263C9.06928 7.42643 8.77706 7.17307 8.44149 6.98973C8.10592 6.80639 7.73485 6.69737 7.35344 6.67005C6.97203 6.64274 6.58921 6.69777 6.23094 6.83141C5.87266 6.96506 5.54733 7.17419 5.27699 7.44463L3.28123 9.44039C2.79787 9.94291 2.5305 10.6148 2.53656 11.3122C2.54263 12.0114 2.82309 12.6802 3.31751 13.1746C3.81193 13.6691 4.48076 13.9495 5.17995 13.9556C5.87732 13.9616 6.54923 13.6943 7.05174 13.2109L8.18743 12.0752C8.44777 11.8149 8.86988 11.8149 9.13023 12.0752C9.39058 12.3356 9.39058 12.7577 9.13023 13.018L7.99023 14.158L7.98197 14.1662C7.22756 14.8948 6.21715 15.298 5.16837 15.2889C4.11958 15.2798 3.11633 14.8591 2.3747 14.1174C1.63307 13.3758 1.21239 12.3726 1.20328 11.3238C1.19416 10.275 1.59734 9.26458 2.32597 8.51017L2.33409 8.50191L4.33401 6.50199C4.33398 6.50202 4.33404 6.50196 4.33401 6.50199C4.7395 6.09638 5.22756 5.78262 5.76493 5.58217Z",
+                  "fill": "currentColor"
+                },
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "name": "Link03"
+}

app/components/base/icons/line/link-03/index.tsx

@@ -0,0 +1,13 @@
+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 = 'Link03'
+
+export default Icon

app/components/base/icons/line/loading-02/data.json

@@ -0,0 +1,64 @@
+{
+  "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": {
+          "clip-path": "url(#clip0_6037_51601)"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M7.99992 1.33398V4.00065M7.99992 12.0007V14.6673M3.99992 8.00065H1.33325M14.6666 8.00065H11.9999M12.7189 12.7196L10.8333 10.834M12.7189 3.33395L10.8333 5.21956M3.28097 12.7196L5.16659 10.834M3.28097 3.33395L5.16659 5.21956",
+              "stroke": "currentColor",
+              "stroke-width": "1.25",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            "children": []
+          }
+        ]
+      },
+      {
+        "type": "element",
+        "name": "defs",
+        "attributes": {},
+        "children": [
+          {
+            "type": "element",
+            "name": "clipPath",
+            "attributes": {
+              "id": "clip0_6037_51601"
+            },
+            "children": [
+              {
+                "type": "element",
+                "name": "rect",
+                "attributes": {
+                  "width": "16",
+                  "height": "16",
+                  "fill": "white"
+                },
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "name": "Loading02"
+}

app/components/base/icons/line/loading-02/index.tsx

@@ -0,0 +1,13 @@
+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 = 'Loading02'
+
+export default Icon

app/components/base/icons/line/refresh-ccw-01/data.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": "M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8",
+          "stroke": "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "RefreshCcw01"
+}

app/components/base/icons/line/refresh-ccw-01/index.tsx

@@ -0,0 +1,13 @@
+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 = 'RefreshCcw01'
+
+export default Icon

app/components/base/icons/line/upload-03/data.json

@@ -0,0 +1,66 @@
+{
+  "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": "Left Icon",
+          "clip-path": "url(#clip0_12728_40636)"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "id": "Icon",
+              "d": "M10.6654 8.00016L7.9987 5.3335M7.9987 5.3335L5.33203 8.00016M7.9987 5.3335V10.6668M14.6654 8.00016C14.6654 11.6821 11.6806 14.6668 7.9987 14.6668C4.3168 14.6668 1.33203 11.6821 1.33203 8.00016C1.33203 4.31826 4.3168 1.3335 7.9987 1.3335C11.6806 1.3335 14.6654 4.31826 14.6654 8.00016Z",
+              "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_12728_40636"
+            },
+            "children": [
+              {
+                "type": "element",
+                "name": "rect",
+                "attributes": {
+                  "width": "16",
+                  "height": "16",
+                  "fill": "white"
+                },
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "name": "Upload03"
+}

app/components/base/icons/line/upload-03/index.tsx

@@ -0,0 +1,13 @@
+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 = 'Upload03'
+
+export default Icon

app/components/base/icons/line/x-close/data.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": "x-close"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "id": "Icon",
+              "d": "M12 4L4 12M4 4L12 12",
+              "stroke": "currentColor",
+              "stroke-width": "1.25",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  },
+  "name": "XClose"
+}

app/components/base/icons/line/x-close/index.tsx

@@ -0,0 +1,13 @@
+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 = 'XClose'
+
+export default Icon

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"
+}

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

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"
+}

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

app/components/base/icons/solid/alert-triangle/data.json

@@ -0,0 +1,38 @@
+{
+  "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": "alert-triangle"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "id": "Solid",
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              "d": "M6.40616 0.834185C6.14751 0.719172 5.85222 0.719172 5.59356 0.834185C5.3938 0.923011 5.26403 1.07947 5.17373 1.20696C5.08495 1.3323 4.9899 1.49651 4.88536 1.67711L0.751783 8.81693C0.646828 8.99818 0.551451 9.16289 0.486781 9.30268C0.421056 9.44475 0.349754 9.63572 0.372478 9.85369C0.401884 10.1357 0.549654 10.392 0.779012 10.5588C0.956259 10.6877 1.15726 10.7217 1.31314 10.736C1.46651 10.75 1.65684 10.75 1.86628 10.75H10.1334C10.3429 10.75 10.5332 10.75 10.6866 10.736C10.8425 10.7217 11.0435 10.6877 11.2207 10.5588C11.4501 10.392 11.5978 10.1357 11.6272 9.85369C11.65 9.63572 11.5787 9.44475 11.5129 9.30268C11.4483 9.1629 11.3529 8.9982 11.248 8.81697L7.11436 1.67709C7.00983 1.49651 6.91477 1.3323 6.82599 1.20696C6.73569 1.07947 6.60593 0.923011 6.40616 0.834185ZM6.49988 4.5C6.49988 4.22386 6.27602 4 5.99988 4C5.72374 4 5.49988 4.22386 5.49988 4.5V6.5C5.49988 6.77614 5.72374 7 5.99988 7C6.27602 7 6.49988 6.77614 6.49988 6.5V4.5ZM5.99988 8C5.72374 8 5.49988 8.22386 5.49988 8.5C5.49988 8.77614 5.72374 9 5.99988 9H6.00488C6.28102 9 6.50488 8.77614 6.50488 8.5C6.50488 8.22386 6.28102 8 6.00488 8H5.99988Z",
+              "fill": "currentColor"
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  },
+  "name": "AlertTriangle"
+}

app/components/base/icons/solid/alert-triangle/index.tsx

@@ -0,0 +1,13 @@
+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 = 'AlertTriangle'
+
+export default Icon

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"
+}

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

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"
+}

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

app/components/base/icons/utils.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+export type AbstractNode = {
+  name: string
+  attributes: {
+    [key: string]: string
+  }
+  children?: AbstractNode[]
+}
+
+export type Attrs = {
+  [key: string]: string
+}
+
+export function normalizeAttrs(attrs: Attrs = {}): Attrs {
+  return Object.keys(attrs).reduce((acc: Attrs, key) => {
+    const val = attrs[key]
+    key = key.replace(/([-]\w)/g, (g: string) => g[1].toUpperCase())
+    key = key.replace(/([:]\w)/g, (g: string) => g[1].toUpperCase())
+    switch (key) {
+      case 'class':
+        acc.className = val
+        delete acc.class
+        break
+      case 'style':
+        (acc.style as any) = val.split(';').reduce((prev, next) => {
+          const pairs = next?.split(':')
+
+          if (pairs[0] && pairs[1]) {
+            const k = pairs[0].replace(/([-]\w)/g, (g: string) => g[1].toUpperCase())
+            prev[k] = pairs[1]
+          }
+
+          return prev
+        }, {} as Attrs)
+        break
+      default:
+        acc[key] = val
+    }
+    return acc
+  }, {})
+}
+
+export function generate(
+  node: AbstractNode,
+  key: string,
+  rootProps?: { [key: string]: any } | false,
+): any {
+  if (!rootProps) {
+    return React.createElement(
+      node.name,
+      { key, ...normalizeAttrs(node.attributes) },
+      (node.children || []).map((child, index) => generate(child, `${key}-${node.name}-${index}`)),
+    )
+  }
+
+  return React.createElement(
+    node.name,
+    {
+      key,
+      ...normalizeAttrs(node.attributes),
+      ...rootProps,
+    },
+    (node.children || []).map((child, index) => generate(child, `${key}-${node.name}-${index}`)),
+  )
+}

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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"
+}

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

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'

app/components/base/image-gallery/index.tsx

@@ -0,0 +1,83 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import cn from 'classnames'
+import s from './style.module.css'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+
+type Props = {
+  srcs: string[]
+}
+
+const getWidthStyle = (imgNum: number) => {
+  if (imgNum === 1) {
+    return {
+      maxWidth: '100%',
+    }
+  }
+
+  if (imgNum === 2 || imgNum === 4) {
+    return {
+      width: 'calc(50% - 4px)',
+    }
+  }
+
+  return {
+    width: 'calc(33.3333% - 5.3333px)',
+  }
+}
+
+const ImageGallery: FC<Props> = ({
+  srcs,
+}) => {
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
+
+  const imgNum = srcs.length
+  const imgStyle = getWidthStyle(imgNum)
+  return (
+    <div className={cn(s[`img-${imgNum}`], 'flex flex-wrap')}>
+      {/* TODO: support preview */}
+      {srcs.map((src, index) => (
+        <img
+          key={index}
+          className={s.item}
+          style={imgStyle}
+          src={src}
+          alt=''
+          onClick={() => setImagePreviewUrl(src)}
+        />
+      ))}
+      {
+        imagePreviewUrl && (
+          <ImagePreview
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(ImageGallery)
+
+export const ImageGalleryTest = () => {
+  const imgGallerySrcs = (() => {
+    const srcs = []
+    for (let i = 0; i < 6; i++)
+      // srcs.push('https://placekitten.com/640/360')
+      // srcs.push('https://placekitten.com/360/640')
+      srcs.push('https://placekitten.com/360/360')
+
+    return srcs
+  })()
+  return (
+    <div className='space-y-2'>
+      {imgGallerySrcs.map((_, index) => (
+        <div key={index} className='p-4 pb-2 rounded-lg bg-[#D1E9FF80]'>
+          <ImageGallery srcs={imgGallerySrcs.slice(0, index + 1)} />
+        </div>
+      ))}
+    </div>
+  )
+}

app/components/base/image-gallery/style.module.css

@@ -0,0 +1,22 @@
+.item {
+  height: 200px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.item:nth-child(3n) {
+  margin-right: 0;
+}
+
+.img-2 .item:nth-child(2n),
+.img-4 .item:nth-child(2n) {
+  margin-right: 0;
+}
+
+.img-4 .item:nth-child(3n) {
+  margin-right: 8px;
+}

app/components/base/image-uploader/chat-image-uploader.tsx

@@ -0,0 +1,150 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Uploader from './uploader'
+import ImageLinkInput from './image-link-input'
+import ImagePlus from '@/app/components/base/icons/line/image-plus'
+import { TransferMethod } from '@/types/app'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Upload03 from '@/app/components/base/icons/line/upload-03'
+import type { ImageFile, VisionSettings } from '@/types/app'
+
+type UploadOnlyFromLocalProps = {
+  onUpload: (imageFile: ImageFile) => void
+  disabled?: boolean
+  limit?: number
+}
+const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
+  onUpload,
+  disabled,
+  limit,
+}) => {
+  return (
+    <Uploader onUpload={onUpload} disabled={disabled} limit={limit}>
+      {
+        hovering => (
+          <div className={`
+            relative flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer
+            ${hovering && 'bg-gray-100'}
+          `}>
+            <ImagePlus className='w-4 h-4 text-gray-500' />
+          </div>
+        )
+      }
+    </Uploader>
+  )
+}
+
+type UploaderButtonProps = {
+  methods: VisionSettings['transfer_methods']
+  onUpload: (imageFile: ImageFile) => void
+  disabled?: boolean
+  limit?: number
+}
+const UploaderButton: FC<UploaderButtonProps> = ({
+  methods,
+  onUpload,
+  disabled,
+  limit,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const hasUploadFromLocal = methods.find(method => method === TransferMethod.local_file)
+
+  const handleUpload = (imageFile: ImageFile) => {
+    setOpen(false)
+    onUpload(imageFile)
+  }
+
+  const handleToggle = () => {
+    if (disabled)
+      return
+
+    setOpen(v => !v)
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='top-start'
+    >
+      <PortalToFollowElemTrigger onClick={handleToggle}>
+        <div className={`
+          relative flex items-center justify-center w-8 h-8 hover:bg-gray-100 rounded-lg
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+        `}>
+          <ImagePlus className='w-4 h-4 text-gray-500' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-50'>
+        <div className='p-2 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'>
+          <ImageLinkInput onUpload={handleUpload} />
+          {
+            hasUploadFromLocal && (
+              <>
+                <div className='flex items-center mt-2 px-2 text-xs font-medium text-gray-400'>
+                  <div className='mr-3 w-[93px] h-[1px] bg-gradient-to-l from-[#F3F4F6]' />
+                  OR
+                  <div className='ml-3 w-[93px] h-[1px] bg-gradient-to-r from-[#F3F4F6]' />
+                </div>
+                <Uploader onUpload={handleUpload} limit={limit}>
+                  {
+                    hovering => (
+                      <div className={`
+                        flex items-center justify-center h-8 text-[13px] font-medium text-[#155EEF] rounded-lg cursor-pointer
+                        ${hovering && 'bg-primary-50'}
+                      `}>
+                        <Upload03 className='mr-1 w-4 h-4' />
+                        {t('common.imageUploader.uploadFromComputer')}
+                      </div>
+                    )
+                  }
+                </Uploader>
+              </>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+type ChatImageUploaderProps = {
+  settings: VisionSettings
+  onUpload: (imageFile: ImageFile) => void
+  disabled?: boolean
+}
+const ChatImageUploader: FC<ChatImageUploaderProps> = ({
+  settings,
+  onUpload,
+  disabled,
+}) => {
+  const onlyUploadLocal = settings.transfer_methods.length === 1 && settings.transfer_methods[0] === TransferMethod.local_file
+
+  if (onlyUploadLocal) {
+    return (
+      <UploadOnlyFromLocal
+        onUpload={onUpload}
+        disabled={disabled}
+        limit={+settings.image_file_size_limit!}
+      />
+    )
+  }
+
+  return (
+    <UploaderButton
+      methods={settings.transfer_methods}
+      onUpload={onUpload}
+      disabled={disabled}
+      limit={+settings.image_file_size_limit!}
+    />
+  )
+}
+
+export default ChatImageUploader

app/components/base/image-uploader/hooks.ts

@@ -0,0 +1,108 @@
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { imageUpload } from './utils'
+import Toast from '@/app/components/base/toast'
+import type { ImageFile } from '@/types/app'
+
+export const useImageFiles = () => {
+  const { t } = useTranslation()
+  const { notify } = Toast
+  const [files, setFiles] = useState<ImageFile[]>([])
+  const filesRef = useRef<ImageFile[]>([])
+
+  const handleUpload = (imageFile: ImageFile) => {
+    const files = filesRef.current
+    const index = files.findIndex(file => file._id === imageFile._id)
+
+    if (index > -1) {
+      const currentFile = files[index]
+      const newFiles = [...files.slice(0, index), { ...currentFile, ...imageFile }, ...files.slice(index + 1)]
+      setFiles(newFiles)
+      filesRef.current = newFiles
+    }
+    else {
+      const newFiles = [...files, imageFile]
+      setFiles(newFiles)
+      filesRef.current = newFiles
+    }
+  }
+  const handleRemove = (imageFileId: string) => {
+    const files = filesRef.current
+    const index = files.findIndex(file => file._id === imageFileId)
+
+    if (index > -1) {
+      const currentFile = files[index]
+      const newFiles = [...files.slice(0, index), { ...currentFile, deleted: true }, ...files.slice(index + 1)]
+      setFiles(newFiles)
+      filesRef.current = newFiles
+    }
+  }
+  const handleImageLinkLoadError = (imageFileId: string) => {
+    const files = filesRef.current
+    const index = files.findIndex(file => file._id === imageFileId)
+
+    if (index > -1) {
+      const currentFile = files[index]
+      const newFiles = [...files.slice(0, index), { ...currentFile, progress: -1 }, ...files.slice(index + 1)]
+      filesRef.current = newFiles
+      setFiles(newFiles)
+    }
+  }
+  const handleImageLinkLoadSuccess = (imageFileId: string) => {
+    const files = filesRef.current
+    const index = files.findIndex(file => file._id === imageFileId)
+
+    if (index > -1) {
+      const currentImageFile = files[index]
+      const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: 100 }, ...files.slice(index + 1)]
+      filesRef.current = newFiles
+      setFiles(newFiles)
+    }
+  }
+  const handleReUpload = (imageFileId: string) => {
+    const files = filesRef.current
+    const index = files.findIndex(file => file._id === imageFileId)
+
+    if (index > -1) {
+      const currentImageFile = files[index]
+      imageUpload({
+        file: currentImageFile.file!,
+        onProgressCallback: (progress) => {
+          const newFiles = [...files.slice(0, index), { ...currentImageFile, progress }, ...files.slice(index + 1)]
+          filesRef.current = newFiles
+          setFiles(newFiles)
+        },
+        onSuccessCallback: (res) => {
+          const newFiles = [...files.slice(0, index), { ...currentImageFile, fileId: res.id, progress: 100 }, ...files.slice(index + 1)]
+          filesRef.current = newFiles
+          setFiles(newFiles)
+        },
+        onErrorCallback: () => {
+          notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
+          const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: -1 }, ...files.slice(index + 1)]
+          filesRef.current = newFiles
+          setFiles(newFiles)
+        },
+      })
+    }
+  }
+
+  const handleClear = () => {
+    setFiles([])
+    filesRef.current = []
+  }
+
+  const filteredFiles = useMemo(() => {
+    return files.filter(file => !file.deleted)
+  }, [files])
+
+  return {
+    files: filteredFiles,
+    onUpload: handleUpload,
+    onRemove: handleRemove,
+    onImageLinkLoadError: handleImageLinkLoadError,
+    onImageLinkLoadSuccess: handleImageLinkLoadSuccess,
+    onReUpload: handleReUpload,
+    onClear: handleClear,
+  }
+}

app/components/base/image-uploader/image-link-input.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import type { ImageFile } from '@/types/app'
+import { TransferMethod } from '@/types/app'
+
+type ImageLinkInputProps = {
+  onUpload: (imageFile: ImageFile) => void
+}
+const regex = /^(https?|ftp):\/\//
+const ImageLinkInput: FC<ImageLinkInputProps> = ({
+  onUpload,
+}) => {
+  const { t } = useTranslation()
+  const [imageLink, setImageLink] = useState('')
+
+  const handleClick = () => {
+    const imageFile = {
+      type: TransferMethod.remote_url,
+      _id: `${Date.now()}`,
+      fileId: '',
+      progress: regex.test(imageLink) ? 0 : -1,
+      url: imageLink,
+    }
+
+    onUpload(imageFile)
+  }
+
+  return (
+    <div className='flex items-center pl-1.5 pr-1 h-8 border border-gray-200 bg-white shadow-xs rounded-lg'>
+      <input
+        className='grow mr-0.5 px-1 h-[18px] text-[13px] outline-none appearance-none'
+        value={imageLink}
+        onChange={e => setImageLink(e.target.value)}
+        placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''}
+      />
+      <Button
+        type='primary'
+        className='!h-6 text-xs font-medium'
+        disabled={!imageLink}
+        onClick={handleClick}
+      >
+        {t('common.operation.ok')}
+      </Button>
+    </div>
+  )
+}
+
+export default ImageLinkInput

app/components/base/image-uploader/image-list.tsx

@@ -0,0 +1,130 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading02 from '@/app/components/base/icons/line/loading-02'
+import XClose from '@/app/components/base/icons/line/x-close'
+import RefreshCcw01 from '@/app/components/base/icons/line/refresh-ccw-01'
+import AlertTriangle from '@/app/components/base/icons/solid/alert-triangle'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import type { ImageFile } from '@/types/app'
+import { TransferMethod } from '@/types/app'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+
+type ImageListProps = {
+  list: ImageFile[]
+  readonly?: boolean
+  onRemove?: (imageFileId: string) => void
+  onReUpload?: (imageFileId: string) => void
+  onImageLinkLoadSuccess?: (imageFileId: string) => void
+  onImageLinkLoadError?: (imageFileId: string) => void
+}
+
+const ImageList: FC<ImageListProps> = ({
+  list,
+  readonly,
+  onRemove,
+  onReUpload,
+  onImageLinkLoadSuccess,
+  onImageLinkLoadError,
+}) => {
+  const { t } = useTranslation()
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
+
+  const handleImageLinkLoadSuccess = (item: ImageFile) => {
+    if (item.type === TransferMethod.remote_url && onImageLinkLoadSuccess && item.progress !== -1)
+      onImageLinkLoadSuccess(item._id)
+  }
+  const handleImageLinkLoadError = (item: ImageFile) => {
+    if (item.type === TransferMethod.remote_url && onImageLinkLoadError)
+      onImageLinkLoadError(item._id)
+  }
+
+  return (
+    <div className='flex flex-wrap'>
+      {
+        list.map(item => (
+          <div
+            key={item._id}
+            className='group relative mr-1 border-[0.5px] border-black/5 rounded-lg'
+          >
+            {
+              item.type === TransferMethod.local_file && item.progress !== 100 && (
+                <>
+                  <div
+                    className='absolute inset-0 flex items-center justify-center z-[1] bg-black/30'
+                    style={{ left: item.progress > -1 ? `${item.progress}%` : 0 }}
+                  >
+                    {
+                      item.progress === -1 && (
+                        <RefreshCcw01 className='w-5 h-5 text-white' onClick={() => onReUpload && onReUpload(item._id)} />
+                      )
+                    }
+                  </div>
+                  {
+                    item.progress > -1 && (
+                      <span className='absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-sm text-white mix-blend-lighten z-[1]'>{item.progress}%</span>
+                    )
+                  }
+                </>
+              )
+            }
+            {
+              item.type === TransferMethod.remote_url && item.progress !== 100 && (
+                <div className={`
+                  absolute inset-0 flex items-center justify-center rounded-lg z-[1] border
+                  ${item.progress === -1 ? 'bg-[#FEF0C7] border-[#DC6803]' : 'bg-black/[0.16] border-transparent'}
+                `}>
+                  {
+                    item.progress > -1 && (
+                      <Loading02 className='animate-spin w-5 h-5 text-white' />
+                    )
+                  }
+                  {
+                    item.progress === -1 && (
+                      <TooltipPlus popupContent={t('common.imageUploader.pasteImageLinkInvalid')}>
+                        <AlertTriangle className='w-4 h-4 text-[#DC6803]' />
+                      </TooltipPlus>
+                    )
+                  }
+                </div>
+              )
+            }
+            <img
+              className='w-16 h-16 rounded-lg object-cover cursor-pointer border-[0.5px] border-black/5'
+              alt=''
+              onLoad={() => handleImageLinkLoadSuccess(item)}
+              onError={() => handleImageLinkLoadError(item)}
+              src={item.type === TransferMethod.remote_url ? item.url : item.base64Url}
+              onClick={() => item.progress === 100 && setImagePreviewUrl((item.type === TransferMethod.remote_url ? item.url : item.base64Url) as string)}
+            />
+            {
+              !readonly && (
+                <div
+                  className={`
+                    absolute z-10 -top-[9px] -right-[9px] items-center justify-center w-[18px] h-[18px] 
+                    bg-white hover:bg-gray-50 border-[0.5px] border-black/[0.02] rounded-2xl shadow-lg
+                    cursor-pointer
+                    ${item.progress === -1 ? 'flex' : 'hidden group-hover:flex'}
+                  `}
+                  onClick={() => onRemove && onRemove(item._id)}
+                >
+                  <XClose className='w-3 h-3 text-gray-500' />
+                </div>
+              )
+            }
+          </div>
+        ))
+      }
+      {
+        imagePreviewUrl && (
+          <ImagePreview
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default ImageList

app/components/base/image-uploader/image-preview.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import { createPortal } from 'react-dom'
+import XClose from '@/app/components/base/icons/line/x-close'
+
+type ImagePreviewProps = {
+  url: string
+  onCancel: () => void
+}
+const ImagePreview: FC<ImagePreviewProps> = ({
+  url,
+  onCancel,
+}) => {
+  return createPortal(
+    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+      <img
+        alt='preview image'
+        src={url}
+        className='max-w-full max-h-full'
+      />
+      <div
+        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        onClick={onCancel}
+      >
+        <XClose className='w-4 h-4 text-white' />
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+export default ImagePreview

app/components/base/image-uploader/uploader.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import type { ChangeEvent, FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { imageUpload } from './utils'
+import type { ImageFile } from '@/types/app'
+import { TransferMethod } from '@/types/app'
+import Toast from '@/app/components/base/toast'
+
+type UploaderProps = {
+  children: (hovering: boolean) => JSX.Element
+  onUpload: (imageFile: ImageFile) => void
+  limit?: number
+  disabled?: boolean
+}
+
+const Uploader: FC<UploaderProps> = ({
+  children,
+  onUpload,
+  limit,
+  disabled,
+}) => {
+  const [hovering, setHovering] = useState(false)
+  const { notify } = Toast
+  const { t } = useTranslation()
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+
+    if (!file)
+      return
+
+    if (limit && file.size > limit * 1024 * 1024) {
+      notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerLimit', { size: limit }) })
+      return
+    }
+
+    const reader = new FileReader()
+    reader.addEventListener(
+      'load',
+      () => {
+        const imageFile = {
+          type: TransferMethod.local_file,
+          _id: `${Date.now()}`,
+          fileId: '',
+          file,
+          url: reader.result as string,
+          base64Url: reader.result as string,
+          progress: 0,
+        }
+        onUpload(imageFile)
+        imageUpload({
+          file: imageFile.file,
+          onProgressCallback: (progress) => {
+            onUpload({ ...imageFile, progress })
+          },
+          onSuccessCallback: (res) => {
+            onUpload({ ...imageFile, fileId: res.id, progress: 100 })
+          },
+          onErrorCallback: () => {
+            notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
+            onUpload({ ...imageFile, progress: -1 })
+          },
+        })
+      },
+      false,
+    )
+    reader.addEventListener(
+      'error',
+      () => {
+        notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerReadError') })
+      },
+      false,
+    )
+    reader.readAsDataURL(file)
+  }
+
+  return (
+    <div
+      className='relative'
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      {children(hovering)}
+      <input
+        className={`
+          absolute block inset-0 opacity-0 text-[0] w-full
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+        `}
+        onClick={e => (e.target as HTMLInputElement).value = ''}
+        type='file'
+        accept='.png, .jpg, .jpeg, .webp, .gif'
+        onChange={handleChange}
+        disabled={disabled}
+      />
+    </div>
+  )
+}
+
+export default Uploader

app/components/base/image-uploader/utils.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import { upload } from '@/service/base'
+
+type ImageUploadParams = {
+  file: File
+  onProgressCallback: (progress: number) => void
+  onSuccessCallback: (res: { id: string }) => void
+  onErrorCallback: () => void
+}
+type ImageUpload = (v: ImageUploadParams) => void
+export const imageUpload: ImageUpload = ({
+  file,
+  onProgressCallback,
+  onSuccessCallback,
+  onErrorCallback,
+}) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  const onProgress = (e: ProgressEvent) => {
+    if (e.lengthComputable) {
+      const percent = Math.floor(e.loaded / e.total * 100)
+      onProgressCallback(percent)
+    }
+  }
+
+  upload({
+    xhr: new XMLHttpRequest(),
+    data: formData,
+    onprogress: onProgress,
+  })
+    .then((res: { id: string }) => {
+      onSuccessCallback(res)
+    })
+    .catch(() => {
+      onErrorCallback()
+    })
+}

app/components/base/markdown.tsx

@@ -18,7 +18,7 @@ export function Markdown(props: { content: string }) {
         components={{
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || '')
-            return !inline && match
+            return (!inline && match)
               ? (
                 <SyntaxHighlighter
                   {...props}

app/components/base/portal-to-follow-elem/index.tsx

@@ -0,0 +1,167 @@
+'use client'
+import React from 'react'
+import {
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useMergeRefs,
+  useRole,
+} from '@floating-ui/react'
+
+import type { OffsetOptions, Placement } from '@floating-ui/react'
+
+type PortalToFollowElemOptions = {
+  /*
+  * top, bottom, left, right
+  * start, end. Default is middle
+  * combine: top-start, top-end
+  */
+  placement?: Placement
+  open?: boolean
+  offset?: number | OffsetOptions
+  onOpenChange?: (open: boolean) => void
+}
+
+export function usePortalToFollowElem({
+  placement = 'bottom',
+  open,
+  offset: offsetValue = 0,
+  onOpenChange: setControlledOpen,
+}: PortalToFollowElemOptions = {}) {
+  const setOpen = setControlledOpen
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetValue),
+      flip({
+        crossAxis: placement.includes('-'),
+        fallbackAxisSideDirection: 'start',
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+    ],
+  })
+
+  const context = data.context
+
+  const hover = useHover(context, {
+    move: false,
+    enabled: open == null,
+  })
+  const focus = useFocus(context, {
+    enabled: open == null,
+  })
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: 'tooltip' })
+
+  const interactions = useInteractions([hover, focus, dismiss, role])
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, interactions, data],
+  )
+}
+
+type ContextType = ReturnType<typeof usePortalToFollowElem> | null
+
+const PortalToFollowElemContext = React.createContext<ContextType>(null)
+
+export function usePortalToFollowElemContext() {
+  const context = React.useContext(PortalToFollowElemContext)
+
+  if (context == null)
+    throw new Error('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
+
+  return context
+}
+
+export function PortalToFollowElem({
+  children,
+  ...options
+}: { children: React.ReactNode } & PortalToFollowElemOptions) {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const tooltip = usePortalToFollowElem(options)
+  return (
+    <PortalToFollowElemContext.Provider value={tooltip}>
+      {children}
+    </PortalToFollowElemContext.Provider>
+  )
+}
+
+export const PortalToFollowElemTrigger = React.forwardRef<
+HTMLElement,
+React.HTMLProps<HTMLElement> & { asChild?: boolean }
+>(({ children, asChild = false, ...props }, propRef) => {
+  const context = usePortalToFollowElemContext()
+  const childrenRef = (children as any).ref
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        'data-state': context.open ? 'open' : 'closed',
+      }),
+    )
+  }
+
+  return (
+    <div
+      ref={ref}
+      className='inline-block'
+      // The user can style the trigger based on the state
+      data-state={context.open ? 'open' : 'closed'}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </div>
+  )
+})
+PortalToFollowElemTrigger.displayName = 'PortalToFollowElemTrigger'
+
+export const PortalToFollowElemContent = React.forwardRef<
+HTMLDivElement,
+React.HTMLProps<HTMLDivElement>
+>(({ style, ...props }, propRef) => {
+  const context = usePortalToFollowElemContext()
+  const ref = useMergeRefs([context.refs.setFloating, propRef])
+
+  if (!context.open)
+    return null
+
+  return (
+    <FloatingPortal>
+      <div
+        ref={ref}
+        style={{
+          ...context.floatingStyles,
+          ...style,
+        }}
+        {...context.getFloatingProps(props)}
+      />
+    </FloatingPortal>
+  )
+})
+
+PortalToFollowElemContent.displayName = 'PortalToFollowElemContent'

app/components/base/toast/index.tsx

@@ -9,7 +9,7 @@ import {
   InformationCircleIcon,
   XCircleIcon,
 } from '@heroicons/react/20/solid'
-import { createContext } from 'use-context-selector'
+import { createContext, useContext } from 'use-context-selector'
 
 export type IToastProps = {
   type?: 'success' | 'error' | 'warning' | 'info'
@@ -24,6 +24,8 @@ type IToastContext = {
 const defaultDuring = 3000
 
 export const ToastContext = createContext<IToastContext>({} as IToastContext)
+export const useToastContext = () => useContext(ToastContext)
+
 const Toast = ({
   type = 'info',
   duration,

app/components/base/tooltip-plus/index.tsx

@@ -0,0 +1,50 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+export type TooltipProps = {
+  position?: 'top' | 'right' | 'bottom' | 'left'
+  triggerMethod?: 'hover' | 'click'
+  popupContent: React.ReactNode
+  children: React.ReactNode
+}
+
+const arrow = (
+  <svg className="absolute text-white h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255"><polygon className="fill-current" points="0,0 127.5,127.5 255,0"></polygon></svg>
+)
+
+const Tooltip: FC< TooltipProps> = ({
+  position = 'top',
+  triggerMethod = 'hover',
+  popupContent,
+  children,
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement={position}
+      offset={10}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => triggerMethod === 'click' && setOpen(v => !v)}
+        onMouseEnter={() => triggerMethod === 'hover' && setOpen(true)}
+        onMouseLeave={() => triggerMethod === 'hover' && setOpen(false)}
+      >
+        {children}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent
+        className="z-[999]"
+      >
+        <div className='relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg'>
+          {popupContent}
+          {arrow}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(Tooltip)

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)

app/components/chat/index.tsx

@@ -1,21 +1,23 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect } 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 { randomString } from '@/utils/string'
-import type { Feedbacktype, MessageRating } 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 AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
-import { Markdown } from '@/app/components/base/markdown'
-
-export type FeedbackFunc = (messageId: string, feedback: Feedbacktype) => Promise<any>
+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'
 
 export type IChatProps = {
-  chatList: IChatItem[]
+  chatList: ChatItem[]
   /**
    * Whether to display the editing area and rating status
    */
@@ -26,196 +28,11 @@ export type IChatProps = {
   isHideSendInput?: boolean
   onFeedback?: FeedbackFunc
   checkCanSend?: () => boolean
-  onSend?: (message: string) => void
+  onSend?: (message: string, files: VisionFile[]) => void
   useCurrentUserAvatar?: boolean
-  isResponsing?: boolean
+  isResponding?: boolean
   controlClearQuery?: number
-  controlFocus?: number
-}
-
-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
-}
-
-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} ${isResponsing ? s.typeingIcon : ''} w-10 h-10 shrink-0`}></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>
-              )}
-              <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'>
-
-const Question: FC<IQuestionProps> = ({ id, content, useCurrentUserAvatar }) => {
-  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'}
-          >
-            <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>
-  )
+  visionConfig?: VisionSettings
 }
 
 const Chat: FC<IChatProps> = ({
@@ -226,12 +43,13 @@ const Chat: FC<IChatProps> = ({
   checkCanSend,
   onSend = () => { },
   useCurrentUserAvatar,
-  isResponsing,
+  isResponding,
   controlClearQuery,
-  controlFocus,
+  visionConfig,
 }) => {
   const { t } = useTranslation()
   const { notify } = Toast
+  const isUseInputMethod = useRef(false)
 
   const [query, setQuery] = React.useState('')
   const handleContentChange = (e: any) => {
@@ -255,24 +73,44 @@ const Chat: FC<IChatProps> = ({
     if (controlClearQuery)
       setQuery('')
   }, [controlClearQuery])
+  const {
+    files,
+    onUpload,
+    onRemove,
+    onReUpload,
+    onImageLinkLoadError,
+    onImageLinkLoadSuccess,
+    onClear,
+  } = useImageFiles()
 
   const handleSend = () => {
     if (!valid() || (checkCanSend && !checkCanSend()))
       return
-    onSend(query)
-    if (!isResponsing)
-      setQuery('')
+    onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({
+      type: 'image',
+      transfer_method: fileItem.type,
+      url: fileItem.url,
+      upload_file_id: fileItem.fileId,
+    })))
+    if (!files.find(item => item.type === TransferMethod.local_file && !item.fileId)) {
+      if (files.length)
+        onClear()
+      if (!isResponding)
+        setQuery('')
+    }
   }
 
   const handleKeyUp = (e: any) => {
     if (e.code === 'Enter') {
       e.preventDefault()
-      if (!e.shiftKey)
+      // prevent send message when using input method enter
+      if (!e.shiftKey && !isUseInputMethod.current)
         handleSend()
     }
   }
 
-  const haneleKeyDown = (e: any) => {
+  const handleKeyDown = (e: any) => {
+    isUseInputMethod.current = e.nativeEvent.isComposing
     if (e.code === 'Enter' && !e.shiftKey) {
       setQuery(query.replace(/\n$/, ''))
       e.preventDefault()
@@ -291,27 +129,59 @@ const Chat: FC<IChatProps> = ({
               item={item}
               feedbackDisabled={feedbackDisabled}
               onFeedback={onFeedback}
-              isResponsing={isResponsing && isLast}
+              isResponding={isResponding && isLast}
             />
           }
-          return <Question key={item.id} id={item.id} content={item.content} useCurrentUserAvatar={useCurrentUserAvatar} />
+          return (
+            <Question
+              key={item.id}
+              id={item.id}
+              content={item.content}
+              useCurrentUserAvatar={useCurrentUserAvatar}
+              imgSrcs={(item.message_files && item.message_files?.length > 0) ? item.message_files.map(item => item.url) : []}
+            />
+          )
         })}
       </div>
       {
         !isHideSendInput && (
           <div className={cn(!feedbackDisabled && '!left-3.5 !right-3.5', 'absolute z-10 bottom-0 left-0 right-0')}>
-            <div className="positive">
-              <AutoHeightTextarea
+            <div className='p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto'>
+              {
+                visionConfig?.enabled && (
+                  <>
+                    <div className='absolute bottom-2 left-2 flex items-center'>
+                      <ChatImageUploader
+                        settings={visionConfig}
+                        onUpload={onUpload}
+                        disabled={files.length >= visionConfig.number_limits}
+                      />
+                      <div className='mx-1 w-[1px] h-4 bg-black/5' />
+                    </div>
+                    <div className='pl-[52px]'>
+                      <ImageList
+                        list={files}
+                        onRemove={onRemove}
+                        onReUpload={onReUpload}
+                        onImageLinkLoadSuccess={onImageLinkLoadSuccess}
+                        onImageLinkLoadError={onImageLinkLoadError}
+                      />
+                    </div>
+                  </>
+                )
+              }
+              <Textarea
+                className={`
+                  block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
+                  ${visionConfig?.enabled && 'pl-12'}
+                `}
                 value={query}
                 onChange={handleContentChange}
                 onKeyUp={handleKeyUp}
-                onKeyDown={haneleKeyDown}
-                minHeight={48}
-                autoFocus
-                controlFocus={controlFocus}
-                className={`${cn(s.textArea)} resize-none block w-full pl-3 bg-gray-50 border border-gray-200 rounded-md  focus:outline-none sm:text-sm text-gray-700`}
+                onKeyDown={handleKeyDown}
+                autoSize
               />
-              <div className="absolute top-0 right-2 flex items-center h-[48px]">
+              <div className="absolute bottom-2 right-2 flex items-center h-8">
                 <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
                 <Tooltip
                   selector='send-tip'

app/components/chat/loading-anim/index.tsx

@@ -0,0 +1,17 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import s from './style.module.css'
+
+export type ILoaidingAnimProps = {
+  type: 'text' | 'avatar'
+}
+
+const LoaidingAnim: FC<ILoaidingAnimProps> = ({
+  type,
+}) => {
+  return (
+    <div className={`${s['dot-flashing']} ${s[type]}`}></div>
+  )
+}
+export default React.memo(LoaidingAnim)

app/components/chat/loading-anim/style.module.css

@@ -0,0 +1,82 @@
+.dot-flashing {
+  position: relative;
+  animation: 1s infinite linear alternate;
+  animation-delay: 0.5s;
+}
+
+.dot-flashing::before,
+.dot-flashing::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  animation: 1s infinite linear alternate;
+}
+
+.dot-flashing::before {
+  animation-delay: 0s;
+}
+
+.dot-flashing::after {
+  animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: #667085;
+  }
+
+  50%,
+  100% {
+    background-color: rgba(102, 112, 133, 0.3);
+  }
+}
+
+@keyframes dot-flashing-avatar {
+  0% {
+    background-color: #155EEF;
+  }
+
+  50%,
+  100% {
+    background-color: rgba(21, 94, 239, 0.3);
+  }
+}
+
+.text,
+.text::before,
+.text::after {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #667085;
+  color: #667085;
+  animation-name: dot-flashing;
+}
+
+.text::before {
+  left: -7px;
+}
+
+.text::after {
+  left: 7px;
+}
+
+.avatar,
+.avatar::before,
+.avatar::after {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #155EEF;
+  color: #155EEF;
+  animation-name: dot-flashing-avatar;
+}
+
+.avatar::before {
+  left: -5px;
+}
+
+.avatar::after {
+  left: 5px;
+}