heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

support dark mode

Browse Source
This commit is contained in:
黑墨水鱼
2023-03-17 10:31:25 +08:00
parent 9b5730760a
commit f59b63884d
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.tsx
View File

@@ -84,8 +84,8 @@ export function App() {
}; };
return ( return (
<div className="flex text-sm h-screen bg-slate-200"> <div className="flex text-sm h-screen bg-slate-200 dark:bg-slate-800 dark:text-white">
<div className="flex flex-col h-full p-4 border-r-indigo-500 border-2"> <div className="flex flex-col h-full p-4 border-r-indigo-500 border-2 dark:border-slate-800 dark:border-r-indigo-500 dark:text-black">
<div className="grow overflow-scroll"> <div className="grow overflow-scroll">
<button <button
className="bg-violet-300 p-1 rounded hover:bg-violet-400" className="bg-violet-300 p-1 rounded hover:bg-violet-400"

14
src/chatbox.tsx
View File

@@ -133,14 +133,14 @@ export default function ChatBOX(props: {
const [showSettings, setShowSettings] = useState(false); const [showSettings, setShowSettings] = useState(false);
return ( return (
<div className="grow flex flex-col p-4"> <div className="grow flex flex-col p-4 dark:text-black">
<Settings <Settings
chatStore={chatStore} chatStore={chatStore}
setChatStore={setChatStore} setChatStore={setChatStore}
show={showSettings} show={showSettings}
setShow={setShowSettings} setShow={setShowSettings}
/> />
<p className="cursor-pointer" onClick={() => setShowSettings(true)}> <p className="cursor-pointer dark:text-white" onClick={() => setShowSettings(true)}>
<div> <div>
<button className="underline"> <button className="underline">
{chatStore.systemMessageContent.length > 16 {chatStore.systemMessageContent.length > 16
@@ -163,24 +163,24 @@ export default function ChatBOX(props: {
</p> </p>
<div className="grow overflow-scroll"> <div className="grow overflow-scroll">
{!chatStore.apiKey && ( {!chatStore.apiKey && (
<p className="opacity-60 p-6 rounded bg-white my-3 text-left"> <p className="opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
请先在上方设置 (OPENAI) API KEY 请先在上方设置 (OPENAI) API KEY
</p> </p>
)} )}
{!chatStore.apiEndpoint && ( {!chatStore.apiEndpoint && (
<p className="opacity-60 p-6 rounded bg-white my-3 text-left"> <p className="opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
请先在上方设置 API Endpoint 请先在上方设置 API Endpoint
</p> </p>
)} )}
{chatStore.history.length === 0 && ( {chatStore.history.length === 0 && (
<p className="opacity-60 p-6 rounded bg-white my-3 text-left"> <p className="opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
暂无历史对话记录 暂无历史对话记录
</p> </p>
)} )}
{chatStore.history.map((chat, i) => { {chatStore.history.map((chat, i) => {
const pClassName = const pClassName =
chat.role === "assistant" chat.role === "assistant"
? "p-2 rounded relative bg-white my-2 text-left" ? "p-2 rounded relative bg-white my-2 text-left dark:bg-gray-700 dark:text-white"
: "p-2 rounded relative bg-green-400 my-2 text-right"; : "p-2 rounded relative bg-green-400 my-2 text-right";
const iconClassName = const iconClassName =
chat.role === "user" chat.role === "user"
@@ -223,7 +223,7 @@ export default function ChatBOX(props: {
); );
})} })}
{showGenerating && ( {showGenerating && (
<p className="p-2 my-2 animate-pulse"> <p className="p-2 my-2 animate-pulse dark:text-white">
{generatingMessage {generatingMessage
? generatingMessage.split("\n").map((line) => <p>{line}</p>) ? generatingMessage.split("\n").map((line) => <p>{line}</p>)
: "生成中，请保持网络稳定"} : "生成中，请保持网络稳定"}