Skip to content

Commit

Permalink
feat: update style and timeout handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yidadaa
Yidadaa committed Mar 13, 2023
1 parent ff0cf2f commit 5c70456
Show file tree
Hide file tree
Showing 12 changed files with 711 additions and 399 deletions.
67 changes: 14 additions & 53 deletions app/components/home.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "./window.scss";

@mixin container {
background-color: var(--white);
border: var(--border-in-light);
Expand All @@ -11,27 +13,30 @@
display: flex;
overflow: hidden;
box-sizing: border-box;

width: var(--window-width);
height: var(--window-height);
}

.container {
@include container();

max-width: 1080px;
max-height: 864px;
width: 90vw;
height: 90vh;
}

.tight-container {
--window-width: 100vw;
--window-height: 100vw;

@include container();

width: 100vw;
height: 100vh;
border-radius: 0;
}

.sidebar {
width: 300px;
width: var(--sidebar-width);
box-sizing: border-box;
padding: 20px;
background-color: var(--second);
display: flex;
Expand Down Expand Up @@ -159,7 +164,7 @@
}

.window-content {
width: 100%;
width: var(--window-content-width);
height: 100%;
}

Expand All @@ -170,38 +175,6 @@
height: 100%;
}

.window-header {
padding: 14px 20px;
border-bottom: rgba(0, 0, 0, 0.1) 1px solid;

display: flex;
justify-content: space-between;
align-items: center;
}

.window-header-title {
font-size: 20px;
font-weight: bolder;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.window-header-sub-title {
font-size: 14px;
margin-top: 5px;
}

.window-actions {
display: inline-flex;
}

.window-action-button {
margin-left: 10px;
}

.chat-body {
flex: 1;
overflow: auto;
Expand All @@ -220,7 +193,7 @@
}

.chat-message-container {
max-width: 60%;
max-width: 80%;
display: flex;
flex-direction: column;
align-items: flex-start;
Expand Down Expand Up @@ -254,13 +227,14 @@
}

.chat-message-item {
max-width: 100%;
margin-top: 10px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.05);
padding: 10px;
font-size: 14px;
user-select: text;
word-break: break-all;
word-break: break-word;
border: var(--border-in-light);
}

Expand Down Expand Up @@ -327,16 +301,3 @@
right: 30px;
bottom: 10px;
}

.settings {
padding: 20px;
}

.settings-title {
font-size: 14px;
font-weight: bolder;
}

.avatar {
cursor: pointer;
}
175 changes: 25 additions & 150 deletions app/components/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import "katex/dist/katex.min.css";
import RemarkMath from "remark-math";
import RehypeKatex from "rehype-katex";

import EmojiPicker, { Emoji, Theme as EmojiTheme } from "emoji-picker-react";
import { Emoji } from "emoji-picker-react";

import { IconButton } from "./button";
import styles from "./home.module.scss";
Expand All @@ -21,10 +21,21 @@ import BotIcon from "../icons/bot.svg";
import AddIcon from "../icons/add.svg";
import DeleteIcon from "../icons/delete.svg";
import LoadingIcon from "../icons/three-dots.svg";
import ResetIcon from "../icons/reload.svg";

import { Message, SubmitKey, useChatStore, Theme } from "../store";
import { Card, List, ListItem, Popover } from "./ui-lib";
import { Settings } from "./settings";
import dynamic from "next/dynamic";

export const LazySettings = dynamic(
async () => await (await import("./settings")).Settings,
{
loading: () => (
<div className="">
<LoadingIcon />
</div>
),
}
);

export function Markdown(props: { content: string }) {
return (
Expand Down Expand Up @@ -288,13 +299,23 @@ function useSwitchTheme() {

export function Home() {
const [createNewSession] = useChatStore((state) => [state.newSession]);
const loading = !useChatStore.persist.hasHydrated();

// settings
const [openSettings, setOpenSettings] = useState(false);
const config = useChatStore((state) => state.config);

useSwitchTheme();

if (loading) {
return (
<div>
<Avatar role="assistant"></Avatar>
<LoadingIcon />
</div>
);
}

return (
<div
className={`${
Expand Down Expand Up @@ -344,154 +365,8 @@ export function Home() {
</div>

<div className={styles["window-content"]}>
{openSettings ? <Settings /> : <Chat key="chat" />}
{openSettings ? <LazySettings /> : <Chat key="chat" />}
</div>
</div>
);
}

export function Settings() {
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const [config, updateConfig, resetConfig] = useChatStore((state) => [
state.config,
state.updateConfig,
state.resetConfig,
]);

return (
<>
<div className={styles["window-header"]}>
<div>
<div className={styles["window-header-title"]}>设置</div>
<div className={styles["window-header-sub-title"]}>设置选项</div>
</div>
<div className={styles["window-actions"]}>
<div className={styles["window-action-button"]}>
<IconButton
icon={<ResetIcon />}
onClick={resetConfig}
bordered
title="重置所有选项"
/>
</div>
</div>
</div>
<div className={styles["settings"]}>
<List>
<ListItem>
<div className={styles["settings-title"]}>头像</div>
<Popover
onClose={() => setShowEmojiPicker(false)}
content={
<EmojiPicker
lazyLoadEmojis
theme={EmojiTheme.AUTO}
onEmojiClick={(e) => {
updateConfig((config) => (config.avatar = e.unified));
setShowEmojiPicker(false);
}}
/>
}
open={showEmojiPicker}
>
<div
className={styles.avatar}
onClick={() => setShowEmojiPicker(true)}
>
<Avatar role="user" />
</div>
</Popover>
</ListItem>

<ListItem>
<div className={styles["settings-title"]}>发送键</div>
<div className="">
<select
value={config.submitKey}
onChange={(e) => {
updateConfig(
(config) =>
(config.submitKey = e.target.value as any as SubmitKey)
);
}}
>
{Object.values(SubmitKey).map((v) => (
<option value={v} key={v}>
{v}
</option>
))}
</select>
</div>
</ListItem>

<ListItem>
<div className={styles["settings-title"]}>主题</div>
<div className="">
<select
value={config.theme}
onChange={(e) => {
updateConfig(
(config) => (config.theme = e.target.value as any as Theme)
);
}}
>
{Object.values(Theme).map((v) => (
<option value={v} key={v}>
{v}
</option>
))}
</select>
</div>
</ListItem>

<ListItem>
<div className={styles["settings-title"]}>紧凑边框</div>
<input
type="checkbox"
checked={config.tightBorder}
onChange={(e) =>
updateConfig(
(config) => (config.tightBorder = e.currentTarget.checked)
)
}
></input>
</ListItem>
</List>
<List>
<ListItem>
<div className={styles["settings-title"]}>最大上下文消息数</div>
<input
type="range"
title={config.historyMessageCount.toString()}
value={config.historyMessageCount}
min="5"
max="20"
step="5"
onChange={(e) =>
updateConfig(
(config) =>
(config.historyMessageCount = e.target.valueAsNumber)
)
}
></input>
</ListItem>

<ListItem>
<div className={styles["settings-title"]}>
上下文中包含机器人消息
</div>
<input
type="checkbox"
checked={config.sendBotMessages}
onChange={(e) =>
updateConfig(
(config) => (config.sendBotMessages = e.currentTarget.checked)
)
}
></input>
</ListItem>
</List>
</div>
</>
);
}
14 changes: 14 additions & 0 deletions app/components/settings.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@import "./window.scss";

.settings {
padding: 20px;
}

.settings-title {
font-size: 14px;
font-weight: bolder;
}

.avatar {
cursor: pointer;
}
Loading

0 comments on commit 5c70456

Please sign in to comment.