Improve UX based on end user feedbacks (#45)

.eslintrc.json

@@ -1,3 +1,39 @@
 {
-  "extends": "next/core-web-vitals"
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "plugins": ["import"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "never",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "no-unused-vars": "warn"
+  },
+  "settings": {
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }

.github/workflows/lint.yml → .github/workflows/code-analysis.yml

@@ -26,7 +26,7 @@ jobs:
         uses: bahmutov/npm-install@v1
 
       - name: Lint
-        run: npm run lint:strict
+        run: npm run lint
 
   prettier:
     name: Prettier

README.md

@@ -29,6 +29,7 @@ Refer to the [Environment Variables](#environment-variables) section for necessa
 ### Deploy on Vercel
 
 Click the button below to deploy on Vercel:
+
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblrchen%2Fchatgpt-lite&project-name=chatgpt-lite&framework=nextjs&repository-name=chatgpt-lite)
 
 ### Deploy with Docker

README.zh-CN.md

@@ -29,6 +29,7 @@ ChatGPT Lite是一个基于Next.js和[OpenAI Chat API](https://platform.openai.c
 ### 在Vercel上部署
 
 点击下方按钮部署到Vercel：
+
 [![使用Vercel部署](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblrchen%2Fchatgpt-lite&project-name=chatgpt-lite&framework=nextjs&repository-name=chatgpt-lite)
 
 ### 使用Docker部署

app/api/chat/route.ts

@@ -1,9 +1,11 @@
 import { createParser, ParsedEvent, ReconnectInterval } from 'eventsource-parser'
 import { NextRequest, NextResponse } from 'next/server'
+
 export interface Message {
   role: string
   content: string
 }
+
 export async function POST(req: NextRequest) {
   try {
     const { prompt, messages, input } = (await req.json()) as {
@@ -23,6 +25,7 @@ export async function POST(req: NextRequest) {
       headers: { 'Content-Type': 'text/event-stream' }
     })
   } catch (error) {
+    console.error(error)
     return NextResponse.json(
       { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
       { status: 500 }
@@ -39,12 +42,12 @@ const getApiConfig = () => {
   let model: string
   if (useAzureOpenAI) {
     let apiBaseUrl = process.env.AZURE_OPENAI_API_BASE_URL
-    const version = '2023-05-15'
+    const apiVersion = '2023-05-15'
     const deployment = process.env.AZURE_OPENAI_DEPLOYMENT || ''
     if (apiBaseUrl && apiBaseUrl.endsWith('/')) {
       apiBaseUrl = apiBaseUrl.slice(0, -1)
     }
-    apiUrl = `${apiBaseUrl}/openai/deployments/${deployment}/chat/completions?api-version=${version}`
+    apiUrl = `${apiBaseUrl}/openai/deployments/${deployment}/chat/completions?api-version=${apiVersion}`
     apiKey = process.env.AZURE_OPENAI_API_KEY || ''
     model = '' // Azure Open AI always ignores the model and decides based on the deployment name passed through.
   } else {
@@ -90,7 +93,7 @@ const getOpenAIStream = async (
   if (res.status !== 200) {
     const statusText = res.statusText
     const responseBody = await res.text()
-    console.error(responseBody)
+    console.error(`OpenAI API response error: ${responseBody}`)
     throw new Error(
       `The OpenAI API has encountered an error with a status code of ${res.status} ${statusText}: ${responseBody}`
     )

app/chat/PersonaModal.tsx

@@ -1,25 +1,17 @@
 import React, { useContext, useEffect } from 'react'
-
-import { Button, Dialog, Flex, TextField, TextArea } from '@radix-ui/themes'
+import { Button, Dialog, Flex, TextArea, TextField } from '@radix-ui/themes'
 import { useForm } from 'react-hook-form'
-
 import { ChatContext, Persona } from '@/components'
 
 const PersonaModal = () => {
   const {
     isOpenPersonaModal: open,
-    personaModalLoading: isLoading,
     editPersona: detail,
     onCreatePersona,
     onClosePersonaModal
   } = useContext(ChatContext)
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors }
-  } = useForm()
+  const { register, handleSubmit, setValue } = useForm()
 
   const formSubmit = handleSubmit((values: any) => {
     onCreatePersona?.(values as Persona)
@@ -35,15 +27,13 @@ const PersonaModal = () => {
   return (
     <Dialog.Root open={open!}>
       <Dialog.Content size="4">
-        <Dialog.Title>Prompt</Dialog.Title>
+        <Dialog.Title>Create or Edit Persona Prompt</Dialog.Title>
         <Dialog.Description size="2" mb="4"></Dialog.Description>
         <form onSubmit={formSubmit}>
           <Flex direction="column" gap="3">
             <TextField.Input placeholder="Name" {...register('name', { required: true })} />
-
             <TextArea placeholder="Prompt" rows={7} {...register('prompt', { required: true })} />
           </Flex>
-
           <Flex gap="3" mt="4" justify="end">
             <Dialog.Close>
               <Button variant="soft" type="button" color="gray" onClick={onClosePersonaModal}>
@@ -52,7 +42,7 @@ const PersonaModal = () => {
             </Dialog.Close>
             <Dialog.Close>
               <Button variant="soft" type="submit">
-                OK
+                Save
               </Button>
             </Dialog.Close>
           </Flex>

app/chat/page.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { Flex } from '@radix-ui/themes'
-import { Chat, ChatSiderBar, PersonaPanel, ChatContext, useChatHook } from '@/components'
-
+import { Chat, ChatContext, ChatSideBar, PersonaPanel, useChatHook } from '@/components'
 import PersonaModal from './PersonaModal'
 
 const ChatPage = () => {
@@ -11,7 +10,7 @@ const ChatPage = () => {
   return (
     <ChatContext.Provider value={provider}>
       <Flex style={{ height: 'calc(100% - 56px)' }} className="relative">
-        <ChatSiderBar />
+        <ChatSideBar />
         <div className="flex-1 relative">
           <Chat ref={provider.chatRef} />
           <PersonaPanel />

app/layout.tsx

@@ -1,8 +1,8 @@
+import { Analytics } from '@vercel/analytics/react'
 import { Inter } from 'next/font/google'
-import ThemesProvider from '@/providers/ThemesProvider'
-import { Toaster } from '@/components'
+import { Toaster } from 'react-hot-toast'
 import { Header } from '@/components/Header'
-
+import ThemesProvider from '@/providers/ThemesProvider'
 import '@/styles/globals.scss'
 import '@/styles/theme-config.css'
 
@@ -30,6 +30,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           {children}
           <Toaster />
         </ThemesProvider>
+        <Analytics />
       </body>
     </html>
   )