feat: init

.editorconfig

+# 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

+{
+  "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"
+  }
+}
\ No newline at end of file

.gitignore

+# 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
\ No newline at end of file

.vscode/launch.json

+{
+  "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"
+      }
+    }
+  ]
+}
\ No newline at end of file

.vscode/settings.json

+{
+  "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"
+  }
+}
\ No newline at end of file

README.md

+# 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).
+
+## Set App Info
+Set app info in `config/index.ts`. Includes:
+- APP_ID
+- API_KEY
+- APP_INFO
+
+## 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.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.

app/api/chat-messages/route.ts

+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)
+}
\ No newline at end of file

app/api/conversations/route.ts

+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)
+  })
+}
\ No newline at end of file

app/api/messages/route.ts

+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)
+  })
+}
\ No newline at end of file

app/api/parameters/route.ts

+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)
+  })
+}
\ No newline at end of file

app/api/sdk.js

+import axios from 'axios'
+
+export class LangGeniusClient {
+  constructor(apiKey, baseUrl = 'https://api.langgenius.ai/v1') {
+    this.apiKey = apiKey
+    this.baseUrl = baseUrl
+  }
+
+  async sendRequest(method, endpoint, data = null, params = null, stream = false) {
+    const headers = {
+      'Authorization': `Bearer ${this.apiKey}`,
+      'Content-Type': 'application/json',
+    }
+
+    const url = `${this.baseUrl}${endpoint}`
+    let response
+    if (!stream) {
+      response = await axios({
+        method,
+        url,
+        data,
+        params,
+        headers,
+        responseType: stream ? 'stream' : 'json',
+      })
+    } else {
+      response = await fetch(url, {
+        headers,
+        method,
+        body: JSON.stringify(data),
+      })
+    }
+
+    return response
+  }
+
+  messageFeedback(messageId, rating, user) {
+    const data = {
+      rating,
+      user,
+    }
+    return this.sendRequest('POST', `/messages/${messageId}/feedbacks`, data)
+  }
+
+  getApplicationParameters(user) {
+    const params = { user }
+    return this.sendRequest('GET', '/parameters', null, params)
+  }
+}
+
+export class CompletionClient extends LangGeniusClient {
+  createCompletionMessage(inputs, query, responseMode, user) {
+    const data = {
+      inputs,
+      query,
+      responseMode,
+      user,
+    }
+    return this.sendRequest('POST', '/completion-messages', data, null, responseMode === 'streaming')
+  }
+}
+
+export class ChatClient extends LangGeniusClient {
+  createChatMessage(inputs, query, user, responseMode = 'blocking', conversationId = null) {
+    const data = {
+      inputs,
+      query,
+      user,
+      responseMode,
+    }
+    if (conversationId)
+      data.conversation_id = conversationId
+
+    return this.sendRequest('POST', '/chat-messages', data, null, responseMode === 'streaming')
+  }
+
+  getConversationMessages(user, conversationId = '', firstId = null, limit = null) {
+    const params = { user }
+
+    if (conversationId)
+      params.conversation_id = conversationId
+
+    if (firstId)
+      params.first_id = firstId
+
+    if (limit)
+      params.limit = limit
+
+    return this.sendRequest('GET', '/messages', null, params)
+  }
+
+  getConversations(user, firstId = null, limit = null, pinned = null) {
+    const params = { user, first_id: firstId, limit, pinned }
+    return this.sendRequest('GET', '/conversations', null, params)
+  }
+
+  renameConversation(conversationId, name, user) {
+    const data = { name, user }
+    return this.sendRequest('PATCH', `/conversations/${conversationId}`, data)
+  }
+}
+

app/api/site/route.ts

+import { type NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { getInfo, setSession } from '@/app/api/utils/common'
+import { APP_INFO } from '@/config'
+
+export async function GET(request: NextRequest) {
+  const { sessionId } = getInfo(request);
+  return NextResponse.json(APP_INFO, {
+    headers: setSession(sessionId)
+  })
+}
\ No newline at end of file

app/api/utils/common.ts

+import { type NextRequest } from 'next/server'
+import { APP_ID, API_KEY } from '@/config'
+import { ChatClient } from '../sdk'
+const userPrefix = `user_${APP_ID}:`;
+const uuid = require('uuid')
+
+export const getInfo = (request: NextRequest) => {
+  const sessionId = request.cookies.get('session_id')?.value || uuid.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)
\ No newline at end of file

app/api/utils/stream.ts

+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;
+}
\ No newline at end of file

app/components/app-unavailable.tsx

+'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

+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

+.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

+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

+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

+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

+.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;
+}
\ No newline at end of file

app/components/base/markdown.tsx

+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

+'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

+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

+'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

+.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);
+}
\ No newline at end of file

app/components/base/tooltip/index.tsx

+'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/icons/answer.svg

+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.03647 1.5547C0.59343 0.890144 1.06982 0 1.86852 0H8V12L1.03647 1.5547Z" fill="#F3F4F6"/>
+</svg>

app/components/chat/icons/edit.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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>
\ No newline at end of file

app/components/chat/icons/question.svg

+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z" fill="#E1EFFE"/>
+</svg>

app/components/chat/icons/send-active.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.447 16.8939C23.6128 16.8108 23.7523 16.6832 23.8498 16.5253C23.9473 16.3674 23.9989 16.1855 23.9989 15.9999C23.9989 15.8144 23.9473 15.6325 23.8498 15.4746C23.7523 15.3167 23.6128 15.1891 23.447 15.1059L9.44697 8.10595C9.27338 8.01909 9.07827 7.98463 8.88543 8.00677C8.69259 8.02891 8.51036 8.1067 8.36098 8.23064C8.2116 8.35458 8.10151 8.51931 8.04415 8.70475C7.9868 8.89019 7.98465 9.08831 8.03797 9.27495L9.46697 14.2749C9.52674 14.4839 9.65297 14.6677 9.82655 14.7985C10.0001 14.9294 10.2116 15.0001 10.429 14.9999H15C15.2652 14.9999 15.5195 15.1053 15.7071 15.2928C15.8946 15.4804 16 15.7347 16 15.9999C16 16.2652 15.8946 16.5195 15.7071 16.7071C15.5195 16.8946 15.2652 16.9999 15 16.9999H10.429C10.2116 16.9998 10.0001 17.0705 9.82655 17.2013C9.65297 17.3322 9.52674 17.516 9.46697 17.7249L8.03897 22.7249C7.98554 22.9115 7.98756 23.1096 8.04478 23.2951C8.10201 23.4805 8.21195 23.6453 8.36122 23.7693C8.51049 23.8934 8.69263 23.9713 8.88542 23.9936C9.07821 24.0159 9.27332 23.9816 9.44697 23.8949L23.447 16.8949V16.8939Z" fill="#1C64F2"/>
+</svg>

app/components/chat/icons/send.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.447 16.8939C23.6128 16.8108 23.7523 16.6832 23.8498 16.5253C23.9473 16.3674 23.9989 16.1855 23.9989 15.9999C23.9989 15.8144 23.9473 15.6325 23.8498 15.4746C23.7523 15.3167 23.6128 15.1891 23.447 15.1059L9.44697 8.10595C9.27338 8.01909 9.07827 7.98463 8.88543 8.00677C8.69259 8.02891 8.51036 8.1067 8.36098 8.23064C8.2116 8.35458 8.10151 8.51931 8.04415 8.70475C7.9868 8.89019 7.98465 9.08831 8.03797 9.27495L9.46697 14.2749C9.52674 14.4839 9.65297 14.6677 9.82655 14.7985C10.0001 14.9294 10.2116 15.0001 10.429 14.9999H15C15.2652 14.9999 15.5195 15.1053 15.7071 15.2928C15.8946 15.4804 16 15.7347 16 15.9999C16 16.2652 15.8946 16.5195 15.7071 16.7071C15.5195 16.8946 15.2652 16.9999 15 16.9999H10.429C10.2116 16.9998 10.0001 17.0705 9.82655 17.2013C9.65297 17.3322 9.52674 17.516 9.46697 17.7249L8.03897 22.7249C7.98554 22.9115 7.98756 23.1096 8.04478 23.2951C8.10201 23.4805 8.21195 23.6453 8.36122 23.7693C8.51049 23.8934 8.69263 23.9713 8.88542 23.9936C9.07821 24.0159 9.27332 23.9816 9.44697 23.8949L23.447 16.8949V16.8939Z" fill="#D1D5DB"/>
+</svg>

app/components/chat/icons/typing.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2358_1380)">
+<rect x="2" y="1" width="16" height="16" rx="8" fill="white"/>
+<path opacity="0.7" d="M13.5 9H13.505M14 9C14 9.13261 13.9473 9.25979 13.8536 9.35355C13.7598 9.44732 13.6326 9.5 13.5 9.5C13.3674 9.5 13.2402 9.44732 13.1464 9.35355C13.0527 9.25979 13 9.13261 13 9C13 8.86739 13.0527 8.74021 13.1464 8.64645C13.2402 8.55268 13.3674 8.5 13.5 8.5C13.6326 8.5 13.7598 8.55268 13.8536 8.64645C13.9473 8.74021 14 8.86739 14 9Z" stroke="#155EEF" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.6" d="M10 9H10.005M10.5 9C10.5 9.13261 10.4473 9.25979 10.3536 9.35355C10.2598 9.44732 10.1326 9.5 10 9.5C9.86739 9.5 9.74021 9.44732 9.64645 9.35355C9.55268 9.25979 9.5 9.13261 9.5 9C9.5 8.86739 9.55268 8.74021 9.64645 8.64645C9.74021 8.55268 9.86739 8.5 10 8.5C10.1326 8.5 10.2598 8.55268 10.3536 8.64645C10.4473 8.74021 10.5 8.86739 10.5 9Z" stroke="#155EEF" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.3" d="M6.5 9H6.505M7 9C7 9.13261 6.94732 9.25979 6.85355 9.35355C6.75979 9.44732 6.63261 9.5 6.5 9.5C6.36739 9.5 6.24021 9.44732 6.14645 9.35355C6.05268 9.25979 6 9.13261 6 9C6 8.86739 6.05268 8.74021 6.14645 8.64645C6.24021 8.55268 6.36739 8.5 6.5 8.5C6.63261 8.5 6.75979 8.55268 6.85355 8.64645C6.94732 8.74021 7 8.86739 7 9Z" stroke="#155EEF" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_2358_1380" x="0" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2358_1380"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2358_1380" result="shape"/>
+</filter>
+</defs>
+</svg>

app/components/chat/style.module.css

+.answerIcon {
+  background: url(./icons/robot.svg);
+}
+
+.typeingIcon {
+  position: relative;
+}
+
+.typeingIcon::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 16px;
+  height: 16px;
+  background: url(./icons/typing.svg) no-repeat;
+  background-size: contain;
+}
+
+.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);
+}
\ No newline at end of file

app/components/config-scence/index.tsx

+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

+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/sidebar/card.module.css

+.card:hover {
+  background: linear-gradient(0deg, rgba(235, 245, 255, 0.4), rgba(235, 245, 255, 0.4)), #FFFFFF;
+}
\ No newline at end of file

app/components/sidebar/card.tsx

+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

+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

+'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

+.boxShodow {
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
\ No newline at end of file

app/components/welcome/index.tsx

+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import TemplateVarPanel, { PanelTitle, VarOpBtnGroup } from '../value-panel'
+import s from './style.module.css'
+import { AppInfo, ChatBtn, EditBtn, FootLogo, PromptTemplate } from './massive-component'
+import type { PromptConfig, SiteInfo } from '@/types/app'
+import Toast from '@/app/components/base/toast'
+import Select from '@/app/components/base/select'
+import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+
+// regex to match the {{}} and replace it with a span
+const regex = /\{\{([^}]+)\}\}/g
+
+export type IWelcomeProps = {
+  conversationName: string
+  hasSetInputs: boolean
+  isPublicVersion: boolean
+  siteInfo: SiteInfo
+  promptConfig: PromptConfig
+  onStartChat: (inputs: Record<string, any>) => void
+  canEidtInpus: boolean
+  savedInputs: Record<string, any>
+  onInputsChange: (inputs: Record<string, any>) => void
+  plan: string
+}
+
+const Welcome: FC<IWelcomeProps> = ({
+  conversationName,
+  hasSetInputs,
+  isPublicVersion,
+  siteInfo,
+  plan,
+  promptConfig,
+  onStartChat,
+  canEidtInpus,
+  savedInputs,
+  onInputsChange,
+}) => {
+  const { t } = useTranslation()
+  const hasVar = promptConfig.prompt_variables.length > 0
+  const [isFold, setIsFold] = useState<boolean>(true)
+  const [inputs, setInputs] = useState<Record<string, any>>((() => {
+    if (hasSetInputs)
+      return savedInputs
+
+    const res: Record<string, any> = {}
+    if (promptConfig) {
+      promptConfig.prompt_variables.forEach((item) => {
+        res[item.key] = ''
+      })
+    }
+    return res
+  })())
+  useEffect(() => {
+    if (!savedInputs) {
+      const res: Record<string, any> = {}
+      if (promptConfig) {
+        promptConfig.prompt_variables.forEach((item) => {
+          res[item.key] = ''
+        })
+      }
+      setInputs(res)
+    }
+    else {
+      setInputs(savedInputs)
+    }
+  }, [savedInputs])
+
+  const highLightPromoptTemplate = (() => {
+    if (!promptConfig)
+      return ''
+    const res = promptConfig.prompt_template.replace(regex, (match, p1) => {
+      return `<span class='text-gray-800 font-bold'>${inputs?.[p1] ? inputs?.[p1] : match}</span>`
+    })
+    return res
+  })()
+
+  const { notify } = Toast
+  const logError = (message: string) => {
+    notify({ type: 'error', message, duration: 3000 })
+  }
+
+  const renderHeader = () => {
+    return (
+      <div className='absolute top-0 left-0 right-0 flex items-center justify-between border-b border-gray-100 mobile:h-12 tablet:h-16 px-8 bg-white'>
+        <div className='text-gray-900'>{conversationName}</div>
+      </div>
+    )
+  }
+
+  const renderInputs = () => {
+    return (
+      <div className='space-y-3'>
+        {promptConfig.prompt_variables.map(item => (
+          <div className='tablet:flex tablet:!h-9 mobile:space-y-2 tablet:space-y-0 mobile:text-xs tablet:text-sm' key={item.key}>
+            <label className={`flex-shrink-0 flex items-center mobile:text-gray-700 tablet:text-gray-900 mobile:font-medium pc:font-normal ${s.formLabel}`}>{item.name}</label>
+            {item.type === 'select'
+              ? (
+                <Select
+                  className='w-full'
+                  defaultValue={inputs?.[item.key]}
+                  onSelect={(i) => { setInputs({ ...inputs, [item.key]: i.value }) }}
+                  items={(item.options || []).map(i => ({ name: i, value: i }))}
+                  allowSearch={false}
+                  bgClassName='bg-gray-50'
+                />
+              )
+              : (
+                <input
+                  placeholder={item.name}
+                  value={inputs?.[item.key] || ''}
+                  onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
+                  className={'w-full flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50'}
+                  maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
+                />
+              )}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const canChat = () => {
+    const inputLens = Object.values(inputs).length
+    const promptVariablesLens = promptConfig.prompt_variables.length
+    const emytyInput = inputLens < promptVariablesLens || Object.values(inputs).filter(v => v === '').length > 0
+    if (emytyInput) {
+      logError(t('app.errorMessage.valueOfVarRequired'))
+      return false
+    }
+    return true
+  }
+
+  const handleChat = () => {
+    if (!canChat())
+      return
+
+    onStartChat(inputs)
+  }
+
+  const renderNoVarPanel = () => {
+    if (isPublicVersion) {
+      return (
+        <div>
+          <AppInfo siteInfo={siteInfo} />
+          <TemplateVarPanel
+            isFold={false}
+            header={
+              <>
+                <PanelTitle
+                  title={t('app.chat.publicPromptConfigTitle')}
+                  className='mb-1'
+                />
+                <PromptTemplate html={highLightPromoptTemplate} />
+              </>
+            }
+          >
+            <ChatBtn onClick={handleChat} />
+          </TemplateVarPanel>
+        </div>
+      )
+    }
+    // private version
+    return (
+      <TemplateVarPanel
+        isFold={false}
+        header={
+          <AppInfo siteInfo={siteInfo} />
+        }
+      >
+        <ChatBtn onClick={handleChat} />
+      </TemplateVarPanel>
+    )
+  }
+
+  const renderVarPanel = () => {
+    return (
+      <TemplateVarPanel
+        isFold={false}
+        header={
+          <AppInfo siteInfo={siteInfo} />
+        }
+      >
+        {renderInputs()}
+        <ChatBtn
+          className='mt-3 mobile:ml-0 tablet:ml-[128px]'
+          onClick={handleChat}
+        />
+      </TemplateVarPanel>
+    )
+  }
+
+  const renderVarOpBtnGroup = () => {
+    return (
+      <VarOpBtnGroup
+        onConfirm={() => {
+          if (!canChat())
+            return
+
+          onInputsChange(inputs)
+          setIsFold(true)
+        }}
+        onCancel={() => {
+          setInputs(savedInputs)
+          setIsFold(true)
+        }}
+      />
+    )
+  }
+
+  const renderHasSetInputsPublic = () => {
+    if (!canEidtInpus) {
+      return (
+        <TemplateVarPanel
+          isFold={false}
+          header={
+            <>
+              <PanelTitle
+                title={t('app.chat.publicPromptConfigTitle')}
+                className='mb-1'
+              />
+              <PromptTemplate html={highLightPromoptTemplate} />
+            </>
+          }
+        />
+      )
+    }
+
+    return (
+      <TemplateVarPanel
+        isFold={isFold}
+        header={
+          <>
+            <PanelTitle
+              title={t('app.chat.publicPromptConfigTitle')}
+              className='mb-1'
+            />
+            <PromptTemplate html={highLightPromoptTemplate} />
+            {isFold && (
+              <div className='flex items-center justify-between mt-3 border-t border-indigo-100 pt-4 text-xs text-indigo-600'>
+                <span className='text-gray-700'>{t('app.chat.configStatusDes')}</span>
+                <EditBtn onClick={() => setIsFold(false)} />
+              </div>
+            )}
+          </>
+        }
+      >
+        {renderInputs()}
+        {renderVarOpBtnGroup()}
+      </TemplateVarPanel>
+    )
+  }
+
+  const renderHasSetInputsPrivate = () => {
+    if (!canEidtInpus || !hasVar)
+      return null
+
+    return (
+      <TemplateVarPanel
+        isFold={isFold}
+        header={
+          <div className='flex items-center justify-between text-indigo-600'>
+            <PanelTitle
+              title={!isFold ? t('app.chat.privatePromptConfigTitle') : t('app.chat.configStatusDes')}
+            />
+            {isFold && (
+              <EditBtn onClick={() => setIsFold(false)} />
+            )}
+          </div>
+        }
+      >
+        {renderInputs()}
+        {renderVarOpBtnGroup()}
+      </TemplateVarPanel>
+    )
+  }
+
+  const renderHasSetInputs = () => {
+    if (!isPublicVersion && !canEidtInpus || !hasVar)
+      return null
+
+    return (
+      <div
+        className='pt-[88px] mb-5'
+      >
+        {isPublicVersion ? renderHasSetInputsPublic() : renderHasSetInputsPrivate()}
+      </div>)
+  }
+
+  return (
+    <div className='relative mobile:min-h-[48px] tablet:min-h-[64px]'>
+      {hasSetInputs && renderHeader()}
+      <div className='mx-auto pc:w-[794px] max-w-full mobile:w-full px-3.5'>
+        {/*  Has't set inputs  */}
+        {
+          !hasSetInputs && (
+            <div className='mobile:pt-[72px] tablet:pt-[128px] pc:pt-[200px]'>
+              {hasVar
+                ? (
+                  renderVarPanel()
+                )
+                : (
+                  renderNoVarPanel()
+                )}
+            </div>
+          )
+        }
+
+        {/* Has set inputs */}
+        {hasSetInputs && renderHasSetInputs()}
+
+        {/* foot */}
+        {!hasSetInputs && (
+          <div className='mt-4 flex justify-between items-center h-8 text-xs text-gray-400'>
+
+            {siteInfo.privacy_policy
+              ? <div>{t('app.chat.privacyPolicyLeft')}
+                <a
+                  className='text-gray-500'
+                  href={siteInfo.privacy_policy}
+                  target='_blank'>{t('app.chat.privacyPolicyMiddle')}</a>
+                {t('app.chat.privacyPolicyRight')}
+              </div>
+              : <div>
+              </div>}
+            {plan === 'basic' && <a className='flex items-center pr-3 space-x-3' href="https://langgenius.ai/" target="_blank">
+              <span className='uppercase'>{t('app.chat.powerBy')}</span>
+              <FootLogo />
+            </a>}
+          </div>
+        )}
+      </div>
+    </div >
+  )
+}
+
+export default React.memo(Welcome)

app/components/welcome/style.module.css

+.boxShodow {
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.bgGrayColor {
+  background-color: #F9FAFB;
+}
+
+.headerBg {
+  height: 3.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.formLabel {
+  width: 120px;
+  margin-right: 8px;
+}
+
+.customBtn {
+  width: 136px;
+}
\ No newline at end of file

app/layout.tsx

+import { getLocaleOnServer } from '@/i18n/server'
+
+import './styles/globals.css'
+import './styles/markdown.scss'
+
+const LocaleLayout = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const locale = getLocaleOnServer()
+  return (
+    <html lang={locale ?? 'en'} className="h-full">
+      <body className="h-full">
+        <div className="overflow-x-auto">
+          <div className="w-screen h-screen min-w-[300px]">
+            {children}
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}
+
+export default LocaleLayout

app/page.tsx

+import type { FC } from 'react'
+import React from 'react'
+
+import type { IMainProps } from '@/app/components'
+import Main from '@/app/components'
+
+const App: FC<IMainProps> = ({
+  params,
+}: any) => {
+  return (
+    <Main params={params} />
+  )
+}
+
+export default React.memo(App)

app/styles/globals.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(from 180deg at 50% 50%,
+      #16abff33 0deg,
+      #0885ff33 55deg,
+      #54d6ff33 120deg,
+      #0071ff33 160deg,
+      transparent 360deg);
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(#00000080,
+      #00000040,
+      #00000030,
+      #00000020,
+      #00000010,
+      #00000010,
+      #00000080);
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(to bottom right,
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0.3));
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(#ffffff80,
+        #ffffff40,
+        #ffffff30,
+        #ffffff20,
+        #ffffff10,
+        #ffffff10,
+        #ffffff80);
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+} */
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  /* background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb)); */
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+} */
+
+/* CSS Utils */
+.h1 {
+  padding-bottom: 1.5rem;
+  line-height: 1.5;
+  font-size: 1.125rem;
+  color: #111928;
+}
+
+.h2 {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111928;
+  line-height: 1.5;
+}
+
+.link {
+  @apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
+}
+
+.text-gradient {
+  background: linear-gradient(91.58deg, #2250F2 -29.55%, #0EBCF3 75.22%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}

config/index.ts

+export const APP_ID = ''
+export const API_KEY = ''
+export const APP_INFO = {
+  "app_id": APP_ID,
+  "site": {
+    "title": "Chat APP",
+    "description": null,
+    "copyright": null,
+    "privacy_policy": null,
+    "default_language": "zh-Hans",
+    "prompt_public": true
+  },
+  "prompt_config": {
+    "introduction": "Chat APP",
+    "prompt_template": "{{a}}", "prompt_variables": [{ "key": "a", "name": "a", "type": "string", "max_length": 48 }], "completion_params": { "max_token": 256, "temperature": 1, "top_p": 1, "presence_penalty": 0, "frequency_penalty": 0 }
+  }
+}
+
+
+
+export const API_PREFIX = '/api';
+
+export const LOCALE_COOKIE_NAME = 'locale'
+
+export const DEFAULT_VALUE_MAX_LEN = 48

hooks/use-breakpoints.ts

+'use client'
+import React from 'react'
+
+export enum MediaType {
+  mobile = 'mobile',
+  tablet = 'tablet',
+  pc = 'pc',
+}
+
+const useBreakpoints = () => {
+  const [width, setWidth] = React.useState(globalThis.innerWidth);
+  const media = (() => {
+    if (width <= 640) return MediaType.mobile;
+    if (width <= 768) return MediaType.tablet;
+    return MediaType.pc;
+  })();
+
+  React.useEffect(() => {
+    const handleWindowResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+
+  return media;
+}
+
+export default useBreakpoints
\ No newline at end of file

hooks/use-conversation.ts

+import { useState } from 'react'
+import type { ConversationItem } from '@/types/app'
+import produce from 'immer'
+
+const storageConversationIdKey = 'conversationIdInfo'
+
+type ConversationInfoType = Omit<ConversationItem, 'inputs' | 'id'>
+function useConversation() {
+  const [conversationList, setConversationList] = useState<ConversationItem[]>([])
+  const [currConversationId, doSetCurrConversationId] = useState<string>('-1')
+  // when set conversation id, we do not have set appId
+  const setCurrConversationId = (id: string, appId: string, isSetToLocalStroge = true, newConversationName = '') => {
+    doSetCurrConversationId(id)
+    if (isSetToLocalStroge && id !== '-1') {
+      // conversationIdInfo: {[appId1]: conversationId1, [appId2]: conversationId2}
+      const conversationIdInfo = globalThis.localStorage?.getItem(storageConversationIdKey) ? JSON.parse(globalThis.localStorage?.getItem(storageConversationIdKey) || '') : {}
+      conversationIdInfo[appId] = id
+      globalThis.localStorage?.setItem(storageConversationIdKey, JSON.stringify(conversationIdInfo))
+    }
+  }
+
+  const getConversationIdFromStorage = (appId: string) => {
+    const conversationIdInfo = globalThis.localStorage?.getItem(storageConversationIdKey) ? JSON.parse(globalThis.localStorage?.getItem(storageConversationIdKey) || '') : {}
+    const id = conversationIdInfo[appId]
+    return id
+  }
+
+  const isNewConversation = currConversationId === '-1'
+  // input can be updated by user
+  const [newConversationInputs, setNewConversationInputs] = useState<Record<string, any> | null>(null)
+  const resetNewConversationInputs = () => {
+    if (!newConversationInputs) return
+    setNewConversationInputs(produce(newConversationInputs, draft => {
+      Object.keys(draft).forEach(key => {
+        draft[key] = ''
+      })
+    }))
+  }
+  const [existConversationInputs, setExistConversationInputs] = useState<Record<string, any> | null>(null)
+  const currInputs = isNewConversation ? newConversationInputs : existConversationInputs
+  const setCurrInputs = isNewConversation ? setNewConversationInputs : setExistConversationInputs
+
+  // info is muted
+  const [newConversationInfo, setNewConversationInfo] = useState<ConversationInfoType | null>(null)
+  const [existConversationInfo, setExistConversationInfo] = useState<ConversationInfoType | null>(null)
+  const currConversationInfo = isNewConversation ? newConversationInfo : existConversationInfo
+
+  return {
+    conversationList,
+    setConversationList,
+    currConversationId,
+    setCurrConversationId,
+    getConversationIdFromStorage,
+    isNewConversation,
+    currInputs,
+    newConversationInputs,
+    existConversationInputs,
+    resetNewConversationInputs,
+    setCurrInputs,
+    currConversationInfo,
+    setNewConversationInfo,
+    setExistConversationInfo
+  }
+}
+
+export default useConversation;
\ No newline at end of file

i18n/client.ts

+import Cookies from 'js-cookie'
+import type { Locale } from '.'
+import { i18n } from '.'
+import { LOCALE_COOKIE_NAME } from '@/config'
+import { changeLanguage } from '@/i18n/i18next-config'
+
+// same logic as server
+export const getLocaleOnClient = (): Locale => {
+  return Cookies.get(LOCALE_COOKIE_NAME) as Locale || i18n.defaultLocale
+}
+
+export const setLocaleOnClient = (locale: Locale, notReload?: boolean) => {
+  Cookies.set(LOCALE_COOKIE_NAME, locale)
+  changeLanguage(locale)
+  if (!notReload) {
+    location.reload()
+  }
+}

i18n/i18next-config.ts

+'use client'
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import commonEn from './lang/common.en'
+import commonZh from './lang/common.zh'
+import appEn from './lang/app.en'
+import appZh from './lang/app.zh'
+import { Locale } from '.'
+
+const resources = {
+  'en': {
+    translation: {
+      common: commonEn,
+      app: appEn,
+    },
+  },
+  'zh-Hans': {
+    translation: {
+      common: commonZh,
+      app: appZh,
+    },
+  },
+}
+
+i18n.use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    lng: 'en',
+    fallbackLng: 'en',
+    // debug: true,
+    resources,
+  })
+
+export const changeLanguage = (lan: Locale) => {
+  i18n.changeLanguage(lan)
+}
+export default i18n

i18n/i18next-serverside-config.ts

+import { createInstance } from 'i18next'
+import resourcesToBackend from 'i18next-resources-to-backend'
+import { initReactI18next } from 'react-i18next/initReactI18next'
+import { Locale } from '.'
+
+// https://locize.com/blog/next-13-app-dir-i18n/
+const initI18next = async (lng: Locale, ns: string) => {
+  const i18nInstance = createInstance()
+  await i18nInstance
+    .use(initReactI18next)
+    .use(resourcesToBackend((language: string, namespace: string) => import(`./lang/${namespace}.${language}.ts`)))
+    .init({
+      lng: lng === 'zh-Hans' ? 'zh' : lng,
+      ns,
+      fallbackLng: 'en',
+    })
+  return i18nInstance
+}
+
+export async function useTranslation(lng: Locale, ns = '', options: Record<string, any> = {}) {
+  const i18nextInstance = await initI18next(lng, ns)
+  return {
+    t: i18nextInstance.getFixedT(lng, ns, options.keyPrefix),
+    i18n: i18nextInstance
+  }
+}
\ No newline at end of file

i18n/index.ts

+export const i18n = {
+  defaultLocale: 'en',
+  locales: ['en', 'zh-Hans'],
+} as const
+
+export type Locale = typeof i18n['locales'][number]

i18n/lang/app.en.ts

+const translation = {
+  common: {
+    welcome: "Welcome to use",
+    appUnavailable: "App is unavailable",
+    appUnkonwError: "App is unavailable"
+  },
+  chat: {
+    newChat: "New chat",
+    newChatDefaultName: "New conversation",
+    openingStatementTitle: "Opening statement",
+    powerBy: "Powered by",
+    prompt: "Prompt",
+    privatePromptConfigTitle: "Conversation settings",
+    publicPromptConfigTitle: "Initial Prompt",
+    configStatusDes: "Before start, you can modify conversation settings",
+    configDisabled:
+      "Previous session settings have been used for this session.",
+    startChat: "Start Chat",
+    privacyPolicyLeft:
+      "Please read the ",
+    privacyPolicyMiddle:
+      "privacy policy",
+    privacyPolicyRight:
+      " provided by the app developer.",
+  },
+  errorMessage: {
+    valueOfVarRequired: "Variables value can not be empty",
+    waitForResponse:
+      "Please wait for the response to the previous message to complete.",
+  },
+};
+
+export default translation;

i18n/lang/app.zh.ts

+const translation = {
+  common: {
+    welcome: "欢迎使用",
+    appUnavailable: "应用不可用",
+    appUnkonwError: "应用不可用",
+  },
+  chat: {
+    newChat: "新对话",
+    newChatDefaultName: "新的对话",
+    openingStatementTitle: "对话开场白",
+    powerBy: "Powered by",
+    prompt: "提示词",
+    privatePromptConfigTitle: "对话设置",
+    publicPromptConfigTitle: "对话前提示词",
+    configStatusDes: "开始前，您可以修改对话设置",
+    configDisabled: "此次会话已使用上次会话表单",
+    startChat: "开始对话",
+    privacyPolicyLeft: "请阅读由该应用开发者提供的",
+    privacyPolicyMiddle: "隐私政策",
+    privacyPolicyRight: "。",
+  },
+  errorMessage: {
+    valueOfVarRequired: "变量值必填",
+    waitForResponse: "请等待上条信息响应完成",
+  },
+};
+
+export default translation;

i18n/lang/common.en.ts

+const translation = {
+  api: {
+    success: 'Success',
+    saved: 'Saved',
+    create: 'Created',
+  },
+  operation: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    clear: 'Clear',
+    save: 'Save',
+    edit: 'Edit',
+    refresh: 'Restart',
+    search: 'Search',
+    send: 'Send',
+    lineBreak: 'Line break',
+    like: 'like',
+    dislike: 'dislike',
+  }
+}
+
+export default translation

i18n/lang/common.zh.ts

+const translation = {
+  api: {
+    success: '成功',
+    saved: '已保存',
+    create: '已创建',
+  },
+  operation: {
+    confirm: '确认',
+    cancel: '取消',
+    clear: '清空',
+    save: '保存',
+    edit: '编辑',
+    refresh: '重新开始',
+    search: '搜索',
+    send: '发送',
+    lineBreak: '换行',
+    like: '赞同',
+    dislike: '反对',
+  }
+}
+
+export default translation

i18n/server.ts

+import 'server-only'
+
+import { cookies, headers } from 'next/headers'
+import Negotiator from 'negotiator'
+import { match } from '@formatjs/intl-localematcher'
+import type { Locale } from '.'
+import { i18n } from '.'
+
+export const getLocaleOnServer = (): Locale => {
+  // @ts-expect-error locales are readonly
+  const locales: string[] = i18n.locales
+
+  let languages: string[] | undefined
+  // get locale from cookie
+  const localeCookie = cookies().get('locale')
+  languages = localeCookie?.value ? [localeCookie.value] : []
+
+  if (!languages.length) {
+    // Negotiator expects plain object so we need to transform headers
+    const negotiatorHeaders: Record<string, string> = {}
+    headers().forEach((value, key) => (negotiatorHeaders[key] = value))
+    // Use negotiator and intl-localematcher to get best locale
+    languages = new Negotiator({ headers: negotiatorHeaders }).languages()
+  }
+
+  // match locale
+  const matchedLocale = match(languages, locales, i18n.defaultLocale) as Locale
+  return matchedLocale
+}

next.config.js

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  productionBrowserSourceMaps: false, // enable browser source map generation during the production build
+  // Configure pageExtensions to include md and mdx
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+  experimental: {
+    appDir: true,
+  },
+  // fix all before production. Now it slow the develop speed.
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors
+    ignoreBuildErrors: true,
+  }
+}
+
+module.exports = nextConfig

package.json

+{
+  "name": "langgenius-gateway-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "fix": "next lint --fix"
+  },
+  "dependencies": {
+    "@formatjs/intl-localematcher": "^0.2.32",
+    "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.16",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@types/node": "18.15.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "ahooks": "^3.7.5",
+    "axios": "^1.3.5",
+    "classnames": "^2.3.2",
+    "copy-to-clipboard": "^3.3.3",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^1.0.0",
+    "i18next": "^22.4.13",
+    "i18next-resources-to-backend": "^1.1.3",
+    "immer": "^9.0.19",
+    "js-cookie": "^3.0.1",
+    "negotiator": "^0.6.3",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "^4.0.2",
+    "react-headless-pagination": "^1.1.4",
+    "react-i18next": "^12.2.0",
+    "react-markdown": "^8.0.6",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-tooltip": "5.8.3",
+    "rehype-katex": "^6.0.2",
+    "remark-breaks": "^3.0.2",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "sass": "^1.61.0",
+    "scheduler": "^0.23.0",
+    "server-only": "^0.0.1",
+    "swr": "^2.1.0",
+    "typescript": "4.9.5",
+    "use-context-selector": "^1.4.1",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.36.0",
+    "@faker-js/faker": "^7.6.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/js-cookie": "^3.0.3",
+    "@types/negotiator": "^0.6.1",
+    "autoprefixer": "^10.4.14",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "miragejs": "^0.1.47",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7"
+  }
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

service/base.ts

+import { API_PREFIX } from '@/config'
+import Toast from '@/app/components/base/toast'
+
+const TIME_OUT = 100000
+
+const ContentType = {
+  json: 'application/json',
+  stream: 'text/event-stream',
+  form: 'application/x-www-form-urlencoded; charset=UTF-8',
+  download: 'application/octet-stream', // for download
+}
+
+const baseOptions = {
+  method: 'GET',
+  mode: 'cors',
+  credentials: 'include', // always send cookies、HTTP Basic authentication.
+  headers: new Headers({
+    'Content-Type': ContentType.json,
+  }),
+  redirect: 'follow',
+}
+
+export type IOnDataMoreInfo = {
+  conversationId: string | undefined
+  messageId: string
+  errorMessage?: string
+}
+
+export type IOnData = (message: string, isFirstMessage: boolean, moreInfo: IOnDataMoreInfo) => void
+export type IOnCompleted = () => void
+export type IOnError = (msg: string) => void
+
+type IOtherOptions = {
+  needAllResponseContent?: boolean
+  onData?: IOnData // for stream
+  onError?: IOnError
+  onCompleted?: IOnCompleted // for stream
+}
+
+function unicodeToChar(text: string) {
+  return text.replace(/\\u[0-9a-f]{4}/g, (_match, p1) => {
+    return String.fromCharCode(parseInt(p1, 16))
+  })
+}
+
+const handleStream = (response: any, onData: IOnData, onCompleted?: IOnCompleted) => {
+  if (!response.ok)
+    throw new Error('Network response was not ok')
+
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder('utf-8')
+  let buffer = ''
+  let bufferObj: any
+  let isFirstMessage = true
+  function read() {
+    reader.read().then((result: any) => {
+      if (result.done) {
+        onCompleted && onCompleted()
+        return
+      }
+      buffer += decoder.decode(result.value, { stream: true })
+      const lines = buffer.split('\n')
+      try {
+        lines.forEach((message) => {
+          if (!message) return
+          bufferObj = JSON.parse(message) // remove data: and parse as json
+          onData(unicodeToChar(bufferObj.answer), isFirstMessage, {
+            conversationId: bufferObj.conversation_id,
+            messageId: bufferObj.id,
+          })
+          isFirstMessage = false
+        })
+        buffer = lines[lines.length - 1]
+      } catch (e) {
+        onData('', false, {
+          conversationId: undefined,
+          messageId: '',
+          errorMessage: e + ''
+        })
+        return
+      }
+
+      read()
+    })
+  }
+  read()
+}
+
+const baseFetch = (url: string, fetchOptions: any, { needAllResponseContent }: IOtherOptions) => {
+  const options = Object.assign({}, baseOptions, fetchOptions)
+
+  let urlPrefix = API_PREFIX
+
+  let urlWithPrefix = `${urlPrefix}${url.startsWith('/') ? url : `/${url}`}`
+
+  const { method, params, body } = options
+  // handle query
+  if (method === 'GET' && params) {
+    const paramsArray: string[] = []
+    Object.keys(params).forEach(key =>
+      paramsArray.push(`${key}=${encodeURIComponent(params[key])}`),
+    )
+    if (urlWithPrefix.search(/\?/) === -1)
+      urlWithPrefix += `?${paramsArray.join('&')}`
+
+    else
+      urlWithPrefix += `&${paramsArray.join('&')}`
+
+    delete options.params
+  }
+
+  if (body)
+    options.body = JSON.stringify(body)
+
+  // Handle timeout
+  return Promise.race([
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error('request timeout'))
+      }, TIME_OUT)
+    }),
+    new Promise((resolve, reject) => {
+      globalThis.fetch(urlWithPrefix, options)
+        .then((res: any) => {
+          const resClone = res.clone()
+          // Error handler
+          if (!/^(2|3)\d{2}$/.test(res.status)) {
+            const bodyJson = res.json()
+            switch (res.status) {
+              case 401: {
+                Toast.notify({ type: 'error', message: 'Invalid token' })
+                return
+
+              }
+              default:
+                // eslint-disable-next-line no-new
+                new Promise(() => {
+                  bodyJson.then((data: any) => {
+                    Toast.notify({ type: 'error', message: data.message })
+                  })
+                })
+            }
+            return Promise.reject(resClone)
+          }
+
+          // handle delete api. Delete api not return content.
+          if (res.status === 204) {
+            resolve({ result: "success" })
+            return
+          }
+
+          // return data
+          const data = options.headers.get('Content-type') === ContentType.download ? res.blob() : res.json()
+
+          resolve(needAllResponseContent ? resClone : data)
+        })
+        .catch((err) => {
+          Toast.notify({ type: 'error', message: err })
+          reject(err)
+        })
+    }),
+  ])
+}
+
+export const ssePost = (url: string, fetchOptions: any, {
+  onData, onCompleted, onError }: IOtherOptions) => {
+  const options = Object.assign({}, baseOptions, {
+    method: 'POST',
+  }, fetchOptions)
+
+  const urlPrefix = API_PREFIX
+  const urlWithPrefix = `${urlPrefix}${url.startsWith('/') ? url : `/${url}`}`
+
+  const { body } = options
+  if (body)
+    options.body = JSON.stringify(body)
+
+  globalThis.fetch(urlWithPrefix, options)
+    .then((res: any) => {
+      if (!/^(2|3)\d{2}$/.test(res.status)) {
+        // eslint-disable-next-line no-new
+        new Promise(() => {
+          res.json().then((data: any) => {
+            Toast.notify({ type: 'error', message: data.message || 'Server Error' })
+          })
+        })
+        onError?.('Server Error')
+        return
+      }
+      return handleStream(res, (str: string, isFirstMessage: boolean, moreInfo: IOnDataMoreInfo) => {
+        if (moreInfo.errorMessage) {
+          Toast.notify({ type: 'error', message: moreInfo.errorMessage })
+          return
+        }
+        onData?.(str, isFirstMessage, moreInfo)
+      }, () => {
+        onCompleted?.()
+      })
+    }).catch((e) => {
+      Toast.notify({ type: 'error', message: e })
+      onError?.(e)
+    })
+}
+
+export const request = (url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return baseFetch(url, options, otherOptions || {})
+}
+
+export const get = (url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request(url, Object.assign({}, options, { method: 'GET' }), otherOptions)
+}
+
+export const post = (url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request(url, Object.assign({}, options, { method: 'POST' }), otherOptions)
+}
+
+export const put = (url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request(url, Object.assign({}, options, { method: 'PUT' }), otherOptions)
+}
+
+export const del = (url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request(url, Object.assign({}, options, { method: 'DELETE' }), otherOptions)
+}

service/index.ts

+import type { IOnCompleted, IOnData, IOnError } from './base'
+import { get, post, ssePost } from './base'
+import type { Feedbacktype } from '@/types/app'
+
+export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onError }: {
+  onData: IOnData
+  onCompleted: IOnCompleted
+  onError: IOnError
+}) => {
+  return ssePost('chat-messages', {
+    body: {
+      ...body,
+      response_mode: 'streaming',
+    },
+  }, { onData, onCompleted, onError })
+}
+
+export const fetchAppInfo = async () => {
+  return get('site')
+}
+
+export const fetchConversations = async () => {
+  return get('conversations', { params: { limit: 20, first_id: '' } })
+}
+
+export const fetchChatList = async (conversationId: string) => {
+  return get('messages', { params: { conversation_id: conversationId, limit: 20, last_id: '' } })
+}
+
+// init value. wait for server update
+export const fetchAppParams = async () => {
+  return get('parameters')
+}
+
+export const updateFeedback = async ({ url, body }: { url: string; body: Feedbacktype }) => {
+  return post(url, { body })
+}

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    typography: require('./typography'),
+    extend: {
+      colors: {
+        gray: {
+          50: '#F9FAFB',
+          100: '#F3F4F6',
+          200: '#E5E7EB',
+          300: '#D1D5DB',
+          400: '#9CA3AF',
+          500: '#6B7280',
+          700: '#374151',
+          800: '#1F2A37',
+          900: '#111928',
+        },
+        primary: {
+          50: '#EBF5FF',
+          100: '#E1EFFE',
+          200: '#C3DDFD',
+          300: '#A4CAFE',
+          600: '#1C64F2',
+          700: '#1A56DB',
+        },
+        blue: {
+          500: '#E1EFFE',
+        },
+        green: {
+          50: '#F3FAF7',
+          100: '#DEF7EC',
+          800: '#03543F',
+
+        },
+        yellow: {
+          100: '#FDF6B2',
+          800: '#723B13',
+        },
+        purple: {
+          50: '#F6F5FF',
+        },
+        indigo: {
+          25: '#F5F8FF',
+          100: '#E0EAFF',
+          600: '#444CE7'
+        }
+      },
+      screens: {
+        'mobile': '100px',
+        // => @media (min-width: 100px) { ... }
+        'tablet': '640px', // 391
+        // => @media (min-width: 600px) { ... }
+        'pc': '769px',
+        // => @media (min-width: 769px) { ... }
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/line-clamp'),
+  ],
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "app/components/develop/Prose.jsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

types/app.ts

+import { Locale } from '@/i18n'
+
+export type PromptVariable = {
+  key: string,
+  name: string,
+  type: "string" | "number" | "select",
+  default?: string | number,
+  options?: string[]
+  max_length: number
+}
+
+export type PromptConfig = {
+  prompt_template: string,
+  prompt_variables: PromptVariable[],
+}
+
+export const MessageRatings = ['like', 'dislike', null] as const
+export type MessageRating = typeof MessageRatings[number]
+
+export type Feedbacktype = {
+  rating: MessageRating
+  content?: string | null
+}
+
+export type MessageMore = {
+  time: string
+  tokens: number
+  latency: number | string
+}
+
+export type IChatItem = {
+  id: string
+  content: string
+  /**
+   * Specific message type
+   */
+  isAnswer: boolean
+  /**
+   * The user feedback result of this message
+   */
+  feedback?: Feedbacktype
+  /**
+   * The admin feedback result of this message
+   */
+  adminFeedback?: Feedbacktype
+  /**
+   * Whether to hide the feedback area
+   */
+  feedbackDisabled?: boolean
+  /**
+   * More information about this message
+   */
+  more?: MessageMore
+  isIntroduction?: boolean
+  useCurrentUserAvatar?: boolean
+  isOpeningStatement?: boolean
+}
+
+
+export type ResponseHolder = {}
+
+export type ConversationItem = {
+  id: string
+  name: string
+  inputs: Record<string, any> | null
+  introduction: string,
+}
+
+export type SiteInfo = {
+  title: string
+  description: string
+  default_language: Locale
+  copyright?: string
+  privacy_policy?: string
+}
\ No newline at end of file

utils/prompt.ts

+import { PromptVariable } from '@/types/app'
+
+export function replaceVarWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
+  return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+    const name = inputs[key]
+    if (name)
+      return name
+
+    const valueObj: PromptVariable | undefined = promptVariables.find(v => v.key === key)
+    return valueObj ? `{{${valueObj.key}}}` : match
+  })
+}
\ No newline at end of file

utils/string.ts

+const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_'
+export function randomString(length: number) {
+  let result = ''
+  for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
+  return result
+}