Add app files

.editorconfig

@@ -0,0 +1,22 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,tsx}]
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

.eslintrc.json

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

.gitignore

@@ -0,0 +1,49 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# npm
+package-lock.json
+
+# yarn
+.pnp.cjs
+.pnp.loader.mjs
+.yarn/
+yarn.lock
+.yarnrc.yml
+
+# pmpm
+pnpm-lock.yaml

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,32 @@
+{
+  "typescript.tsdk": ".yarn/cache/typescript-patch-72dc6f164f-ab417a2f39.zip/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[python]": {
+    "editor.formatOnType": true
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "i18n-ally.localesPaths": [
+    "i18n",
+    "i18n/lang",
+    "app/api/messages"
+  ]
+}

DEVELOPER.md

@@ -0,0 +1,67 @@
+# Conversion 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
+
+More config:
+```js
+export const APP_INFO: AppInfo = {
+  "title": 'Chat APP',
+  "description": '',
+  "copyright": '',
+  "privacy_policy": '',
+  "default_language": 'zh-Hans'
+}
+
+export const isShowPrompt = true
+export const promptTemplate = ''
+```
+
+## Getting Started
+First, install dependencies:
+```bash
+npm install
+# or
+yarn
+# or
+pnpm install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Using Docker
+
+```
+docker build . -t <DOCKER_HUB_REPO>/webapp-conversation:latest
+# now you can access it in port 3000
+docker run -p 3000:3000 <DOCKER_HUB_REPO>/webapp-conversation:latest
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on 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.

Dockerfile

@@ -0,0 +1,12 @@
+FROM --platform=linux/amd64 node:19-bullseye-slim
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn install
+RUN yarn build
+
+EXPOSE 3000
+
+CMD ["yarn","start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 DorkAI Networking
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,11 @@
 ---
 title: ChatUIPro
-emoji: 📉
-colorFrom: blue
-colorTo: green
+emoji: 🐨
+colorFrom: indigo
+colorTo: blue
 sdk: docker
 pinned: false
+license: openrail
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/api/chat-messages/route.ts

@@ -0,0 +1,17 @@
+import { type NextRequest } from 'next/server'
+import { getInfo, client } from '@/app/api/utils/common'
+import { OpenAIStream } from '@/app/api/utils/stream'
+
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  const {
+    inputs,
+    query,
+    conversation_id: conversationId,
+    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)
+}

app/api/conversations/route.ts

@@ -0,0 +1,11 @@
+import { type NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { getInfo, setSession, client } 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)
+  })
+}

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

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

app/api/messages/route.ts

@@ -0,0 +1,13 @@
+import { type NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { getInfo, setSession, client } from '@/app/api/utils/common'
+
+export async function GET(request: NextRequest) {
+  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);
+  return NextResponse.json(data, {
+    headers: setSession(sessionId)
+  })
+}

app/api/parameters/route.ts

@@ -0,0 +1,11 @@
+import { type NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { getInfo, setSession, client } 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)
+  })
+}

app/api/utils/common.ts

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

app/api/utils/stream.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,31 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type IAppUnavailableProps = {
+  isUnknwonReason: boolean
+  errMessage?: string
+}
+
+const AppUnavailable: FC<IAppUnavailableProps> = ({
+  isUnknwonReason,
+  errMessage,
+}) => {
+  const { t } = useTranslation()
+  let message = errMessage
+  if (!errMessage) {
+    message = (isUnknwonReason ? 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>
+      <div className='text-sm'>{message}</div>
+    </div>
+  )
+}
+export default React.memo(AppUnavailable)

app/components/base/app-icon/index.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react'
+import classNames from 'classnames'
+import style from './style.module.css'
+
+export type AppIconProps = {
+  size?: 'tiny' | 'small' | 'medium' | 'large'
+  rounded?: boolean
+  icon?: string
+  background?: string
+  className?: string
+}
+
+const AppIcon: FC<AppIconProps> = ({
+  size = 'medium',
+  rounded = false,
+  background,
+  className,
+}) => {
+  return (
+    <span
+      className={classNames(
+        style.appIcon,
+        size !== 'medium' && style[size],
+        rounded && style.rounded,
+        className ?? '',
+      )}
+      style={{
+        background,
+      }}
+    >
+      🤖
+    </span>
+  )
+}
+
+export default AppIcon

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

@@ -0,0 +1,15 @@
+.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.tiny {
+  @apply w-6 h-6 text-base;
+}
+.appIcon.rounded {
+  @apply rounded-full;
+}

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

@@ -0,0 +1,73 @@
+import { forwardRef, useEffect, useRef } from 'react'
+import cn from 'classnames'
+
+type IProps = {
+  placeholder?: string
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  className?: string
+  minHeight?: number
+  maxHeight?: number
+  autoFocus?: boolean
+  controlFocus?: number
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
+const AutoHeightTextarea = forwardRef(
+  (
+    { value, onChange, placeholder, className, minHeight = 36, maxHeight = 96, autoFocus, controlFocus, onKeyDown, onKeyUp }: IProps,
+    outerRef: any,
+  ) => {
+    const ref = outerRef || useRef<HTMLTextAreaElement>(null)
+
+    const doFocus = () => {
+      if (ref.current) {
+        ref.current.setSelectionRange(value.length, value.length)
+        ref.current.focus()
+        return true
+      }
+      return false
+    }
+
+    const focus = () => {
+      if (!doFocus()) {
+        let hasFocus = false
+        const runId = setInterval(() => {
+          hasFocus = doFocus()
+          if (hasFocus)
+            clearInterval(runId)
+        }, 100)
+      }
+    }
+
+    useEffect(() => {
+      if (autoFocus)
+        focus()
+    }, [])
+    useEffect(() => {
+      if (controlFocus)
+        focus()
+    }, [controlFocus])
+
+    return (
+      <div className='relative'>
+        <div className={cn(className, 'invisible whitespace-pre-wrap break-all  overflow-y-auto')} style={{ minHeight, maxHeight }}>
+          {!value ? placeholder : value.replace(/\n$/, '\n ')}
+        </div>
+        <textarea
+          ref={ref}
+          autoFocus={autoFocus}
+          className={cn(className, 'absolute inset-0 resize-none overflow-hidden')}
+          placeholder={placeholder}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          value={value}
+        />
+      </div>
+    )
+  },
+)
+
+export default AutoHeightTextarea

app/components/base/button/index.tsx

@@ -0,0 +1,44 @@
+import type { FC, MouseEventHandler } from 'react'
+import React from 'react'
+import Spinner from '@/app/components/base/spinner'
+
+export type IButtonProps = {
+  type?: string
+  className?: string
+  disabled?: boolean
+  loading?: boolean
+  children: React.ReactNode
+  onClick?: MouseEventHandler<HTMLDivElement>
+}
+
+const Button: FC<IButtonProps> = ({
+  type,
+  disabled,
+  children,
+  className,
+  onClick,
+  loading = false,
+}) => {
+  let style = 'cursor-pointer'
+  switch (type) {
+    case 'primary':
+      style = (disabled || loading) ? 'bg-primary-600/75 cursor-not-allowed text-white' : 'bg-primary-600 hover:bg-primary-600/75 hover:shadow-md cursor-pointer text-white hover:shadow-sm'
+      break
+    default:
+      style = disabled ? 'border-solid border border-gray-200 bg-gray-200 cursor-not-allowed text-gray-800' : 'border-solid border border-gray-200 cursor-pointer text-gray-500 hover:bg-white hover:shadow-sm hover:border-gray-300'
+      break
+  }
+
+  return (
+    <div
+      className={`flex justify-center items-center content-center h-9 leading-5 rounded-lg px-4 py-2 text-base ${style} ${className && className}`}
+      onClick={disabled ? undefined : onClick}
+    >
+      {children}
+      {/* Spinner is hidden when loading is false */}
+      <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
+    </div>
+  )
+}
+
+export default React.memo(Button)

app/components/base/loading/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import './style.css'
+
+type ILoadingProps = {
+  type?: 'area' | 'app'
+}
+const Loading = (
+  { type = 'area' }: ILoadingProps = { type: 'area' },
+) => {
+  return (
+    <div className={`flex w-full justify-center items-center ${type === 'app' ? 'h-full' : ''}`}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className='spin-animation'>
+        <g clipPath="url(#clip0_324_2488)">
+          <path d="M15 0H10C9.44772 0 9 0.447715 9 1V6C9 6.55228 9.44772 7 10 7H15C15.5523 7 16 6.55228 16 6V1C16 0.447715 15.5523 0 15 0Z" fill="#1C64F2" />
+          <path opacity="0.5" d="M15 9H10C9.44772 9 9 9.44772 9 10V15C9 15.5523 9.44772 16 10 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9Z" fill="#1C64F2" />
+          <path opacity="0.1" d="M6 9H1C0.447715 9 0 9.44772 0 10V15C0 15.5523 0.447715 16 1 16H6C6.55228 16 7 15.5523 7 15V10C7 9.44772 6.55228 9 6 9Z" fill="#1C64F2" />
+          <path opacity="0.2" d="M6 0H1C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H6C6.55228 7 7 6.55228 7 6V1C7 0.447715 6.55228 0 6 0Z" fill="#1C64F2" />
+        </g>
+        <defs>
+          <clipPath id="clip0_324_2488">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+
+    </div>
+  )
+}
+
+export default Loading

app/components/base/loading/style.css

@@ -0,0 +1,41 @@
+.spin-animation path {
+    animation: custom 2s linear infinite;
+}
+
+@keyframes custom {
+    0% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.1;
+    }
+
+    50% {
+        opacity: 0.2;
+    }
+
+    75% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.spin-animation path:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.spin-animation path:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+.spin-animation path:nth-child(3) {
+    animation-delay: 1s;
+}
+
+.spin-animation path:nth-child(4) {
+    animation-delay: 1.5s;
+}

app/components/base/markdown.tsx

@@ -0,0 +1,45 @@
+import ReactMarkdown from 'react-markdown'
+import 'katex/dist/katex.min.css'
+import RemarkMath from 'remark-math'
+import RemarkBreaks from 'remark-breaks'
+import RehypeKatex from 'rehype-katex'
+import RemarkGfm from 'remark-gfm'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+
+export function Markdown(props: { content: string }) {
+  return (
+    <div className="markdown-body">
+      <ReactMarkdown
+        remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+        rehypePlugins={[
+          RehypeKatex,
+        ]}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '')
+            return !inline && match
+              ? (
+                <SyntaxHighlighter
+                  {...props}
+                  children={String(children).replace(/\n$/, '')}
+                  style={atelierHeathLight}
+                  language={match[1]}
+                  showLineNumbers
+                  PreTag="div"
+                />
+              )
+              : (
+                <code {...props} className={className}>
+                  {children}
+                </code>
+              )
+          },
+        }}
+        linkTarget={'_blank'}
+      >
+        {props.content}
+      </ReactMarkdown>
+    </div>
+  )
+}

app/components/base/select/index.tsx

@@ -0,0 +1,216 @@
+'use client'
+import type { FC } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
+import { Combobox, Listbox, Transition } from '@headlessui/react'
+import classNames from 'classnames'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
+
+const defaultItems = [
+  { value: 1, name: 'option1' },
+  { value: 2, name: 'option2' },
+  { value: 3, name: 'option3' },
+  { value: 4, name: 'option4' },
+  { value: 5, name: 'option5' },
+  { value: 6, name: 'option6' },
+  { value: 7, name: 'option7' },
+]
+
+export type Item = {
+  value: number | string
+  name: string
+}
+
+export type ISelectProps = {
+  className?: string
+  items?: Item[]
+  defaultValue?: number | string
+  disabled?: boolean
+  onSelect: (value: Item) => void
+  allowSearch?: boolean
+  bgClassName?: string
+}
+const Select: FC<ISelectProps> = ({
+  className,
+  items = defaultItems,
+  defaultValue = 1,
+  disabled = false,
+  onSelect,
+  allowSearch = true,
+  bgClassName = 'bg-gray-100',
+}) => {
+  const [query, setQuery] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  useEffect(() => {
+    let defaultSelect = null
+    const existed = items.find((item: Item) => item.value === defaultValue)
+    if (existed)
+      defaultSelect = existed
+
+    setSelectedItem(defaultSelect)
+  }, [defaultValue])
+
+  const filteredItems: Item[]
+    = query === ''
+      ? items
+      : items.filter((item) => {
+        return item.name.toLowerCase().includes(query.toLowerCase())
+      })
+
+  return (
+    <Combobox
+      as="div"
+      disabled={disabled}
+      value={selectedItem}
+      className={className}
+      onChange={(value: Item) => {
+        if (!disabled) {
+          setSelectedItem(value)
+          setOpen(false)
+          onSelect(value)
+        }
+      }}>
+      <div className={classNames('relative')}>
+        <div className='group text-gray-800'>
+          {allowSearch
+            ? <Combobox.Input
+              className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-not-allowed`}
+              onChange={(event) => {
+                if (!disabled)
+                  setQuery(event.target.value)
+              }}
+              displayValue={(item: Item) => item?.name}
+            />
+            : <Combobox.Button onClick={
+              () => {
+                if (!disabled)
+                  setOpen(!open)
+              }
+            } className={`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`}>
+              {selectedItem?.name}
+            </Combobox.Button>}
+          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none group-hover:bg-gray-200" onClick={
+            () => {
+              if (!disabled)
+                setOpen(!open)
+            }
+          }>
+            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
+          </Combobox.Button>
+        </div>
+
+        {filteredItems.length > 0 && (
+          <Combobox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
+            {filteredItems.map((item: Item) => (
+              <Combobox.Option
+                key={item.value}
+                value={item}
+                className={({ active }: { active: boolean }) =>
+                  classNames(
+                    'relative cursor-default select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700',
+                    active ? 'bg-gray-100' : '',
+                  )
+                }
+              >
+                {({ /* active, */ selected }) => (
+                  <>
+                    <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
+                    {selected && (
+                      <span
+                        className={classNames(
+                          'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                        )}
+                      >
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    )}
+                  </>
+                )}
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        )}
+      </div>
+    </Combobox >
+  )
+}
+
+const SimpleSelect: FC<ISelectProps> = ({
+  className,
+  items = defaultItems,
+  defaultValue = 1,
+  disabled = false,
+  onSelect,
+}) => {
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  useEffect(() => {
+    let defaultSelect = null
+    const existed = items.find((item: Item) => item.value === defaultValue)
+    if (existed)
+      defaultSelect = existed
+
+    setSelectedItem(defaultSelect)
+  }, [defaultValue])
+
+  return (
+    <Listbox
+      value={selectedItem}
+      onChange={(value: Item) => {
+        if (!disabled) {
+          setSelectedItem(value)
+          onSelect(value)
+        }
+      }}
+    >
+      <div className="relative h-9">
+        <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer ${className}`}>
+          <span className="block truncate text-left">{selectedItem?.name}</span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
+            {items.map((item: Item) => (
+              <Listbox.Option
+                key={item.value}
+                className={({ active }) =>
+                  `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
+                  }`
+                }
+                value={item}
+                disabled={disabled}
+              >
+                {({ /* active, */ selected }) => (
+                  <>
+                    <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
+                    {selected && (
+                      <span
+                        className={classNames(
+                          'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                        )}
+                      >
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    )}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  )
+}
+export { SimpleSelect }
+export default React.memo(Select)

app/components/base/spinner/index.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  loading?: boolean
+  className?: string
+  children?: React.ReactNode | string
+}
+
+const Spinner: FC<Props> = ({ loading = false, children, className }) => {
+  return (
+    <div
+      className={`inline-block text-gray-200 h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] ${loading ? 'motion-reduce:animate-[spin_1.5s_linear_infinite]' : 'hidden'} ${className ?? ''}`}
+      role="status"
+    >
+      <span
+        className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+      >Loading...</span>
+      {children}
+    </div>
+  )
+}
+
+export default Spinner

app/components/base/toast/index.tsx

@@ -0,0 +1,131 @@
+'use client'
+import classNames from 'classnames'
+import type { ReactNode } from 'react'
+import React, { useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/20/solid'
+import { createContext } from 'use-context-selector'
+
+export type IToastProps = {
+  type?: 'success' | 'error' | 'warning' | 'info'
+  duration?: number
+  message: string
+  children?: ReactNode
+  onClose?: () => void
+}
+type IToastContext = {
+  notify: (props: IToastProps) => void
+}
+const defaultDuring = 3000
+
+export const ToastContext = createContext<IToastContext>({} as IToastContext)
+const Toast = ({
+  type = 'info',
+  duration,
+  message,
+  children,
+}: IToastProps) => {
+  // sometimes message is react node array. Not handle it.
+  if (typeof message !== 'string')
+    return null
+
+  return <div className={classNames(
+    'fixed rounded-md p-4 my-4 mx-8 z-50',
+    'top-0',
+    'right-0',
+    type === 'success' ? 'bg-green-50' : '',
+    type === 'error' ? 'bg-red-50' : '',
+    type === 'warning' ? 'bg-yellow-50' : '',
+    type === 'info' ? 'bg-blue-50' : '',
+  )}>
+    <div className="flex">
+      <div className="flex-shrink-0">
+        {type === 'success' && <CheckCircleIcon className="w-5 h-5 text-green-400" aria-hidden="true" />}
+        {type === 'error' && <XCircleIcon className="w-5 h-5 text-red-400" aria-hidden="true" />}
+        {type === 'warning' && <ExclamationTriangleIcon className="w-5 h-5 text-yellow-400" aria-hidden="true" />}
+        {type === 'info' && <InformationCircleIcon className="w-5 h-5 text-blue-400" aria-hidden="true" />}
+      </div>
+      <div className="ml-3">
+        <h3 className={
+          classNames(
+            'text-sm font-medium',
+            type === 'success' ? 'text-green-800' : '',
+            type === 'error' ? 'text-red-800' : '',
+            type === 'warning' ? 'text-yellow-800' : '',
+            type === 'info' ? 'text-blue-800' : '',
+          )
+        }>{message}</h3>
+        {children && <div className={
+          classNames(
+            'mt-2 text-sm',
+            type === 'success' ? 'text-green-700' : '',
+            type === 'error' ? 'text-red-700' : '',
+            type === 'warning' ? 'text-yellow-700' : '',
+            type === 'info' ? 'text-blue-700' : '',
+          )
+        }>
+          {children}
+        </div>
+        }
+      </div>
+    </div>
+  </div>
+}
+
+export const ToastProvider = ({
+  children,
+}: {
+  children: ReactNode
+}) => {
+  const placeholder: IToastProps = {
+    type: 'info',
+    message: 'Toast message',
+    duration: 3000,
+  }
+  const [params, setParams] = React.useState<IToastProps>(placeholder)
+
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    if (mounted) {
+      setTimeout(() => {
+        setMounted(false)
+      }, params.duration || defaultDuring)
+    }
+  }, [mounted])
+
+  return <ToastContext.Provider value={{
+    notify: (props) => {
+      setMounted(true)
+      setParams(props)
+    },
+  }}>
+    {mounted && <Toast {...params} />}
+    {children}
+  </ToastContext.Provider>
+}
+
+Toast.notify = ({
+  type,
+  message,
+  duration,
+}: Pick<IToastProps, 'type' | 'message' | 'duration'>) => {
+  if (typeof window === 'object') {
+    const holder = document.createElement('div')
+    const root = createRoot(holder)
+
+    root.render(<Toast type={type} message={message} duration={duration} />)
+    document.body.appendChild(holder)
+    setTimeout(() => {
+      if (holder)
+        holder.remove()
+    }, duration || defaultDuring)
+  }
+}
+
+export default Toast

app/components/base/toast/style.module.css

@@ -0,0 +1,43 @@
+.toast {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  width: 1.84rem;
+  height: 1.80rem;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background: #000000;
+  box-shadow: 0 -.04rem .1rem 1px rgba(255, 255, 255, 0.1);
+  border-radius: .1rem .1rem .1rem .1rem;
+}
+
+.main {
+  width: 2rem;
+}
+
+.icon {
+  margin-bottom: .2rem;
+  height: .4rem;
+  background: center center no-repeat;
+  background-size: contain;
+}
+
+/* .success {
+  background-image: url('./icons/success.svg');
+}
+
+.warning {
+  background-image: url('./icons/warning.svg');
+}
+
+.error {
+  background-image: url('./icons/error.svg');
+} */
+
+.text {
+  text-align: center;
+  font-size: .2rem;
+  color: rgba(255, 255, 255, 0.86);
+}

app/components/base/tooltip/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+import classNames from 'classnames'
+import type { FC } from 'react'
+import React from 'react'
+import { Tooltip as ReactTooltip } from 'react-tooltip' // fixed version to 5.8.3 https://github.com/ReactTooltip/react-tooltip/issues/972
+import 'react-tooltip/dist/react-tooltip.css'
+
+type TooltipProps = {
+  selector: string
+  content?: string
+  htmlContent?: React.ReactNode
+  className?: string // This should use !impornant to override the default styles eg: '!bg-white'
+  position?: 'top' | 'right' | 'bottom' | 'left'
+  clickable?: boolean
+  children: React.ReactNode
+}
+
+const Tooltip: FC<TooltipProps> = ({
+  selector,
+  content,
+  position = 'top',
+  children,
+  htmlContent,
+  className,
+  clickable,
+}) => {
+  return (
+    <div className='tooltip-container'>
+      {React.cloneElement(children as React.ReactElement, {
+        'data-tooltip-id': selector,
+      })
+      }
+      <ReactTooltip
+        id={selector}
+        content={content}
+        className={classNames('!bg-white !text-xs !font-normal !text-gray-700 !shadow-lg !opacity-100', className)}
+        place={position}
+        clickable={clickable}
+      >
+        {htmlContent && htmlContent}
+      </ReactTooltip>
+    </div>
+  )
+}
+
+export default Tooltip

app/components/chat/index.tsx

@@ -0,0 +1,353 @@
+'use client'
+import type { FC, } from 'react'
+import React, { useEffect, useRef } from 'react'
+import cn from 'classnames'
+import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import { randomString } from '@/utils/string'
+import type { Feedbacktype, MessageRating } 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'
+import LoadingAnim from './loading-anim'
+
+export type FeedbackFunc = (messageId: string, feedback: Feedbacktype) => Promise<any>
+
+export type IChatProps = {
+  chatList: IChatItem[]
+  /**
+   * Whether to display the editing area and rating status
+   */
+  feedbackDisabled?: boolean
+  /**
+   * Whether to display the input area
+   */
+  isHideSendInput?: boolean
+  onFeedback?: FeedbackFunc
+  checkCanSend?: () => boolean
+  onSend?: (message: string) => void
+  useCurrentUserAvatar?: boolean
+  isResponsing?: 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} w-10 h-10 shrink-0`}>
+          {isResponsing &&
+            <div className={s.typeingIcon}>
+              <LoadingAnim type='avatar' />
+            </div>
+          }
+        </div>
+        <div className={`${s.answerWrap}`}>
+          <div className={`${s.answer} relative text-sm text-gray-900`}>
+            <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
+              {item.isOpeningStatement && (
+                <div className='flex items-center mb-1 gap-1'>
+                  <OpeningStatementIcon />
+                  <div className='text-xs text-gray-500'>{t('app.chat.openingStatementTitle')}</div>
+                </div>
+              )}
+              {(isResponsing && !content) ? (
+                <div className='flex items-center justify-center w-6 h-5'>
+                  <LoadingAnim type='text' />
+                </div>
+              ) : (
+                <Markdown content={content} />
+              )}
+            </div>
+            <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
+              {!feedbackDisabled && !item.feedbackDisabled && renderItemOperation()}
+              {/* User feedback must be displayed */}
+              {!feedbackDisabled && renderFeedbackRating(feedback?.rating)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'useCurrentUserAvatar'>
+
+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>
+  )
+}
+
+const Chat: FC<IChatProps> = ({
+  chatList,
+  feedbackDisabled = false,
+  isHideSendInput = false,
+  onFeedback,
+  checkCanSend,
+  onSend = () => { },
+  useCurrentUserAvatar,
+  isResponsing,
+  controlClearQuery,
+  controlFocus,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = Toast
+  const isUseInputMethod = useRef(false)
+
+  const [query, setQuery] = React.useState('')
+  const handleContentChange = (e: any) => {
+    const value = e.target.value
+    setQuery(value)
+  }
+
+  const logError = (message: string) => {
+    notify({ type: 'error', message, duration: 3000 })
+  }
+
+  const valid = () => {
+    if (!query || query.trim() === '') {
+      logError('Message cannot be empty')
+      return false
+    }
+    return true
+  }
+
+  useEffect(() => {
+    if (controlClearQuery)
+      setQuery('')
+  }, [controlClearQuery])
+
+  const handleSend = () => {
+    if (!valid() || (checkCanSend && !checkCanSend()))
+      return
+    onSend(query)
+    if (!isResponsing)
+      setQuery('')
+  }
+
+  const handleKeyUp = (e: any) => {
+    if (e.code === 'Enter') {
+      e.preventDefault()
+      // prevent send message when using input method enter
+      if (!e.shiftKey && !isUseInputMethod.current) {
+        handleSend()
+      }
+    }
+  }
+
+  const haneleKeyDown = (e: any) => {
+    isUseInputMethod.current = e.nativeEvent.isComposing
+    if (e.code === 'Enter' && !e.shiftKey) {
+      setQuery(query.replace(/\n$/, ''))
+      e.preventDefault()
+    }
+  }
+
+  return (
+    <div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')}>
+      {/* Chat List */}
+      <div className="h-full space-y-[30px]">
+        {chatList.map((item) => {
+          if (item.isAnswer) {
+            const isLast = item.id === chatList[chatList.length - 1].id
+            return <Answer
+              key={item.id}
+              item={item}
+              feedbackDisabled={feedbackDisabled}
+              onFeedback={onFeedback}
+              isResponsing={isResponsing && isLast}
+            />
+          }
+          return <Question key={item.id} id={item.id} content={item.content} useCurrentUserAvatar={useCurrentUserAvatar} />
+        })}
+      </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
+                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`}
+              />
+              <div className="absolute top-0 right-2 flex items-center h-[48px]">
+                <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'
+                  htmlContent={
+                    <div>
+                      <div>{t('common.operation.send')} Enter</div>
+                      <div>{t('common.operation.lineBreak')} Shift Enter</div>
+                    </div>
+                  }
+                >
+                  <div className={`${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`} onClick={handleSend}></div>
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(Chat)

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

@@ -0,0 +1,16 @@
+'use client'
+import React, { FC } from 'react'
+import s from './style.module.css'
+
+export interface 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;
+}

app/components/chat/style.module.css

@@ -0,0 +1,91 @@
+.answerIcon {
+  position: relative;
+  background: url(./icons/robot.svg);
+}
+
+.typeingIcon {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border-radius: 16px;
+}
+
+
+.questionIcon {
+  background: url(./icons/default-avatar.jpg);
+  background-size: contain;
+  border-radius: 50%;
+}
+
+.answer::before,
+.question::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 8px;
+  height: 12px;
+}
+
+.answer::before {
+  left: 0;
+  background: url(./icons/answer.svg) no-repeat;
+}
+
+.answerWrap .itemOperation {
+  display: none;
+}
+
+.answerWrap:hover .itemOperation {
+  display: flex;
+}
+
+.question::before {
+  right: 0;
+  background: url(./icons/question.svg) no-repeat;
+}
+
+.textArea {
+  padding-top: 13px;
+  padding-bottom: 13px;
+  padding-right: 90px;
+  border-radius: 12px;
+  line-height: 20px;
+  background-color: #fff;
+}
+
+.textArea:hover {
+  background-color: #fff;
+}
+
+/* .textArea:focus {
+  box-shadow: 0px 3px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
+} */
+
+.count {
+  /* display: none; */
+  padding: 0 2px;
+}
+
+.sendBtn {
+  background: url(./icons/send.svg) center center no-repeat;
+}
+
+.sendBtn:hover {
+  background-image: url(./icons/send-active.svg);
+  background-color: #EBF5FF;
+}
+
+.textArea:focus+div .count {
+  display: block;
+}
+
+.textArea:focus+div .sendBtn {
+  background-image: url(./icons/send-active.svg);
+}

app/components/config-scence/index.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import React from 'react'
+import type { IWelcomeProps } from '../welcome'
+import Welcome from '../welcome'
+
+const ConfigSence: FC<IWelcomeProps> = (props) => {
+  return (
+    <div className='mb-5 antialiased font-sans overflow-hidden shrink-0'>
+      <Welcome {...props} />
+    </div>
+  )
+}
+export default React.memo(ConfigSence)

app/components/header.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react'
+import React from 'react'
+import {
+  Bars3Icon,
+  PencilSquareIcon,
+} from '@heroicons/react/24/solid'
+import AppIcon from '@/app/components/base/app-icon'
+export type IHeaderProps = {
+  title: string
+  isMobile?: boolean
+  onShowSideBar?: () => void
+  onCreateNewChat?: () => void
+}
+const Header: FC<IHeaderProps> = ({
+  title,
+  isMobile,
+  onShowSideBar,
+  onCreateNewChat,
+}) => {
+  return (
+    <div className="shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100">
+      {isMobile
+        ? (
+          <div
+            className='flex items-center justify-center h-8 w-8 cursor-pointer'
+            onClick={() => onShowSideBar?.()}
+          >
+            <Bars3Icon className="h-4 w-4 text-gray-500" />
+          </div>
+        )
+        : <div></div>}
+      <div className='flex items-center space-x-2'>
+        <AppIcon size="small" />
+        <div className=" text-sm text-gray-800 font-bold">{title}</div>
+      </div>
+      {isMobile
+        ? (
+          <div className='flex items-center justify-center h-8 w-8 cursor-pointer'
+            onClick={() => onCreateNewChat?.()}
+          >
+            <PencilSquareIcon className="h-4 w-4 text-gray-500" />
+          </div>)
+        : <div></div>}
+    </div>
+  )
+}
+
+export default React.memo(Header)

app/components/index.tsx

@@ -0,0 +1,433 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { useBoolean, useGetState } from 'ahooks'
+import useConversation from '@/hooks/use-conversation'
+import Toast from '@/app/components/base/toast'
+import Sidebar from '@/app/components/sidebar'
+import ConfigSence from '@/app/components/config-scence'
+import Header from '@/app/components/header'
+import { fetchAppParams, fetchChatList, fetchConversations, sendChatMessage, updateFeedback } from '@/service'
+import type { ConversationItem, Feedbacktype, IChatItem, PromptConfig, AppInfo } from '@/types/app'
+import Chat from '@/app/components/chat'
+import { setLocaleOnClient } from '@/i18n/client'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import Loading from '@/app/components/base/loading'
+import { replaceVarWithValues } from '@/utils/prompt'
+import AppUnavailable from '@/app/components/app-unavailable'
+import { APP_ID, API_KEY, APP_INFO, isShowPrompt, promptTemplate } from '@/config'
+import { userInputsFormToPromptVariables } from '@/utils/prompt'
+
+const Main: FC = () => {
+  const { t } = useTranslation()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const hasSetAppConfig = APP_ID && API_KEY
+
+  /*
+  * app info
+  */
+  const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
+  const [isUnknwonReason, setIsUnknwonReason] = useState<boolean>(false)
+  const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
+  const [inited, setInited] = useState<boolean>(false)
+  // in mobile, show sidebar by click button
+  const [isShowSidebar, { setTrue: showSidebar, setFalse: hideSidebar }] = useBoolean(false)
+
+  useEffect(() => {
+    if (APP_INFO?.title) {
+      document.title = `${APP_INFO.title} - Powered by Dify`
+    }
+  }, [APP_INFO?.title])
+
+  /*
+  * conversation info
+  */
+  const {
+    conversationList,
+    setConversationList,
+    currConversationId,
+    setCurrConversationId,
+    getConversationIdFromStorage,
+    isNewConversation,
+    currConversationInfo,
+    currInputs,
+    newConversationInputs,
+    resetNewConversationInputs,
+    setCurrInputs,
+    setNewConversationInfo,
+    setExistConversationInfo,
+  } = useConversation()
+
+  const [conversationIdChangeBecauseOfNew, setConversationIdChangeBecauseOfNew, getConversationIdChangeBecauseOfNew] = useGetState(false)
+  const [isChatStarted, { setTrue: setChatStarted, setFalse: setChatNotStarted }] = useBoolean(false)
+  const handleStartChat = (inputs: Record<string, any>) => {
+    setCurrInputs(inputs)
+    setChatStarted()
+    // parse variables in introduction
+    setChatList(generateNewChatListWithOpenstatement('', inputs))
+  }
+  const hasSetInputs = (() => {
+    if (!isNewConversation)
+      return true
+
+    return isChatStarted
+  })()
+
+  const conversationName = currConversationInfo?.name || t('app.chat.newChatDefaultName') as string
+  const conversationIntroduction = currConversationInfo?.introduction || ''
+
+  const handleConversationSwitch = () => {
+    if (!inited)
+      return
+
+    // update inputs of current conversation
+    let notSyncToStateIntroduction = ''
+    let notSyncToStateInputs: Record<string, any> | undefined | null = {}
+    if (!isNewConversation) {
+      const item = conversationList.find(item => item.id === currConversationId)
+      notSyncToStateInputs = item?.inputs || {}
+      setCurrInputs(notSyncToStateInputs as any)
+      notSyncToStateIntroduction = item?.introduction || ''
+      setExistConversationInfo({
+        name: item?.name || '',
+        introduction: notSyncToStateIntroduction,
+      })
+    }
+    else {
+      notSyncToStateInputs = newConversationInputs
+      setCurrInputs(notSyncToStateInputs)
+    }
+
+    // update chat list of current conversation
+    if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponsing) {
+      fetchChatList(currConversationId).then((res: any) => {
+        const { data } = res
+        const newChatList: IChatItem[] = generateNewChatListWithOpenstatement(notSyncToStateIntroduction, notSyncToStateInputs)
+
+        data.forEach((item: any) => {
+          newChatList.push({
+            id: `question-${item.id}`,
+            content: item.query,
+            isAnswer: false,
+          })
+          newChatList.push({
+            id: item.id,
+            content: item.answer,
+            feedback: item.feedback,
+            isAnswer: true,
+          })
+        })
+        setChatList(newChatList)
+      })
+    }
+
+    if (isNewConversation && isChatStarted)
+      setChatList(generateNewChatListWithOpenstatement())
+
+    setControlFocus(Date.now())
+  }
+  useEffect(handleConversationSwitch, [currConversationId, inited])
+
+  const handleConversationIdChange = (id: string) => {
+    if (id === '-1') {
+      createNewChat()
+      setConversationIdChangeBecauseOfNew(true)
+    }
+    else {
+      setConversationIdChangeBecauseOfNew(false)
+    }
+    // trigger handleConversationSwitch
+    setCurrConversationId(id, APP_ID)
+    hideSidebar()
+  }
+
+  /*
+  * chat info. chat is under conversation.
+  */
+  const [chatList, setChatList, getChatList] = useGetState<IChatItem[]>([])
+  const chatListDomRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    // scroll to bottom
+    if (chatListDomRef.current)
+      chatListDomRef.current.scrollTop = chatListDomRef.current.scrollHeight
+  }, [chatList, currConversationId])
+  // user can not edit inputs if user had send message
+  const canEditInpus = !chatList.some(item => item.isAnswer === false) && isNewConversation
+  const createNewChat = () => {
+    // if new chat is already exist, do not create new chat
+    if (conversationList.some(item => item.id === '-1'))
+      return
+
+    setConversationList(produce(conversationList, (draft) => {
+      draft.unshift({
+        id: '-1',
+        name: t('app.chat.newChatDefaultName'),
+        inputs: newConversationInputs,
+        introduction: conversationIntroduction,
+      })
+    }))
+  }
+
+  // sometime introduction is not applied to state
+  const generateNewChatListWithOpenstatement = (introduction?: string, inputs?: Record<string, any> | null) => {
+    let caculatedIntroduction = introduction || conversationIntroduction || ''
+    const caculatedPromptVariables = inputs || currInputs || null
+    if (caculatedIntroduction && caculatedPromptVariables)
+      caculatedIntroduction = replaceVarWithValues(caculatedIntroduction, promptConfig?.prompt_variables || [], caculatedPromptVariables)
+
+    const openstatement = {
+      id: `${Date.now()}`,
+      content: caculatedIntroduction,
+      isAnswer: true,
+      feedbackDisabled: true,
+      isOpeningStatement: isShowPrompt,
+    }
+    if (caculatedIntroduction)
+      return [openstatement]
+
+    return []
+  }
+
+  // init
+  useEffect(() => {
+    if (!hasSetAppConfig) {
+      setAppUnavailable(true)
+      return
+    }
+    (async () => {
+      try {
+        const [conversationData, appParams] = await Promise.all([fetchConversations(), fetchAppParams()])
+
+        // handle current conversation id
+        const { data: conversations } = conversationData as { data: ConversationItem[] }
+        const _conversationId = getConversationIdFromStorage(APP_ID)
+        const isNotNewConversation = conversations.some(item => item.id === _conversationId)
+
+        // fetch new conversation info
+        const { user_input_form, opening_statement: introduction }: any = appParams
+        setLocaleOnClient(APP_INFO.default_language, true)
+        setNewConversationInfo({
+          name: t('app.chat.newChatDefaultName'),
+          introduction,
+        })
+        const prompt_variables = userInputsFormToPromptVariables(user_input_form)
+        setPromptConfig({
+          prompt_template: promptTemplate,
+          prompt_variables,
+        } as PromptConfig)
+
+        setConversationList(conversations as ConversationItem[])
+
+        if (isNotNewConversation)
+          setCurrConversationId(_conversationId, APP_ID, false)
+
+        setInited(true)
+      }
+      catch (e: any) {
+        if (e.status === 404) {
+          setAppUnavailable(true)
+        }
+        else {
+          setIsUnknwonReason(true)
+          setAppUnavailable(true)
+        }
+      }
+    })()
+  }, [])
+
+  const [isResponsing, { setTrue: setResponsingTrue, setFalse: setResponsingFalse }] = useBoolean(false)
+  const { notify } = Toast
+  const logError = (message: string) => {
+    notify({ type: 'error', message })
+  }
+
+  const checkCanSend = () => {
+    if (!currInputs || !promptConfig?.prompt_variables)
+      return true
+
+    const inputLens = Object.values(currInputs).length
+    const promptVariablesLens = promptConfig.prompt_variables.length
+
+    const emytyInput = inputLens < promptVariablesLens || Object.values(currInputs).find(v => !v)
+    if (emytyInput) {
+      logError(t('app.errorMessage.valueOfVarRequired'))
+      return false
+    }
+    return true
+  }
+
+  const [controlFocus, setControlFocus] = useState(0)
+  const handleSend = async (message: string) => {
+    if (isResponsing) {
+      notify({ type: 'info', message: t('app.errorMessage.waitForResponse') })
+      return
+    }
+    const data = {
+      inputs: currInputs,
+      query: message,
+      conversation_id: isNewConversation ? null : currConversationId,
+    }
+
+    // qustion
+    const questionId = `question-${Date.now()}`
+    const questionItem = {
+      id: questionId,
+      content: message,
+      isAnswer: false,
+    }
+
+    const placeholderAnswerId = `answer-placeholder-${Date.now()}`
+    const placeholderAnswerItem = {
+      id: placeholderAnswerId,
+      content: '',
+      isAnswer: true,
+    }
+
+    const newList = [...getChatList(), questionItem, placeholderAnswerItem]
+    setChatList(newList)
+
+    // answer
+    const responseItem = {
+      id: `${Date.now()}`,
+      content: '',
+      isAnswer: true,
+    }
+
+    let tempNewConversationId = ''
+    setResponsingTrue()
+    sendChatMessage(data, {
+      onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId }: any) => {
+        responseItem.content = responseItem.content + message
+        responseItem.id = messageId
+        if (isFirstMessage && newConversationId)
+          tempNewConversationId = newConversationId
+
+        // closesure new list is outdated.
+        const newListWithAnswer = produce(
+          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+          (draft) => {
+            if (!draft.find(item => item.id === questionId))
+              draft.push({ ...questionItem })
+
+            draft.push({ ...responseItem })
+          })
+        setChatList(newListWithAnswer)
+      },
+      async onCompleted() {
+        setResponsingFalse()
+        if (!tempNewConversationId) {
+          return
+        }
+        if (getConversationIdChangeBecauseOfNew()) {
+          const { data: conversations }: any = await fetchConversations()
+          setConversationList(conversations as ConversationItem[])
+        }
+        setConversationIdChangeBecauseOfNew(false)
+        resetNewConversationInputs()
+        setChatNotStarted()
+        setCurrConversationId(tempNewConversationId, APP_ID, true)
+      },
+      onError() {
+        setResponsingFalse()
+        // role back placeholder answer
+        setChatList(produce(getChatList(), (draft) => {
+          draft.splice(draft.findIndex(item => item.id === placeholderAnswerId), 1)
+        }))
+      },
+    })
+  }
+
+  const handleFeedback = async (messageId: string, feedback: Feedbacktype) => {
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } })
+    const newChatList = chatList.map((item) => {
+      if (item.id === messageId) {
+        return {
+          ...item,
+          feedback,
+        }
+      }
+      return item
+    })
+    setChatList(newChatList)
+    notify({ type: 'success', message: t('common.api.success') })
+  }
+
+  const renderSidebar = () => {
+    if (!APP_ID || !APP_INFO || !promptConfig)
+      return null
+    return (
+      <Sidebar
+        list={conversationList}
+        onCurrentIdChange={handleConversationIdChange}
+        currentId={currConversationId}
+        copyRight={APP_INFO.copyright || APP_INFO.title}
+      />
+    )
+  }
+
+  if (appUnavailable)
+    return <AppUnavailable isUnknwonReason={isUnknwonReason} errMessage={!hasSetAppConfig ? 'Please set APP_ID and API_KEY in config/index.tsx' : ''} />
+
+  if (!APP_ID || !APP_INFO || !promptConfig)
+    return <Loading type='app' />
+
+  return (
+    <div className='bg-gray-100'>
+      <Header
+        title={APP_INFO.title}
+        isMobile={isMobile}
+        onShowSideBar={showSidebar}
+        onCreateNewChat={() => handleConversationIdChange('-1')}
+      />
+      <div className="flex rounded-t-2xl bg-white overflow-hidden">
+        {/* sidebar */}
+        {!isMobile && renderSidebar()}
+        {isMobile && isShowSidebar && (
+          <div className='fixed inset-0 z-50'
+            style={{ backgroundColor: 'rgba(35, 56, 118, 0.2)' }}
+            onClick={hideSidebar}
+          >
+            <div className='inline-block' onClick={e => e.stopPropagation()}>
+              {renderSidebar()}
+            </div>
+          </div>
+        )}
+        {/* main */}
+        <div className='flex-grow flex flex-col h-[calc(100vh_-_3rem)] overflow-y-auto'>
+          <ConfigSence
+            conversationName={conversationName}
+            hasSetInputs={hasSetInputs}
+            isPublicVersion={isShowPrompt}
+            siteInfo={APP_INFO}
+            promptConfig={promptConfig}
+            onStartChat={handleStartChat}
+            canEidtInpus={canEditInpus}
+            savedInputs={currInputs as Record<string, any>}
+            onInputsChange={setCurrInputs}
+          ></ConfigSence>
+
+          {
+            hasSetInputs && (
+              <div className='relative grow h-[200px] pc:w-[794px] max-w-full mobile:w-full pb-[66px] mx-auto mb-3.5 overflow-hidden'>
+                <div className='h-full overflow-y-auto' ref={chatListDomRef}>
+                  <Chat
+                    chatList={chatList}
+                    onSend={handleSend}
+                    onFeedback={handleFeedback}
+                    isResponsing={isResponsing}
+                    checkCanSend={checkCanSend}
+                    controlFocus={controlFocus}
+                  />
+                </div>
+              </div>)
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Main)

app/components/sidebar/card.module.css

@@ -0,0 +1,3 @@
+.card:hover {
+  background: linear-gradient(0deg, rgba(235, 245, 255, 0.4), rgba(235, 245, 255, 0.4)), #FFFFFF;
+}

app/components/sidebar/card.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import s from './card.module.css'
+
+type PropType = {
+  children: React.ReactNode
+  text?: string
+}
+function Card({ children, text }: PropType) {
+  const { t } = useTranslation()
+  return (
+    <div className={`${s.card} box-border w-full flex flex-col items-start px-4 py-3 rounded-lg border-solid border border-gray-200  cursor-pointer hover:border-primary-300`}>
+      <div className='text-gray-400 font-medium text-xs mb-2'>{text ?? t('app.chat.powerBy')}</div>
+      {children}
+    </div>
+  )
+}
+
+export default Card

app/components/sidebar/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  ChatBubbleOvalLeftEllipsisIcon,
+  PencilSquareIcon,
+} from '@heroicons/react/24/outline'
+import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon } from '@heroicons/react/24/solid'
+import Button from '@/app/components/base/button'
+// import Card from './card'
+import type { ConversationItem } from '@/types/app'
+
+function classNames(...classes: any[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const MAX_CONVERSATION_LENTH = 20
+
+export type ISidebarProps = {
+  copyRight: string
+  currentId: string
+  onCurrentIdChange: (id: string) => void
+  list: ConversationItem[]
+}
+
+const Sidebar: FC<ISidebarProps> = ({
+  copyRight,
+  currentId,
+  onCurrentIdChange,
+  list,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div
+      className="shrink-0 flex flex-col overflow-y-auto bg-white pc:w-[244px] tablet:w-[192px] mobile:w-[240px]  border-r border-gray-200 tablet:h-[calc(100vh_-_3rem)] mobile:h-screen"
+    >
+      {list.length < MAX_CONVERSATION_LENTH && (
+        <div className="flex flex-shrink-0 p-4 !pb-0">
+          <Button
+            onClick={() => { onCurrentIdChange('-1') }}
+            className="group block w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
+            <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('app.chat.newChat')}
+          </Button>
+        </div>
+      )}
+
+      <nav className="mt-4 flex-1 space-y-1 bg-white p-4 !pt-0">
+        {list.map((item) => {
+          const isCurrent = item.id === currentId
+          const ItemIcon
+            = isCurrent ? ChatBubbleOvalLeftEllipsisSolidIcon : ChatBubbleOvalLeftEllipsisIcon
+          return (
+            <div
+              onClick={() => onCurrentIdChange(item.id)}
+              key={item.id}
+              className={classNames(
+                isCurrent
+                  ? 'bg-primary-50 text-primary-600'
+                  : 'text-gray-700 hover:bg-gray-100 hover:text-gray-700',
+                'group flex items-center rounded-md px-2 py-2 text-sm font-medium cursor-pointer',
+              )}
+            >
+              <ItemIcon
+                className={classNames(
+                  isCurrent
+                    ? 'text-primary-600'
+                    : 'text-gray-400 group-hover:text-gray-500',
+                  'mr-3 h-5 w-5 flex-shrink-0',
+                )}
+                aria-hidden="true"
+              />
+              {item.name}
+            </div>
+          )
+        })}
+      </nav>
+      {/* <a className="flex flex-shrink-0 p-4" href="https://langgenius.ai/" target="_blank">
+        <Card><div className="flex flex-row items-center"><ChatBubbleOvalLeftEllipsisSolidIcon className="text-primary-600 h-6 w-6 mr-2" /><span>LangGenius</span></div></Card>
+      </a> */}
+      <div className="flex flex-shrink-0 pr-4 pb-4 pl-4">
+        <div className="text-gray-400 font-normal text-xs">© {copyRight} {(new Date()).getFullYear()}</div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Sidebar)

app/components/value-panel/index.tsx

@@ -0,0 +1,79 @@
+'use client'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import { StarIcon } from '@/app/components//welcome/massive-component'
+import Button from '@/app/components/base/button'
+
+export type ITemplateVarPanelProps = {
+  className?: string
+  header: ReactNode
+  children?: ReactNode | null
+  isFold: boolean
+}
+
+const TemplateVarPanel: FC<ITemplateVarPanelProps> = ({
+  className,
+  header,
+  children,
+  isFold,
+}) => {
+  return (
+    <div className={cn(isFold ? 'border border-indigo-100' : s.boxShodow, className, 'rounded-xl ')}>
+      {/* header */}
+      <div
+        className={cn(isFold && 'rounded-b-xl', 'rounded-t-xl px-6 py-4 bg-indigo-25 text-xs')}
+      >
+        {header}
+      </div>
+      {/* body */}
+      {!isFold && children && (
+        <div className='rounded-b-xl p-6'>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const PanelTitle: FC<{ title: string; className?: string }> = ({
+  title,
+  className,
+}) => {
+  return (
+    <div className={cn(className, 'flex items-center space-x-1 text-indigo-600')}>
+      <StarIcon />
+      <span className='text-xs'>{title}</span>
+    </div>
+  )
+}
+
+export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCancel: () => void }> = ({
+  className,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
+      <Button
+        className='text-sm'
+        type='primary'
+        onClick={onConfirm}
+      >
+        {t('common.operation.save')}
+      </Button>
+      <Button
+        className='text-sm'
+        onClick={onCancel}
+      >
+        {t('common.operation.cancel')}
+      </Button>
+    </div >
+  )
+}
+
+export default React.memo(TemplateVarPanel)

app/components/value-panel/style.module.css

@@ -0,0 +1,3 @@
+.boxShodow {
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}