Switch to Radix-UI for UX Framework

.env.example

@@ -1,11 +1,17 @@
-# Duplicate this to .env.local for local development
-# For more details, visit the following link: https://github.com/blrchen/chatgpt-lite#environment-variables
+# Duplicate this file and rename as '.env.local' for local development.
+# You must obtain OpenAI or Azure OpenAI credentials to run this application.
+# For detailed instructions on using these variables, visit:
+# https://github.com/blrchen/chatgpt-lite#environment-variables
 
-# OpenAI API credentials. These are necessary if you intend to utilize the OpenAI API.
-OPENAI_API_KEY=
+# OpenAI API credentials (required for using the OpenAI API):
+# Sign up at https://openai.com/api/ to get your API key.
+OPENAI_API_KEY= # <-- Insert your OpenAI API key here
 OPENAI_API_BASE_URL="https://api.openai.com"
 
-# Azure OpenAI API credentials. These are necessary if you intend to utilize the Azure OpenAI API.
-# AZURE_OPENAI_API_BASE_URL=
-# AZURE_OPENAI_API_KEY=
-# AZURE_OPENAI_DEPLOYMENT=
+# Azure OpenAI API credentials (required for using the Azure OpenAI API):
+# Sign up at https://azure.microsoft.com/en-us/services/cognitive-services/openai/ for Azure OpenAI credentials.
+# Uncomment the following lines and insert your credentials if you're using Azure OpenAI.
+# AZURE_OPENAI_API_BASE_URL= # <-- Insert your Azure OpenAI API base URL here
+# AZURE_OPENAI_API_KEY= # <-- Insert your Azure OpenAI API key here
+# AZURE_OPENAI_DEPLOYMENT= # <-- Insert your Azure OpenAI deployment name here
+

Dockerfile

@@ -1,6 +1,7 @@
 # This Dockerfile is generated based on sample in the following document
 # https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
-FROM node:18-alpine AS base
+
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -30,6 +31,10 @@ RUN adduser --system --uid 1001 nextjs
 
 COPY --from=builder /app/public ./public
 
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
@@ -40,5 +45,9 @@ USER nextjs
 EXPOSE 3000
 
 ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
 
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
 CMD ["node", "server.js"]

README.md

@@ -2,18 +2,18 @@
 
 English | [简体中文](./README.zh-CN.md)
 
-ChatGPT Lite is a lightweight ChatGPT web interface developed using Next.js and the [OpenAI Chat API](https://platform.openai.com/docs/api-reference/chat). It's compatible with both OpenAI and Azure OpenAI accounts.
+## Demo
+
+Visit the [ChatGPT Lite Demo Site](https://bit.ly/chatgpt-lite)
 
-Key features:
+## Features
+
+ChatGPT Lite is a lightweight ChatGPT web interface developed using Next.js and the [OpenAI Chat API](https://platform.openai.com/docs/api-reference/chat). It's compatible with both OpenAI and Azure OpenAI accounts.
 
 - Deploy a custom ChatGPT web interface that supports markdown, prompt storage, and multi-person chats.
 - Create a private, web-based ChatGPT for use among friends without sharing your API key.
 - Clear and expandable codebase, ideal as a starting point for your next AI Next.js project.
 
-## Demo
-
-Visit the demo site here: [ChatGPT Demo Site](https://gptlite.vercel.app)
-
 ![demo](./docs/images/demo.jpg)
 
 For a beginner-friendly version of the ChatGPT UI codebase, visit [ChatGPT Minimal](https://github.com/blrchen/chatgpt-minimal).
@@ -92,7 +92,3 @@ For Azure OpenAI account:
 ## Contribution
 
 PRs of all sizes are welcome.
-
-## Disclaimers
-
-This code is intended for demonstration and testing purposes only.

README.zh-CN.md

@@ -2,21 +2,21 @@
 
 [English](./README.md) | 简体中文
 
-ChatGPT Lite是一个基于Next.js和[OpenAI Chat API](https://platform.openai.com/docs/api-reference/chat)的网站程序，兼容OpenAI和Azure OpenAI账户。
+## 演示
 
-主要功能：
+访问 [ChatGPT Lite 演示网站](https://bit.ly/chatgpt-lite)
 
-- 部署个性化ChatGPT程序，支持Markdown显示，提示词商店，多角色对话等。
-- 创建供朋友使用的ChatGPT程序，无需共享API密钥。
-- 提供清晰的代码，易于扩展，适合作为你的下一个AI Next.js项目的起点。
+## 功能
 
-## Demo
+ChatGPT Lite是一个基于Next.js和[OpenAI Chat API](https://platform.openai.com/docs/api-reference/chat)的网站程序，兼容OpenAI和Azure OpenAI账户。
 
-在线演示网站: [ChatGPT Lite 演示网站](https://gptlite.vercel.app)
+- 部署个性化ChatGPT程序，支持Markdown显示，提示词商店，多角色对话等。
+- 创建供朋友使用的ChatGPT程序，无需共享API密钥。
+- 提供清晰易读的代码，便于扩展，适合作为你的下一个AI Next.js项目的起点。
 
 ![演示](./docs/images/demo.zh-CN.jpg)
 
-对初学者友好的ChatGPT UI代码库，请访问[ChatGPT Minimal](https://github.com/blrchen/chatgpt-minimal)。
+如需对初学者友好的ChatGPT UI代码库，请访问[ChatGPT Minimal](https://github.com/blrchen/chatgpt-minimal)。
 
 ## 前提条件
 
@@ -79,6 +79,7 @@ OpenAI账户环境变量：
 | ------------------- | ---------------------------------------------------------------------------------- | ------------------------ |
 | OPENAI_API_BASE_URL | 如需为`api.openai.com`使用反向代理，请使用此变量。                                 | `https://api.openai.com` |
 | OPENAI_API_KEY      | 从[OpenAI API网站](https://platform.openai.com/account/api-keys)获取的密钥字符串。 |
+| OPENAI_MODEL        | GPT模型                                                                            | `gpt-3.5-turbo`          |
 
 Azure OpenAI账户环境变量：
 
@@ -91,7 +92,3 @@ Azure OpenAI账户环境变量：
 ## 贡献
 
 欢迎提交各种大小的PR。
-
-## 免责声明
-
-此代码仅供演示和测试使用。

app/(site)/page.tsx

@@ -1,42 +1,5 @@
 'use client'
 
-import { useState } from 'react'
-
-import Sidebar from '@/components/sidebar'
-import Chat from '@/components/chat'
-import MobileNav from '@/components/mobileNav'
-import ChatContext from '@/contexts/chatContext'
-import useChatHook from '@/hooks/useChatHook'
-import PersonaModal from '@/components/personaModal'
-import PromptPanel from '@/components/personaPanel'
-
 export default function Home() {
-  const provider = useChatHook()
-
-  const [isComponentVisible, setIsComponentVisible] = useState(false)
-
-  const toggleComponentVisibility = () => {
-    setIsComponentVisible(!isComponentVisible)
-  }
-
-  return (
-    <ChatContext.Provider value={provider}>
-      <main className="overflow-hidden w-full h-screen relative flex">
-        <MobileNav
-          showMobileSiderbar={isComponentVisible}
-          toggleComponentVisibility={toggleComponentVisibility}
-        />
-
-        <div className="dark hidden flex-shrink-0 bg-gray-900 md:flex md:w-[260px] md:flex-col">
-          <Sidebar />
-        </div>
-
-        <div className="relative max-w-full flex-1 h-full">
-          <Chat ref={provider.chatRef} />
-          <PromptPanel />
-        </div>
-        <PersonaModal />
-      </main>
-    </ChatContext.Provider>
-  )
+  return <main className="p-4"></main>
 }

app/chat/PersonaModal.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useEffect } from 'react'
+
+import { Button, Dialog, Flex, TextField, TextArea } 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 formSubmit = handleSubmit((values: any) => {
+    onCreatePersona?.(values as Persona)
+  })
+
+  useEffect(() => {
+    if (detail) {
+      setValue('name', detail.name, { shouldTouch: true })
+      setValue('prompt', detail.prompt, { shouldTouch: true })
+    }
+  }, [detail, setValue])
+
+  return (
+    <Dialog.Root open={open!}>
+      <Dialog.Content size="4">
+        <Dialog.Title>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}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Dialog.Close>
+              <Button variant="soft" type="submit">
+                OK
+              </Button>
+            </Dialog.Close>
+          </Flex>
+        </form>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}
+
+export default PersonaModal

app/chat/page.tsx

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