xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-08 19:16:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

4

Browse Source
This commit is contained in:
[witbox2018] 2023-04-06 17:07:36 +08:00
parent 03b3f16472
commit 7c0027ffcd
11 changed files with 9222 additions and 1049 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/button.module.scss
View File

@ -30,6 +30,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: aqua;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {

259
app/components/chat.tsx
View File

@ -1,5 +1,6 @@
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import { memo, useState, useRef, useEffect, useLayoutEffect } from "react"; import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";
import TextareaAutosize from "react-textarea-autosize";
import SendWhiteIcon from "../icons/send-white.svg"; import SendWhiteIcon from "../icons/send-white.svg";
import BrainIcon from "../icons/brain.svg"; import BrainIcon from "../icons/brain.svg";
@ -131,133 +132,133 @@ function PromptToast(props: {
}); });
}; };
return ( // return (
<div className={chatStyle["prompt-toast"]} key="prompt-toast"> // <div className={chatStyle["prompt-toast"]} key="prompt-toast">
{props.showToast && ( // {props.showToast && (
<div // <div
className={chatStyle["prompt-toast-inner"] + " clickable"} // className={chatStyle["prompt-toast-inner"] + " clickable"}
role="button" // role="button"
onClick={() => props.setShowModal(true)} // onClick={() => props.setShowModal(true)}
> // >
<BrainIcon /> // <BrainIcon />
<span className={chatStyle["prompt-toast-content"]}> // <span className={chatStyle["prompt-toast-content"]}>
{Locale.Context.Toast(context.length)} // {Locale.Context.Toast(context.length)}
</span> // </span>
</div> // </div>
)} // )}
{props.showModal && ( // {props.showModal && (
<div className="modal-mask"> // <div className="modal-mask">
<Modal // <Modal
title={Locale.Context.Edit} // title={Locale.Context.Edit}
onClose={() => props.setShowModal(false)} // onClose={() => props.setShowModal(false)}
actions={[ // actions={[
<IconButton // <IconButton
key="reset" // key="reset"
icon={<CopyIcon />} // icon={<CopyIcon />}
bordered // bordered
text={Locale.Memory.Reset} // text={Locale.Memory.Reset}
onClick={() => // onClick={() =>
confirm(Locale.Memory.ResetConfirm) && // confirm(Locale.Memory.ResetConfirm) &&
chatStore.resetSession() // chatStore.resetSession()
} // }
/>, // />,
<IconButton // <IconButton
key="copy" // key="copy"
icon={<CopyIcon />} // icon={<CopyIcon />}
bordered // bordered
text={Locale.Memory.Copy} // text={Locale.Memory.Copy}
onClick={() => copyToClipboard(session.memoryPrompt)} // onClick={() => copyToClipboard(session.memoryPrompt)}
/>, // />,
]} // ]}
> // >
<> // <>
<div className={chatStyle["context-prompt"]}> // <div className={chatStyle["context-prompt"]}>
{context.map((c, i) => ( // {context.map((c, i) => (
<div className={chatStyle["context-prompt-row"]} key={i}> // <div className={chatStyle["context-prompt-row"]} key={i}>
<select // <select
value={c.role} // value={c.role}
className={chatStyle["context-role"]} // className={chatStyle["context-role"]}
onChange={(e) => // onChange={(e) =>
updateContextPrompt(i, { // updateContextPrompt(i, {
...c, // ...c,
role: e.target.value as any, // role: e.target.value as any,
}) // })
} // }
> // >
{ROLES.map((r) => ( // {ROLES.map((r) => (
<option key={r} value={r}> // <option key={r} value={r}>
{r} // {r}
</option> // </option>
))} // ))}
</select> // </select>
<Input // <Input
value={c.content} // value={c.content}
type="text" // type="text"
className={chatStyle["context-content"]} // className={chatStyle["context-content"]}
rows={1} // rows={1}
onInput={(e) => // onInput={(e) =>
updateContextPrompt(i, { // updateContextPrompt(i, {
...c, // ...c,
content: e.currentTarget.value as any, // content: e.currentTarget.value as any,
}) // })
} // }
/> // />
<IconButton // <IconButton
icon={<DeleteIcon />} // icon={<DeleteIcon />}
className={chatStyle["context-delete-button"]} // className={chatStyle["context-delete-button"]}
onClick={() => removeContextPrompt(i)} // onClick={() => removeContextPrompt(i)}
bordered // bordered
/> // />
</div> // </div>
))} // ))}
<div className={chatStyle["context-prompt-row"]}> // <div className={chatStyle["context-prompt-row"]}>
<IconButton // <IconButton
icon={<AddIcon />} // icon={<AddIcon />}
text={Locale.Context.Add} // text={Locale.Context.Add}
bordered // bordered
className={chatStyle["context-prompt-button"]} // className={chatStyle["context-prompt-button"]}
onClick={() => // onClick={() =>
addContextPrompt({ // addContextPrompt({
role: "system", // role: "system",
content: "", // content: "",
date: "", // date: "",
}) // })
} // }
/> // />
</div> // </div>
</div> // </div>
<div className={chatStyle["memory-prompt"]}> // <div className={chatStyle["memory-prompt"]}>
<div className={chatStyle["memory-prompt-title"]}> // <div className={chatStyle["memory-prompt-title"]}>
<span> // <span>
{Locale.Memory.Title} ({session.lastSummarizeIndex} of{" "} // {Locale.Memory.Title} ({session.lastSummarizeIndex} of{" "}
{session.messages.length}) // {session.messages.length})
</span> // </span>
<label className={chatStyle["memory-prompt-action"]}> // <label className={chatStyle["memory-prompt-action"]}>
{Locale.Memory.Send} // {Locale.Memory.Send}
<input // <input
type="checkbox" // type="checkbox"
checked={session.sendMemory} // checked={session.sendMemory}
onChange={() => // onChange={() =>
chatStore.updateCurrentSession( // chatStore.updateCurrentSession(
(session) => // (session) =>
(session.sendMemory = !session.sendMemory), // (session.sendMemory = !session.sendMemory),
) // )
} // }
></input> // ></input>
</label> // </label>
</div> // </div>
<div className={chatStyle["memory-prompt-content"]}> // <div className={chatStyle["memory-prompt-content"]}>
{session.memoryPrompt || Locale.Memory.EmptyContent} // {session.memoryPrompt || Locale.Memory.EmptyContent}
</div> // </div>
</div> // </div>
</> // </>
</Modal> // </Modal>
</div> // </div>
)} // )}
</div> // </div>
); // );
} }
function useSubmitHandler() { function useSubmitHandler() {
@ -590,9 +591,9 @@ export function Chat(props: {
} }
> >
<div className={styles["chat-message-container"]}> <div className={styles["chat-message-container"]}>
<div className={styles["chat-message-avatar"]}> {/* <div className={styles["chat-message-avatar"]}>
<Avatar role={message.role} /> <Avatar role={message.role} />
</div> </div> */}
{(message.preview || message.streaming) && ( {(message.preview || message.streaming) && (
<div className={styles["chat-message-status"]}> <div className={styles["chat-message-status"]}>
{Locale.Chat.Typing} {Locale.Chat.Typing}
@ -659,11 +660,11 @@ export function Chat(props: {
<div className={styles["chat-input-panel"]}> <div className={styles["chat-input-panel"]}>
<PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} /> <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
<div className={styles["chat-input-panel-inner"]}> <div className={styles["chat-input-panel-inner"]}>
<textarea <TextareaAutosize
ref={inputRef} ref={inputRef}
className={styles["chat-input"]} className={styles["chat-input"]}
placeholder={Locale.Chat.Input(submitKey)} placeholder={Locale.Chat.Input(submitKey)}
rows={2} rows={1}
onInput={(e) => onInput(e.currentTarget.value)} onInput={(e) => onInput(e.currentTarget.value)}
value={userInput} value={userInput}
onKeyDown={onInputKeyDown} onKeyDown={onInputKeyDown}

190
app/components/home.module.scss
View File

@ -1,9 +1,9 @@
@import "./window.scss"; @import "./window.scss";
@import "../styles/animation.scss";
@mixin container { @mixin container {
background-color: var(--white); background-color: var(--white);
border: var(--border-in-light); border: 3px solid hsla(0, 0%, 100%, .2);
border-radius: 20px; border-radius: 20px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
color: var(--black); color: var(--black);
@ -27,13 +27,13 @@
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.tight-container { .tight-container {
--window-width: 100vw; --window-width: 100vw;
--window-height: var(--full-height); --window-height: 100vh;
--window-content-width: calc(100% - var(--sidebar-width)); --window-content-width: calc(100% - var(--sidebar-width));
@include container(); @include container();
max-width: 100vw; max-width: 100vw;
max-height: var(--full-height); max-height: 100vh;
border-radius: 0; border-radius: 0;
} }
@ -74,8 +74,8 @@
.sidebar { .sidebar {
position: absolute; position: absolute;
left: -100%; left: -100%;
z-index: 1000; z-index: 999;
height: var(--full-height); height: 100vh;
transition: all ease 0.3s; transition: all ease 0.3s;
box-shadow: none; box-shadow: none;
} }
@ -96,9 +96,11 @@
} }
.sidebar-logo { .sidebar-logo {
position: absolute; // position: absolute;
right: 0; // right: 0;
bottom: 18px; // bottom: 18px;
width: 222px;
} }
.sidebar-title { .sidebar-title {
@ -109,6 +111,7 @@
.sidebar-sub-title { .sidebar-sub-title {
font-size: 12px; font-size: 12px;
font-weight: 400px; font-weight: 400px;
color: var(--text);
} }
.sidebar-body { .sidebar-body {
@ -116,29 +119,53 @@
overflow: auto; overflow: auto;
} }
.chat-list { .chat-list {}
}
.chat-item { .chat-item {
padding: 10px 14px; padding: 12px 10px;
background-color: var(--white); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5),
0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5);
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 14px;
box-shadow: var(--card-shadow); transition: all 0.5s ease;
transition: background-color 0.3s ease;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border: 2px solid transparent; border: 2px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: var(--border-in-light);
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
} }
.chat-item:hover { .chat-item:hover {
background-color: var(--hover-color); background-color: var(--hover-color);
} }
.chat-item-selected { .chat-item-selected {
border-color: var(--primary); border: 2px solid transparent;
background-clip: padding-box,
border-box;
background-origin: padding-box,
border-box;
background-image: linear-gradient(to right, #292937, #292937),
linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8));
} }
.chat-item-title { .chat-item-title {
@ -159,28 +186,26 @@
opacity: 0; opacity: 0;
} }
.chat-item:hover > .chat-item-delete { .chat-item:hover>.chat-item-delete {
opacity: 0.5; opacity: 0.5;
right: 10px; right: 10px;
} }
.chat-item:hover > .chat-item-delete:hover { .chat-item:hover>.chat-item-delete:hover {
opacity: 1; opacity: 1;
} }
.chat-item-info { .chat-item-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: rgb(166, 166, 166); color: #AEB9CA;
font-size: 12px; font-size: 12px;
margin-top: 8px; margin-top: 14px;
} }
.chat-item-count { .chat-item-count {}
}
.chat-item-date { .chat-item-date {}
}
.sidebar-tail { .sidebar-tail {
display: flex; display: flex;
@ -207,7 +232,8 @@
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
position: relative; padding-bottom: 120px;
transition: all ease 0.3s;
} }
.chat-body-title { .chat-body-title {
@ -244,7 +270,7 @@
} }
} }
.chat-message-user > .chat-message-container { .chat-message-user>.chat-message-container {
align-items: flex-end; align-items: flex-end;
} }
@ -273,15 +299,17 @@
.chat-message-item { .chat-message-item {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
margin-top: 10px; margin-top: 28px;
border-radius: 10px; border-radius: 4px 10px 10px 10px;
background-color: rgba(0, 0, 0, 0.05);
padding: 10px; padding: 10px;
font-size: 14px; font-size: 16px;
line-height: 2;
user-select: text; user-select: text;
word-break: break-word; word-break: break-word;
border: var(--border-in-light);
position: relative; position: relative;
background: linear-gradient(90.13deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%),
rgba(255, 255, 255, 0.05);
} }
.chat-message-top-actions { .chat-message-top-actions {
@ -313,8 +341,10 @@
} }
} }
.chat-message-user > .chat-message-container > .chat-message-item { .chat-message-user>.chat-message-container>.chat-message-item {
background-color: var(--second); background: rgba(78, 91, 246, 0.55);
border-radius: 10px 4px 10px 10px;
border: none;
} }
.chat-message-actions { .chat-message-actions {
@ -327,15 +357,19 @@
} }
.chat-message-action-date { .chat-message-action-date {
color: #aaa; color: var(--text);
} }
.chat-input-panel { .chat-input-panel {
position: absolute;
bottom: 0px;
display: flex;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
padding-top: 5px;
box-sizing: border-box; box-sizing: border-box;
flex-direction: column; flex-direction: column;
background: rgba(4, 4, 21, 0.70);
backdrop-filter: blur(6px);
} }
@mixin single-line { @mixin single-line {
@ -378,6 +412,7 @@
@include single-line(); @include single-line();
} }
.hint-content { .hint-content {
font-size: 12px; font-size: 12px;
@ -394,36 +429,63 @@
.chat-input-panel-inner { .chat-input-panel-inner {
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center;
vertical-align: middle;
} }
.chat-input { .chat-input {
height: 100%; box-sizing: border-box;
max-height: 222px;
overflow-y: auto;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 8px;
border: var(--border-in-light); border: var(--border-in-light);
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03); box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black) ;
font-family: inherit; padding: 16px 12px;
padding: 10px 14px 50px;
resize: none; resize: none;
outline: none; outline: none;
transition: all 0.5s ease;
word-break: break-all;
line-height: 1.5;
} }
@media only screen and (max-width: 600px) { .chat-input::placeholder {
.chat-input { color: var(--text);
font-size: 16px; font-size: 14px;
} vertical-align: middle
a;
} }
// @media only screen and (max-width: 600px) {
// .chat-input {
// font-size: 14px;
// }
// }
.chat-input:focus { .chat-input:focus {
border: 1px solid var(--primary); background-clip: padding-box,
border-box;
background-origin: padding-box,
border-box;
background-image: linear-gradient(to right, var(--white), var(--white)),
linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8));
box-shadow: 0 4px 0 2px rgba(var(--primary), .2);
// padding: inherit;
transition: all 0.5s ease;
} }
.chat-input-send { .chat-input-send {
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
width: 78px;
height: 33px;
box-sizing: border-box;
border-radius: 8px;
position: absolute; position: absolute;
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
@ -441,3 +503,35 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.addConversation {
box-sizing: border-box;
height: 52px;
width: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
// linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0px 0px 12px rgba(121, 159, 255, 0.44),
// 0px 0px 20px rgba(255, 255, 255, 0.36),
inset 0px 0px 5px rgba(255, 255, 255, 0.17);
backdrop-filter: blur(12px);
/* Note: backdrop-filter has minimal browser support */
box-shadow: 0px 0px 32px 0px rgba(102, 94, 177, 0.37) inset;
border-radius: 10px;
margin-bottom: 14px;
border: 2px solid rgba(255, 255, 255, 0.14);
font-size: 14px;
align-items: center;
display: flex;
// justify-content: center;
padding: 12px 10px;
transition: all 0.5s ease;
cursor: pointer;
}
.addConversation:hover {
background-color: var(--hover-color);
}

22
app/components/home.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
"use client"; "use client";
require("../polyfill"); require("../polyfill");
@ -9,7 +10,7 @@ import styles from "./home.module.scss";
import SettingsIcon from "../icons/settings.svg"; import SettingsIcon from "../icons/settings.svg";
import GithubIcon from "../icons/github.svg"; import GithubIcon from "../icons/github.svg";
import ChatGptIcon from "../icons/chatgpt.svg"; import ChatGptIcon from "../icons/chatgpt1.svg";
import BotIcon from "../icons/bot.svg"; import BotIcon from "../icons/bot.svg";
import AddIcon from "../icons/add.svg"; import AddIcon from "../icons/add.svg";
@ -118,10 +119,10 @@ function _Home() {
className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`} className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
> >
<div className={styles["sidebar-header"]}> <div className={styles["sidebar-header"]}>
<div className={styles["sidebar-title"]}>ChatGPT Next</div> {/* <div className={styles["sidebar-title"]}>ChatBox</div>
<div className={styles["sidebar-sub-title"]}> <div className={styles["sidebar-sub-title"]}>
Build your own AI assistant. IMPROVE WITH AI.
</div> </div> */}
<div className={styles["sidebar-logo"]}> <div className={styles["sidebar-logo"]}>
<ChatGptIcon /> <ChatGptIcon />
</div> </div>
@ -134,6 +135,15 @@ function _Home() {
setShowSideBar(false); setShowSideBar(false);
}} }}
> >
<button
className={styles["addConversation"]}
onClick={() => {
createNewSession();
setShowSideBar(false);
}}
>
+ 创建新聊天
</button>
<ChatList /> <ChatList />
</div> </div>
@ -165,7 +175,7 @@ function _Home() {
</a> </a>
</div> </div>
</div> </div>
<div> {/* <div>
<IconButton <IconButton
icon={<AddIcon />} icon={<AddIcon />}
text={Locale.Home.NewChat} text={Locale.Home.NewChat}
@ -175,7 +185,7 @@ function _Home() {
}} }}
shadow shadow
/> />
</div> </div> */}
</div> </div>
</div> </div>

48
app/icons/chatgpt1.svg Normal file
View File

@ -0,0 +1,48 @@
<svg width="131" height="28" viewBox="0 0 131 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_1329_4973)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="#D0E0F3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint0_radial_1329_4973)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint1_radial_1329_4973)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint2_radial_1329_4973)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint3_radial_1329_4973)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint4_radial_1329_4973)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6155 12.2559V7.00469L16.5096 0L10.2551 3.61956L15.2062 6.51708L13.9778 7.30476L8.97983 4.36035L4.40381 7.01407L4.42256 21.0141L10.6958 24.6055V18.923L11.8961 19.6169V25.29L16.5847 28L28.6248 20.9672V13.6718L23.7488 16.5318V15.144L28.6155 12.2559ZM10.6585 10.6149L11.3243 10.2492L16.2567 13.0998L21.5078 10.1648L22.2955 10.6149V11.4026L17.3256 14.2907V20.1983L16.5098 20.7515L15.8722 20.3014V14.6471L10.6585 11.5995V10.6149ZM13.312 17.455L13.3214 17.4602H13.312V17.455ZM13.312 16.0255V17.455L8.16402 14.6189V20.2733L6.8231 19.5138L6.79496 8.46758L8.85792 7.23918L10.1238 8.02685L8.10776 9.24588L8.11713 12.978L13.312 16.0255ZM26.1869 18.0415V19.57L16.4722 25.1587L14.428 23.9491V22.4956L16.5097 23.6678L19.848 21.7361V15.7254L21.1045 14.9189L21.142 20.9672L26.1869 18.0415ZM16.2937 10.2304L21.4792 7.22977L24.7987 9.21771V11.6089L26.149 10.8118V8.4863L16.5094 2.89755L15.2247 3.64772L20.2039 6.52649L15.1403 9.51778L16.2937 10.2304Z" fill="url(#paint5_radial_1329_4973)"/>
</g>
<path d="M43.3159 8.77278C44.6238 8.77278 46.5659 9.34748 47.1802 9.56547L47.7748 7.02887C46.1101 6.53344 44.5049 6.27581 42.8006 6.27581C37.1726 6.27581 36.3006 10.6158 36.3006 13.628C36.3006 19.375 39.3524 21.3369 42.6421 21.3369C43.8708 21.3369 45.9318 21.2378 48.0522 20.7226L47.5171 18.2058C46.447 18.503 44.6635 18.8399 43.2564 18.8399C40.6208 18.8399 39.6299 16.7393 39.6299 13.6676C39.6299 10.3582 40.8982 8.77278 43.3159 8.77278ZM53.163 12.5182C53.7377 12.3993 54.7286 12.3201 55.224 12.3201C56.5914 12.3201 56.7896 13.7667 56.7896 15.2728V21H59.9603V15.0747C59.9603 11.4877 58.3353 9.86273 55.0853 9.86273C54.4115 9.86273 53.7575 9.92218 53.163 10.0213V5.83983H49.9923V21H53.163V12.5182ZM61.9752 17.4924C61.9752 20.3064 63.8182 21.3369 67.5042 21.3369C68.6932 21.3369 71.0911 21.1585 72.3 21V14.3811C72.3 10.695 69.8228 9.86273 67.1871 9.86273C66.0377 9.86273 64.8883 9.92218 62.8075 10.3582L63.3822 12.8155C65.5621 12.3201 66.2557 12.3201 67.088 12.3201C68.2176 12.3201 68.9508 12.6371 69.1094 13.7271H68.178C64.1551 13.7271 61.9752 14.5792 61.9752 17.4924ZM69.1292 18.8201C68.1978 18.8796 68.1582 18.8796 67.5042 18.8796C65.7603 18.8796 65.1459 18.4634 65.1459 17.4924C65.1459 16.5015 66.0972 16.1646 67.9402 16.1646C68.3365 16.1646 68.6932 16.1844 69.1292 16.2042V18.8201ZM74.9564 18.4436C74.9564 20.7424 76.4625 21.3369 78.3253 21.3369C79.2567 21.3369 80.525 21.1387 81.7141 20.9207L81.0799 18.4436C80.3863 18.6616 79.6134 18.8399 79.0387 18.8399C78.5037 18.8399 78.1271 18.7012 78.1271 17.7698V12.657H81.397V10.1996H78.1271V6.59289H74.9564V18.4436ZM83.9559 21H89.8812C94.8157 21 96.1633 19.3354 96.1633 16.7988C96.1633 14.9954 95.113 13.9649 94.0428 13.4893C94.677 12.9542 95.0733 12.1615 95.0733 10.7941C95.0733 7.82155 93.0916 6.59289 89.5047 6.59289H83.9559V21ZM87.2852 18.5228V14.9558H89.9209C91.4864 14.9558 92.834 15.4115 92.834 16.7591C92.834 17.8094 92.0017 18.5228 89.9209 18.5228H87.2852ZM87.2852 12.4786V9.07004H89.9209C90.8721 9.07004 91.744 9.46638 91.744 10.7941C91.744 12.0823 90.8919 12.4786 89.9209 12.4786H87.2852ZM97.7428 15.5899C97.7428 18.6418 98.7931 21.3369 103.232 21.3369C107.651 21.3369 108.702 18.6418 108.702 15.5899C108.702 12.6966 107.651 9.86273 103.232 9.86273C98.7931 9.86273 97.7428 12.6966 97.7428 15.5899ZM105.531 15.5899C105.531 17.0762 105.452 18.8796 103.232 18.8796C101.092 18.8796 100.914 17.0762 100.914 15.5899C100.914 14.1829 101.092 12.3201 103.232 12.3201C105.452 12.3201 105.531 14.1829 105.531 15.5899ZM115.318 17.1158L117.538 21H121.065L117.558 15.0747L120.748 10.1996H117.241L115.318 13.1722L113.396 10.1996H109.908L113.099 15.0747L109.591 21H113.119L115.318 17.1158Z" fill="white"/>
<defs>
<filter id="filter0_i_1329_4973" x="4.40381" y="0" width="24.2212" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="9.90861"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.82 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1329_4973"/>
</filter>
<radialGradient id="paint0_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3.43681 9.90114) rotate(22.1805) scale(32.5715 36.3025)">
<stop stop-color="#0066FF"/>
<stop offset="0.693301" stop-color="#004EFF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint1_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.40381 18.8973) rotate(11.1529) scale(18.1634 20.7996)">
<stop stop-color="#5666EF"/>
<stop offset="0.693301" stop-color="#5666EF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.2634 1.80988) rotate(123.663) scale(29.7399 28.385)">
<stop stop-color="#FF1C89"/>
<stop offset="0.565551" stop-color="#E566A3" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint3_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.2235 11.1255) rotate(146.182) scale(21.6158 23.0399)">
<stop stop-color="#B566E6"/>
<stop offset="0.776042" stop-color="#B566E6" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint4_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.0017) rotate(68.1368) scale(38.0853 13.0513)">
<stop stop-color="white" stop-opacity="0.46"/>
<stop offset="0.776042" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint5_radial_1329_4973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.0469 28) rotate(-74.1245) scale(16.1601 10.9987)">
<stop stop-color="white" stop-opacity="0.21"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
app/icons/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

74
app/styles/globals.scss
View File

@ -3,7 +3,7 @@
--white: white; --white: white;
--black: rgb(48, 48, 48); --black: rgb(48, 48, 48);
--gray: rgb(250, 250, 250); --gray: rgb(250, 250, 250);
--primary: rgb(29, 147, 171); --primary: rgba(78, 91, 246, 0.88);
--second: rgb(231, 248, 255); --second: rgb(231, 248, 255);
--hover-color: #f3f3f3; --hover-color: #f3f3f3;
--bar-color: rgba(0, 0, 0, 0.1); --bar-color: rgba(0, 0, 0, 0.1);
@ -19,13 +19,13 @@
@mixin dark { @mixin dark {
/* color */ /* color */
--white: rgb(30, 30, 30); --white: #040415;
--black: rgb(187, 187, 187); --black: rgb(255, 255, 255);
--gray: rgb(21, 21, 21); --gray: rgb(21, 21, 21);
--primary: rgb(29, 147, 171); --primary: rgba(78, 91, 246, 0.88);
--second: rgb(27 38 42); --second: #1D1D2C;
--hover-color: #323232; --hover-color: #040415;
--text: #AEB9CA;
--bar-color: rgba(255, 255, 255, 0.1); --bar-color: rgba(255, 255, 255, 0.1);
--border-in-light: 1px solid rgba(255, 255, 255, 0.192); --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
@ -52,14 +52,13 @@
--window-height: 90vh; --window-height: 90vh;
--sidebar-width: 300px; --sidebar-width: 300px;
--window-content-width: calc(100% - var(--sidebar-width)); --window-content-width: calc(100% - var(--sidebar-width));
--message-max-width: 80%; --message-max-width: 100%;
--full-height: 100%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
:root { :root {
--window-width: 100vw; --window-width: 100vw;
--window-height: var(--full-height); --window-height: 100vh;
--sidebar-width: 100vw; --sidebar-width: 100vw;
--window-content-width: var(--window-width); --window-content-width: var(--window-width);
--message-max-width: 100%; --message-max-width: 100%;
@ -75,22 +74,19 @@
@include dark; @include dark;
} }
} }
html {
height: var(--full-height);
}
body { body {
background-color: var(--gray); background-color: var(--gray);
color: var(--black); color: var(--black);
margin: 0; margin: 0;
padding: 0; padding: 0;
height: var(--full-height); height: 100vh;
width: 100vw; width: 100vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
user-select: none; user-select: none;
font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", font-family: sans-serif, "SF Pro SC", "SF Pro Text", "SF Pro Icons",
"PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
@ -99,7 +95,7 @@ body {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
--bar-width: 5px; --bar-width: 4px;
width: var(--bar-width); width: var(--bar-width);
height: var(--bar-width); height: var(--bar-width);
} }
@ -117,21 +113,12 @@ body {
select { select {
border: var(--border-in-light); border: var(--border-in-light);
padding: 10px; padding: 8px 10px;
border-radius: 10px; border-radius: 10px;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black);
text-align: center;
}
label {
cursor: pointer;
}
input {
text-align: center;
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -188,12 +175,11 @@ input[type="range"]::-webkit-slider-thumb:hover {
} }
input[type="number"], input[type="number"],
input[type="text"], input[type="text"] {
input[type="password"] {
appearance: none; appearance: none;
border-radius: 10px; border-radius: 10px;
border: var(--border-in-light); border: var(--border-in-light);
min-height: 36px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
background: var(--white); background: var(--white);
color: var(--black); color: var(--black);
@ -210,7 +196,7 @@ div.math {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: var(--full-height); height: 100vh;
width: 100vw; width: 100vw;
background-color: rgba($color: #000000, $alpha: 0.5); background-color: rgba($color: #000000, $alpha: 0.5);
display: flex; display: flex;
@ -240,7 +226,6 @@ pre {
.copy-code-button { .copy-code-button {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 1em;
cursor: pointer; cursor: pointer;
padding: 0px 5px; padding: 0px 5px;
background-color: var(--black); background-color: var(--black);
@ -261,30 +246,3 @@ pre {
} }
} }
} }
.clickable {
cursor: pointer;
div:not(.no-dark) > svg {
filter: invert(0.5);
}
&:hover {
filter: brightness(0.9);
}
}
.error {
width: 80%;
border-radius: 20px;
border: var(--border-in-light);
box-shadow: var(--card-shadow);
padding: 20px;
overflow: auto;
background-color: var(--white);
color: var(--black);
pre {
overflow: auto;
}
}

34
app/styles/markdown.scss
View File

@ -76,7 +76,7 @@
--color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
--color-fg-default: #c9d1d9; --color-fg-default: #ffffff;
--color-fg-muted: #8b949e; --color-fg-muted: #8b949e;
--color-fg-subtle: #6e7681; --color-fg-subtle: #6e7681;
--color-canvas-default: transparent; --color-canvas-default: transparent;
@ -317,7 +317,7 @@
cursor: pointer; cursor: pointer;
} }
.markdown-body details:not([open]) > *:not(summary) { .markdown-body details:not([open])>*:not(summary) {
display: none !important; display: none !important;
} }
@ -487,11 +487,11 @@
content: ""; content: "";
} }
.markdown-body > *:first-child { .markdown-body>*:first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
.markdown-body > *:last-child { .markdown-body>*:last-child {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@ -527,11 +527,11 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.markdown-body blockquote > :first-child { .markdown-body blockquote> :first-child {
margin-top: 0; margin-top: 0;
} }
.markdown-body blockquote > :last-child { .markdown-body blockquote> :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -630,7 +630,7 @@
list-style-type: decimal; list-style-type: decimal;
} }
.markdown-body div > ol:not([type]) { .markdown-body div>ol:not([type]) {
list-style-type: decimal; list-style-type: decimal;
} }
@ -642,11 +642,11 @@
margin-bottom: 0; margin-bottom: 0;
} }
.markdown-body li > p { .markdown-body li>p {
margin-top: 16px; margin-top: 16px;
} }
.markdown-body li + li { .markdown-body li+li {
margin-top: 0.25em; margin-top: 0.25em;
} }
@ -709,7 +709,7 @@
overflow: hidden; overflow: hidden;
} }
.markdown-body span.frame > span { .markdown-body span.frame>span {
display: block; display: block;
float: left; float: left;
width: auto; width: auto;
@ -737,7 +737,7 @@
clear: both; clear: both;
} }
.markdown-body span.align-center > span { .markdown-body span.align-center>span {
display: block; display: block;
margin: 13px auto 0; margin: 13px auto 0;
overflow: hidden; overflow: hidden;
@ -755,7 +755,7 @@
clear: both; clear: both;
} }
.markdown-body span.align-right > span { .markdown-body span.align-right>span {
display: block; display: block;
margin: 13px 0 0; margin: 13px 0 0;
overflow: hidden; overflow: hidden;
@ -785,7 +785,7 @@
overflow: hidden; overflow: hidden;
} }
.markdown-body span.float-right > span { .markdown-body span.float-right>span {
display: block; display: block;
margin: 13px auto 0; margin: 13px auto 0;
overflow: hidden; overflow: hidden;
@ -819,7 +819,7 @@
font-size: 100%; font-size: 100%;
} }
.markdown-body pre > code { .markdown-body pre>code {
padding: 0; padding: 0;
margin: 0; margin: 0;
word-break: normal; word-break: normal;
@ -1082,7 +1082,7 @@
cursor: pointer; cursor: pointer;
} }
.markdown-body .task-list-item + .task-list-item { .markdown-body .task-list-item+.task-list-item {
margin-top: 4px; margin-top: 4px;
} }
@ -1104,9 +1104,7 @@
} }
.markdown-body .contains-task-list:hover .task-list-item-convert-container, .markdown-body .contains-task-list:hover .task-list-item-convert-container,
.markdown-body .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
.contains-task-list:focus-within
.task-list-item-convert-container {
display: block; display: block;
width: auto; width: auto;
height: 24px; height: 24px;

8095
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -24,6 +24,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-markdown": "^8.0.5", "react-markdown": "^8.0.5",
"react-textarea-autosize": "^8.4.1",
"rehype-highlight": "^6.0.0", "rehype-highlight": "^6.0.0",
"rehype-katex": "^6.0.2", "rehype-katex": "^6.0.2",
"remark-breaks": "^3.0.2", "remark-breaks": "^3.0.2",

1547
yarn.lock
View File

File diff suppressed because it is too large Load Diff