Update docs

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

app/api/chat/route.ts

@@ -54,7 +54,7 @@ const getApiConfig = () => {
     }
     apiUrl = `${apiBaseUrl}/v1/chat/completions`
     apiKey = process.env.OPENAI_API_KEY || ''
-    model = 'gpt-3.5-turbo' // todo: allow this to be passed through from client and support gpt-4
+    model = process.env.OPENAI_MODEL || 'gpt-3.5-turbo'
   }
 
   return { apiUrl, apiKey, model }

app/layout.tsx

@@ -6,6 +6,19 @@ import { Header } from '@/components/Header'
 import '@/styles/globals.scss'
 import '@/styles/theme-config.css'
 
+export const metadata = {
+  title: {
+    default: 'ChatGPT Lite',
+    template: `%s - ChatGPT Lite`
+  },
+  description: 'AI assistant powered by ChatGPT',
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '/favicon-16x16.png',
+    apple: '/apple-touch-icon.png'
+  }
+}
+
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

components/Chat/Message.tsx

@@ -1,15 +1,13 @@
 'use client'
 
 import { useContext } from 'react'
-import { Avatar, Flex, Text } from '@radix-ui/themes'
+import { Avatar, Flex } from '@radix-ui/themes'
 import { SiOpenai } from 'react-icons/si'
 import { HiUser } from 'react-icons/hi'
-import cs from 'classnames'
-
 import { Markdown } from '@/components'
-
 import ChatContext from './chatContext'
 import { ChatMessage } from './interface'
+
 export interface MessageProps {
   message: ChatMessage
 }
@@ -22,7 +20,7 @@ const Message = (props: MessageProps) => {
   return (
     <Flex gap="4" className="mb-5">
       <Avatar
-        fallback={<SiOpenai className="h-4 w-4" />}
+        fallback={isUser ? <HiUser className="h-4 w-4" /> : <SiOpenai className="h-4 w-4" />}
         color={isUser ? undefined : 'green'}
         size="2"
         radius="full"