feat: add .env

feat: support var type paragraph

.env.example

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

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -47,4 +48,4 @@ yarn.lock
 .yarnrc.yml
 
 # pmpm
-pnpm-lock.yaml
+pnpm-lock.yaml

README.md

@@ -2,18 +2,22 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Config App
-Config app in `config/index.ts`.Please config:
-- APP_ID
-- API_KEY
+Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Setting the following content:
+```
+# APP ID
+NEXT_PUBLIC_APP_ID=
+# APP API key
+NEXT_PUBLIC_APP_KEY=
+```
 
-More config:
+Config more in `config/index.ts` file:   
 ```js
 export const APP_INFO: AppInfo = {
-  "title": 'Chat APP',
-  "description": '',
-  "copyright": '',
-  "privacy_policy": '',
-  "default_language": 'zh-Hans'
+  title: 'Chat APP',
+  description: '',
+  copyright: '',
+  privacy_policy: '',
+  default_language: 'zh-Hans'
 }
 
 export const isShowPrompt = true

app/api/conversations/route.ts

@@ -1,3 +1,5 @@
+export const dynamic = 'force-dynamic'
+
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { client, getInfo, setSession } from '@/app/api/utils/common'

app/api/passport/route.ts

@@ -1,21 +0,0 @@
-import { type NextRequest } from 'next/server'
-import { client } from '@/app/api/utils/common'
-import { API_KEY, API_URL, APP_ID } from '@/config'
-
-// import { commonClient } from 'dify-client'
-import axios from "axios";
-
-export async function GET(request: NextRequest) {
-  const headers = {
-    Authorization: `Bearer ${API_KEY}`,
-    "Content-Type": "application/json",
-    'X-App-Code': APP_ID
-  };
-  const res = await axios({
-    url: 'https://api.dify.ai/v1/passport',
-    headers,
-    responseType: "json",
-  })
-  console.log(res)
-  return new Response(res.data)
-}

app/api/utils/common.ts

@@ -1,5 +1,5 @@
 import { type NextRequest } from 'next/server'
-import { ChatClient, DifyClient } from 'dify-client'
+import { ChatClient } from 'dify-client'
 import { v4 } from 'uuid'
 import { API_KEY, API_URL, APP_ID } from '@/config'
 
@@ -19,4 +19,3 @@ export const setSession = (sessionId: string) => {
 }
 
 export const client = new ChatClient(API_KEY, API_URL || undefined)
-export const commonClient = new ChatClient(API_KEY, API_URL || undefined)

app/components/index.tsx

@@ -19,7 +19,6 @@ import Loading from '@/app/components/base/loading'
 import { replaceVarWithValues, userInputsFormToPromptVariables } from '@/utils/prompt'
 import AppUnavailable from '@/app/components/app-unavailable'
 import { API_KEY, APP_ID, APP_INFO, isShowPrompt, promptTemplate } from '@/config'
-import { checkOrSetAccessToken } from '@/utils/access-token'
 
 const Main: FC = () => {
   const { t } = useTranslation()
@@ -64,6 +63,8 @@ const Main: FC = () => {
   const [conversationIdChangeBecauseOfNew, setConversationIdChangeBecauseOfNew, getConversationIdChangeBecauseOfNew] = useGetState(false)
   const [isChatStarted, { setTrue: setChatStarted, setFalse: setChatNotStarted }] = useBoolean(false)
   const handleStartChat = (inputs: Record<string, any>) => {
+    createNewChat()
+    setConversationIdChangeBecauseOfNew(true)
     setCurrInputs(inputs)
     setChatStarted()
     // parse variables in introduction
@@ -198,8 +199,6 @@ const Main: FC = () => {
       return
     }
     (async () => {
-      await checkOrSetAccessToken()
-
       try {
         const [conversationData, appParams] = await Promise.all([fetchConversations(), fetchAppParams()])
 

app/components/welcome/index.tsx

@@ -92,10 +92,10 @@ const Welcome: FC<IWelcomeProps> = ({
     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>
+          <div className='tablet:flex items-start 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 tablet:leading-9 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]}
@@ -104,16 +104,24 @@ const Welcome: FC<IWelcomeProps> = ({
                   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}
-                />
               )}
+            {item.type === 'string' && (
+              <input
+                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                value={inputs?.[item.key] || ''}
+                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
+                className={'w-full flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50'}
+                maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
+              />
+            )}
+            {item.type === 'paragraph' && (
+              <textarea
+                className="w-full h-[104px] flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50"
+                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                value={inputs?.[item.key] || ''}
+                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
+              />
+            )}
           </div>
         ))}
       </div>

config/index.ts

@@ -1,7 +1,7 @@
 import type { AppInfo } from '@/types/app'
-export const APP_ID = ''
-export const API_KEY = ''
-export const API_URL = ''
+export const APP_ID = `${process.env.NEXT_PUBLIC_APP_ID}`
+export const API_KEY = `${process.env.NEXT_PUBLIC_APP_KEY}`
+export const API_URL = `${process.env.NEXT_PUBLIC_API_URL}`
 export const APP_INFO: AppInfo = {
   title: 'Chat APP',
   description: '',

service/base.ts

@@ -1,4 +1,4 @@
-import { API_PREFIX, APP_ID } from '@/config'
+import { API_PREFIX } from '@/config'
 import Toast from '@/app/components/base/toast'
 
 const TIME_OUT = 100000
@@ -102,16 +102,7 @@ const handleStream = (response: any, onData: IOnData, onCompleted?: IOnCompleted
 
 const baseFetch = (url: string, fetchOptions: any, { needAllResponseContent }: IOtherOptions) => {
   const options = Object.assign({}, baseOptions, fetchOptions)
-  const sharedToken = APP_ID
-  const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
-  let accessTokenJson = { [sharedToken]: '' }
-  try {
-    accessTokenJson = JSON.parse(accessToken)
-  }
-  catch (e) {
 
-  }
-  options.headers.set('Authorization', `Bearer ${accessTokenJson[sharedToken]}`)
   const urlPrefix = API_PREFIX
 
   let urlWithPrefix = `${urlPrefix}${url.startsWith('/') ? url : `/${url}`}`

service/index.ts

@@ -31,7 +31,3 @@ export const fetchAppParams = async () => {
 export const updateFeedback = async ({ url, body }: { url: string; body: Feedbacktype }) => {
   return post(url, { body })
 }
-
-export const fetchAccessToken = async (appId: string) => {
-  return get('/passport') as Promise<{ access_token: string }>
-}

types/app.ts

@@ -3,7 +3,7 @@ import type { Locale } from '@/i18n'
 export type PromptVariable = {
   key: string
   name: string
-  type: 'string' | 'number' | 'select'
+  type: string
   default?: string | number
   options?: string[]
   max_length?: number

utils/access-token.ts

@@ -1,19 +0,0 @@
-import { fetchAccessToken } from '@/service'
-import { APP_ID } from '@/config'
-
-export const checkOrSetAccessToken = async () => {
-  const sharedToken = APP_ID
-  const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
-  let accessTokenJson = { [sharedToken]: '' }
-  try {
-    accessTokenJson = JSON.parse(accessToken)
-  }
-  catch (e) {
-
-  }
-  if (!accessTokenJson[sharedToken]) {
-    const res = await fetchAccessToken(sharedToken)
-    accessTokenJson[sharedToken] = res.access_token
-    localStorage.setItem('token', JSON.stringify(accessTokenJson))
-  }
-}

utils/prompt.ts

@@ -16,14 +16,22 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
     return []
   const promptVariables: PromptVariable[] = []
   useInputs.forEach((item: any) => {
-    const type = item['text-input'] ? 'string' : 'select'
-    const content = type === 'string' ? item['text-input'] : item.select
-    if (type === 'string') {
+    const isParagraph = !!item.paragraph
+    const [type, content] = (() => {
+      if (isParagraph)
+        return ['paragraph', item.paragraph]
+
+      if (item['text-input'])
+        return ['string', item['text-input']]
+
+      return ['select', item.select]
+    })()
+    if (type === 'string' || type === 'paragraph') {
       promptVariables.push({
         key: content.variable,
         name: content.label,
         required: content.required,
-        type: 'string',
+        type,
         max_length: content.max_length,
         options: [],
       })