feat: lint code

.gitignore

@@ -17,6 +17,7 @@
 
 # misc
 .DS_Store
+.vscode
 *.pem
 
 # debug

app/api/chat-messages/route.ts

 import { type NextRequest } from 'next/server'
-import { getInfo, client } from '@/app/api/utils/common'
+import { client, getInfo } from '@/app/api/utils/common'
 import { OpenAIStream } from '@/app/api/utils/stream'
 
 export async function POST(request: NextRequest) {
@@ -8,9 +8,9 @@ export async function POST(request: NextRequest) {
     inputs,
     query,
     conversation_id: conversationId,
-    response_mode: responseMode
+    response_mode: responseMode,
   } = body
-  const { user } = getInfo(request);
+  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

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

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

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

app/api/messages/route.ts

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

app/api/parameters/route.ts

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

app/api/utils/common.ts

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

app/api/utils/stream.ts

 export async function OpenAIStream(res: { body: any }) {
-  const reader = res.body.getReader();
+  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();
+      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;
+            controller.close()
+            return
           }
           // Enqueue the next data chunk into our target stream
-          controller.enqueue(value);
-          return pump();
-        });
+          controller.enqueue(value)
+          return pump()
+        })
       }
     },
-  });
+  })
 
-  return stream;
+  return stream
 }

app/components/app-unavailable.tsx

@@ -14,9 +14,8 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
 }) => {
   const { t } = useTranslation()
   let message = errMessage
-  if (!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'>

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

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

app/components/base/markdown.tsx

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

app/components/chat/index.tsx

 'use client'
-import type { FC, } from 'react'
+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 LoadingAnim from './loading-anim'
 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>
 
@@ -168,8 +168,8 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, onFeedback,
     <div key={id}>
       <div className='flex items-start'>
         <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
-          {isResponsing &&
-            <div className={s.typeingIcon}>
+          {isResponsing
+            && <div className={s.typeingIcon}>
               <LoadingAnim type='avatar' />
             </div>
           }
@@ -183,11 +183,13 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, onFeedback,
                   <div className='text-xs text-gray-500'>{t('app.chat.openingStatementTitle')}</div>
                 </div>
               )}
-              {(isResponsing && !content) ? (
+              {(isResponsing && !content)
+                ? (
                   <div className='flex items-center justify-center w-6 h-5'>
                     <LoadingAnim type='text' />
                   </div>
-              ) : (
+                )
+                : (
                   <Markdown content={content} />
                 )}
             </div>
@@ -282,11 +284,10 @@ const Chat: FC<IChatProps> = ({
     if (e.code === 'Enter') {
       e.preventDefault()
       // prevent send message when using input method enter
-      if (!e.shiftKey && !isUseInputMethod.current) {
+      if (!e.shiftKey && !isUseInputMethod.current)
         handleSend()
     }
   }
-  }
 
   const haneleKeyDown = (e: any) => {
     isUseInputMethod.current = e.nativeEvent.isComposing

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

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

app/components/index.tsx

+/* eslint-disable @typescript-eslint/no-use-before-define */
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
@@ -10,15 +11,14 @@ 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 type { ConversationItem, Feedbacktype, IChatItem, PromptConfig } 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 { replaceVarWithValues, userInputsFormToPromptVariables } 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'
+import { API_KEY, APP_ID, APP_INFO, isShowPrompt, promptTemplate } from '@/config'
 
 const Main: FC = () => {
   const { t } = useTranslation()
@@ -37,9 +37,8 @@ const Main: FC = () => {
   const [isShowSidebar, { setTrue: showSidebar, setFalse: hideSidebar }] = useBoolean(false)
 
   useEffect(() => {
-    if (APP_INFO?.title) {
+    if (APP_INFO?.title)
       document.title = `${APP_INFO.title} - Powered by Dify`
-    }
   }, [APP_INFO?.title])
 
   /*
@@ -318,9 +317,9 @@ const Main: FC = () => {
       },
       async onCompleted() {
         setResponsingFalse()
-        if (!tempNewConversationId) {
+        if (!tempNewConversationId)
           return
-        }
+
         if (getConversationIdChangeBecauseOfNew()) {
           const { data: conversations }: any = await fetchConversations()
           setConversationList(conversations as ConversationItem[])

app/components/welcome/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import TemplateVarPanel, { PanelTitle, VarOpBtnGroup } from '../value-panel'
 import s from './style.module.css'
 import { AppInfoComp, ChatBtn, EditBtn, FootLogo, PromptTemplate } from './massive-component'
-import type { PromptConfig, AppInfo } from '@/types/app'
+import type { AppInfo, PromptConfig } from '@/types/app'
 import Toast from '@/app/components/base/toast'
 import Select from '@/app/components/base/select'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
@@ -276,7 +276,7 @@ const Welcome: FC<IWelcomeProps> = ({
   }
 
   const renderHasSetInputs = () => {
-    if (!isPublicVersion && !canEidtInpus || !hasVar)
+    if ((!isPublicVersion && !canEidtInpus) || !hasVar)
       return null
 
     return (

config/index.ts

-import { AppInfo } from "@/types/app"
+import type { AppInfo } from '@/types/app'
 export const APP_ID = ''
 export const API_KEY = ''
 export const API_URL = ''
 export const APP_INFO: AppInfo = {
-  "title": 'Chat APP',
-  "description": '',
-  "copyright": '',
-  "privacy_policy": '',
-  "default_language": 'zh-Hans'
+  title: 'Chat APP',
+  description: '',
+  copyright: '',
+  privacy_policy: '',
+  default_language: 'zh-Hans',
 }
 
 export const isShowPrompt = false
 export const promptTemplate = 'I want you to act as a javascript console.'
 
-export const API_PREFIX = '/api';
+export const API_PREFIX = '/api'
 
 export const LOCALE_COOKIE_NAME = 'locale'
 

hooks/use-breakpoints.ts

@@ -8,20 +8,22 @@ export enum MediaType {
 }
 
 const useBreakpoints = () => {
-  const [width, setWidth] = React.useState(globalThis.innerWidth);
+  const [width, setWidth] = React.useState(globalThis.innerWidth)
   const media = (() => {
-    if (width <= 640) return MediaType.mobile;
-    if (width <= 768) return MediaType.tablet;
-    return MediaType.pc;
-  })();
+    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);
-  }, []);
+    const handleWindowResize = () => setWidth(window.innerWidth)
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
 
-  return media;
+  return media
 }
 
 export default useBreakpoints

hooks/use-conversation.ts

 import { useState } from 'react'
-import type { ConversationItem } from '@/types/app'
 import produce from 'immer'
+import type { ConversationItem } from '@/types/app'
 
 const storageConversationIdKey = 'conversationIdInfo'
 
@@ -29,9 +29,10 @@ function useConversation() {
   // 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 => {
+    if (!newConversationInputs)
+      return
+    setNewConversationInputs(produce(newConversationInputs, (draft) => {
+      Object.keys(draft).forEach((key) => {
         draft[key] = ''
       })
     }))
@@ -59,8 +60,8 @@ function useConversation() {
     setCurrInputs,
     currConversationInfo,
     setNewConversationInfo,
-    setExistConversationInfo
+    setExistConversationInfo,
   }
 }
 
-export default useConversation;
\ No newline at end of file
+export default useConversation

i18n/client.ts

@@ -12,7 +12,6 @@ export const getLocaleOnClient = (): Locale => {
 export const setLocaleOnClient = (locale: Locale, notReload?: boolean) => {
   Cookies.set(LOCALE_COOKIE_NAME, locale)
   changeLanguage(locale)
-  if (!notReload) {
+  if (!notReload)
     location.reload()
-  }
 }

i18n/i18next-config.ts

@@ -5,7 +5,7 @@ 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 '.'
+import type { Locale } from '.'
 
 const resources = {
   'en': {

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 '.'
+import type { Locale } from '.'
 
 // https://locize.com/blog/next-13-app-dir-i18n/
 const initI18next = async (lng: Locale, ns: string) => {
@@ -21,6 +21,6 @@ export async function useTranslation(lng: Locale, ns = '', options: Record<strin
   const i18nextInstance = await initI18next(lng, ns)
   return {
     t: i18nextInstance.getFixedT(lng, ns, options.keyPrefix),
-    i18n: i18nextInstance
+    i18n: i18nextInstance,
   }
 }

i18n/lang/app.en.ts

 const translation = {
   common: {
-    welcome: "Welcome to use",
-    appUnavailable: "App is unavailable",
-    appUnkonwError: "App is unavailable"
+    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",
+    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",
+      'Previous session settings have been used for this session.',
+    startChat: 'Start Chat',
     privacyPolicyLeft:
-      "Please read the ",
+      'Please read the ',
     privacyPolicyMiddle:
-      "privacy policy",
+      'privacy policy',
     privacyPolicyRight:
-      " provided by the app developer.",
+      ' provided by the app developer.',
   },
   errorMessage: {
-    valueOfVarRequired: "Variables value can not be empty",
+    valueOfVarRequired: 'Variables value can not be empty',
     waitForResponse:
-      "Please wait for the response to the previous message to complete.",
+      'Please wait for the response to the previous message to complete.',
   },
-};
+}
 
-export default translation;
+export default translation

i18n/lang/app.zh.ts

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

i18n/lang/common.en.ts

@@ -16,7 +16,7 @@ const translation = {
     lineBreak: 'Line break',
     like: 'like',
     dislike: 'dislike',
-  }
+  },
 }
 
 export default translation

i18n/lang/common.zh.ts

@@ -16,7 +16,7 @@ const translation = {
     lineBreak: '换行',
     like: '赞同',
     dislike: '反对',
-  }
+  },
 }
 
 export default translation

next.config.js

@@ -15,7 +15,7 @@ const nextConfig = {
   typescript: {
     // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors
     ignoreBuildErrors: true,
-  }
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "fix": "next lint --fix"
+    "fix": "next lint --fix",
+    "eslint-fix": "eslint . --fix",
+    "prepare": "husky install ./.husky"
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.2.32",
@@ -28,6 +30,7 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^1.0.0",
+    "husky": "^8.0.3",
     "i18next": "^22.4.13",
     "i18next-resources-to-backend": "^1.1.3",
     "immer": "^9.0.19",
@@ -56,15 +59,23 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.36.0",
+    "@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",
+    "lint-staged": "^13.2.2",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"
+  },
+  "lint-staged": {
+    "**/*.js?(x)": [
+      "eslint --fix"
+    ],
+    "**/*.ts?(x)": [
+      "eslint --fix"
+    ]
   }
 }

tailwind.config.js

@@ -46,15 +46,15 @@ module.exports = {
         indigo: {
           25: '#F5F8FF',
           100: '#E0EAFF',
-          600: '#444CE7'
-        }
+          600: '#444CE7',
+        },
       },
       screens: {
-        'mobile': '100px',
+        mobile: '100px',
         // => @media (min-width: 100px) { ... }
-        'tablet': '640px', // 391
+        tablet: '640px', // 391
         // => @media (min-width: 600px) { ... }
-        'pc': '769px',
+        pc: '769px',
         // => @media (min-width: 769px) { ... }
       },
     },

types/app.ts

-import { Locale } from '@/i18n'
+import type { Locale } from '@/i18n'
 
 export type PromptVariable = {
-  key: string,
-  name: string,
-  type: "string" | "number" | "select",
-  default?: string | number,
+  key: string
+  name: string
+  type: 'string' | 'number' | 'select'
+  default?: string | number
   options?: string[]
   max_length?: number
   required: boolean
 }
 
 export type PromptConfig = {
-  prompt_template: string,
-  prompt_variables: PromptVariable[],
+  prompt_template: string
+  prompt_variables: PromptVariable[]
 }
 
 export type TextTypeFormItem = {
-  label: string,
-  variable: string,
+  label: string
+  variable: string
   required: boolean
   max_length: number
 }
 
 export type SelectTypeFormItem = {
-  label: string,
-  variable: string,
-  required: boolean,
+  label: string
+  variable: string
+  required: boolean
   options: string[]
 }
 /**
@@ -79,14 +79,13 @@ export type IChatItem = {
   isOpeningStatement?: boolean
 }
 
-
 export type ResponseHolder = {}
 
 export type ConversationItem = {
   id: string
   name: string
   inputs: Record<string, any> | null
-  introduction: string,
+  introduction: string
 }
 
 export type AppInfo = {

typography.js

@@ -38,15 +38,15 @@ module.exports = ({ theme }) => ({
       '--tw-prose-invert-td-borders': theme('colors.zinc.700'),
 
       // Base
-      color: 'var(--tw-prose-body)',
-      fontSize: theme('fontSize.sm')[0],
-      lineHeight: theme('lineHeight.7'),
+      'color': 'var(--tw-prose-body)',
+      'fontSize': theme('fontSize.sm')[0],
+      'lineHeight': theme('lineHeight.7'),
 
       // Layout
       '> *': {
-        maxWidth: theme('maxWidth.2xl'),
-        marginLeft: 'auto',
-        marginRight: 'auto',
+        'maxWidth': theme('maxWidth.2xl'),
+        'marginLeft': 'auto',
+        'marginRight': 'auto',
         '@screen lg': {
           maxWidth: theme('maxWidth.3xl'),
           marginLeft: `calc(50% - min(50%, ${theme('maxWidth.lg')}))`,
@@ -55,7 +55,7 @@ module.exports = ({ theme }) => ({
       },
 
       // Text
-      p: {
+      'p': {
         marginTop: theme('spacing.6'),
         marginBottom: theme('spacing.6'),
       },
@@ -65,7 +65,7 @@ module.exports = ({ theme }) => ({
       },
 
       // Lists
-      ol: {
+      'ol': {
         listStyleType: 'decimal',
         marginTop: theme('spacing.5'),
         marginBottom: theme('spacing.5'),
@@ -98,13 +98,13 @@ module.exports = ({ theme }) => ({
       'ol[type="1"]': {
         listStyleType: 'decimal',
       },
-      ul: {
+      'ul': {
         listStyleType: 'disc',
         marginTop: theme('spacing.5'),
         marginBottom: theme('spacing.5'),
         paddingLeft: '1.625rem',
       },
-      li: {
+      'li': {
         marginTop: theme('spacing.2'),
         marginBottom: theme('spacing.2'),
       },
@@ -140,14 +140,14 @@ module.exports = ({ theme }) => ({
       },
 
       // Horizontal rules
-      hr: {
-        borderColor: 'var(--tw-prose-hr)',
-        borderTopWidth: 1,
-        marginTop: theme('spacing.16'),
-        marginBottom: theme('spacing.16'),
-        maxWidth: 'none',
-        marginLeft: `calc(-1 * ${theme('spacing.4')})`,
-        marginRight: `calc(-1 * ${theme('spacing.4')})`,
+      'hr': {
+        'borderColor': 'var(--tw-prose-hr)',
+        'borderTopWidth': 1,
+        'marginTop': theme('spacing.16'),
+        'marginBottom': theme('spacing.16'),
+        'maxWidth': 'none',
+        'marginLeft': `calc(-1 * ${theme('spacing.4')})`,
+        'marginRight': `calc(-1 * ${theme('spacing.4')})`,
         '@screen sm': {
           marginLeft: `calc(-1 * ${theme('spacing.6')})`,
           marginRight: `calc(-1 * ${theme('spacing.6')})`,
@@ -159,7 +159,7 @@ module.exports = ({ theme }) => ({
       },
 
       // Quotes
-      blockquote: {
+      'blockquote': {
         fontWeight: '500',
         fontStyle: 'italic',
         color: 'var(--tw-prose-quotes)',
@@ -178,14 +178,14 @@ module.exports = ({ theme }) => ({
       },
 
       // Headings
-      h1: {
+      'h1': {
         color: 'var(--tw-prose-headings)',
         fontWeight: '700',
         fontSize: theme('fontSize.2xl')[0],
         ...theme('fontSize.2xl')[1],
         marginBottom: theme('spacing.2'),
       },
-      h2: {
+      'h2': {
         color: 'var(--tw-prose-headings)',
         fontWeight: '600',
         fontSize: theme('fontSize.lg')[0],
@@ -193,7 +193,7 @@ module.exports = ({ theme }) => ({
         marginTop: theme('spacing.16'),
         marginBottom: theme('spacing.2'),
       },
-      h3: {
+      'h3': {
         color: 'var(--tw-prose-headings)',
         fontSize: theme('fontSize.base')[0],
         ...theme('fontSize.base')[1],
@@ -211,7 +211,7 @@ module.exports = ({ theme }) => ({
         marginTop: '0',
         marginBottom: '0',
       },
-      figcaption: {
+      'figcaption': {
         color: 'var(--tw-prose-captions)',
         fontSize: theme('fontSize.xs')[0],
         ...theme('fontSize.xs')[1],
@@ -219,7 +219,7 @@ module.exports = ({ theme }) => ({
       },
 
       // Tables
-      table: {
+      'table': {
         width: '100%',
         tableLayout: 'auto',
         textAlign: 'left',
@@ -227,7 +227,7 @@ module.exports = ({ theme }) => ({
         marginBottom: theme('spacing.8'),
         lineHeight: theme('lineHeight.6'),
       },
-      thead: {
+      'thead': {
         borderBottomWidth: '1px',
         borderBottomColor: 'var(--tw-prose-th-borders)',
       },
@@ -255,7 +255,7 @@ module.exports = ({ theme }) => ({
       'tbody td': {
         verticalAlign: 'baseline',
       },
-      tfoot: {
+      'tfoot': {
         borderTopWidth: '1px',
         borderTopColor: 'var(--tw-prose-th-borders)',
       },
@@ -276,13 +276,13 @@ module.exports = ({ theme }) => ({
       },
 
       // Inline elements
-      a: {
-        color: 'var(--tw-prose-links)',
-        textDecoration: 'underline transparent',
-        fontWeight: '500',
-        transitionProperty: 'color, text-decoration-color',
-        transitionDuration: theme('transitionDuration.DEFAULT'),
-        transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
+      'a': {
+        'color': 'var(--tw-prose-links)',
+        'textDecoration': 'underline transparent',
+        'fontWeight': '500',
+        'transitionProperty': 'color, text-decoration-color',
+        'transitionDuration': theme('transitionDuration.DEFAULT'),
+        'transitionTimingFunction': theme('transitionTimingFunction.DEFAULT'),
         '&:hover': {
           color: 'var(--tw-prose-links-hover)',
           textDecorationColor: 'var(--tw-prose-links-underline)',
@@ -291,14 +291,14 @@ module.exports = ({ theme }) => ({
       ':is(h1, h2, h3) a': {
         fontWeight: 'inherit',
       },
-      strong: {
+      'strong': {
         color: 'var(--tw-prose-bold)',
         fontWeight: '600',
       },
       ':is(a, blockquote, thead th) strong': {
         color: 'inherit',
       },
-      code: {
+      'code': {
         color: 'var(--tw-prose-code)',
         borderRadius: theme('borderRadius.lg'),
         paddingTop: theme('padding.1'),

utils/prompt.ts

-import { PromptVariable, UserInputFormItem } from '@/types/app'
+import type { PromptVariable, UserInputFormItem } from '@/types/app'
 
 export function replaceVarWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
   return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
@@ -12,11 +12,12 @@ export function replaceVarWithValues(str: string, promptVariables: PromptVariabl
 }
 
 export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] | null) => {
-  if (!useInputs) return []
+  if (!useInputs)
+    return []
   const promptVariables: PromptVariable[] = []
   useInputs.forEach((item: any) => {
     const type = item['text-input'] ? 'string' : 'select'
-    const content = type === 'string' ? item['text-input'] : item['select']
+    const content = type === 'string' ? item['text-input'] : item.select
     if (type === 'string') {
       promptVariables.push({
         key: content.variable,
@@ -26,7 +27,8 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
         max_length: content.max_length,
         options: [],
       })
-    } else {
+    }
+    else {
       promptVariables.push({
         key: content.variable,
         name: content.label,