Skip to content

Commit

Permalink
feat: Rename "Mask" to "Template"
Browse files Browse the repository at this point in the history
  • Loading branch information
@Neet-Nestor
Neet-Nestor committed May 20, 2024
1 parent de0a5fa commit 24f8138
Show file tree
Hide file tree
Showing 42 changed files with 510 additions and 641 deletions.
4 changes: 2 additions & 2 deletions app/command.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ type Command = (param: string) => void;
interface Commands {
fill?: Command;
submit?: Command;
mask?: Command;
template?: Command;
}

export function useCommand(commands: Commands = {}) {
Expand All @@ -32,7 +32,7 @@ export function useCommand(commands: Commands = {}) {

interface ChatCommands {
new?: Command;
newm?: Command;
newt?: Command;
next?: Command;
prev?: Command;
clear?: Command;
Expand Down
14 changes: 7 additions & 7 deletions app/components/chat-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import { useChatStore } from "../store";
import Locale from "../locales";
import { useLocation, useNavigate } from "react-router-dom";
import { Path } from "../constant";
import { MaskAvatar } from "./mask";
import { Mask } from "../store/mask";
import { TemplateAvatar } from "./template";
import { Template } from "../store/template";
import { useRef, useEffect } from "react";
import { showConfirm } from "./ui-lib";
import { useMobileScreen } from "../utils";
Expand All @@ -30,7 +30,7 @@ export function ChatItem(props: {
id: string;
index: number;
narrow?: boolean;
mask: Mask;
template: Template;
}) {
const draggableRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
Expand Down Expand Up @@ -65,9 +65,9 @@ export function ChatItem(props: {
{props.narrow ? (
<div className={styles["chat-item-narrow"]}>
<div className={styles["chat-item-avatar"] + " no-dark"}>
<MaskAvatar
avatar={props.mask.avatar}
model={props.mask.modelConfig.model}
<TemplateAvatar
avatar={props.template.avatar}
model={props.template.modelConfig.model}
/>
</div>
<div className={styles["chat-item-narrow-count"]}>
Expand Down Expand Up @@ -162,7 +162,7 @@ export function ChatList(props: { narrow?: boolean }) {
}
}}
narrow={props.narrow}
mask={item.mask}
template={item.template}
/>
))}
{provided.placeholder}
Expand Down
4 changes: 2 additions & 2 deletions app/components/chat.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
background-position: center;
background-color: var(--white);

.attach-image-mask {
.attach-image-template {
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.2s;
}

.attach-image-mask:hover {
.attach-image-template:hover {
opacity: 1;
}

Expand Down
81 changes: 44 additions & 37 deletions app/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import CopyIcon from "../icons/copy.svg";
import LoadingIcon from "../icons/three-dots.svg";
import LoadingButtonIcon from "../icons/loading.svg";
import PromptIcon from "../icons/prompt.svg";
import MaskIcon from "../icons/mask.svg";
import TemplateIcon from "../icons/chat.svg";
import MaxIcon from "../icons/max.svg";
import MinIcon from "../icons/min.svg";
import ResetIcon from "../icons/reload.svg";
Expand Down Expand Up @@ -89,8 +89,8 @@ import {
UNFINISHED_INPUT,
} from "../constant";
import { Avatar } from "./emoji";
import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
import { useMaskStore } from "../store/mask";
import { ContextPrompts, TemplateAvatar, TemplateConfig } from "./template";
import { useTemplateStore } from "../store/template";
import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
import { prettyObject } from "../utils/format";
import { ExportMessageModal } from "./exporter";
Expand All @@ -106,11 +106,11 @@ const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
export function SessionConfigModel(props: { onClose: () => void }) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const maskStore = useMaskStore();
const templateStore = useTemplateStore();
const navigate = useNavigate();

return (
<div className="modal-mask">
<div className="modal-template">
<Modal
title={Locale.Context.Edit}
onClose={() => props.onClose()}
Expand All @@ -134,23 +134,25 @@ export function SessionConfigModel(props: { onClose: () => void }) {
bordered
text={Locale.Chat.Config.SaveAs}
onClick={() => {
navigate(Path.Masks);
navigate(Path.Templates);
setTimeout(() => {
maskStore.create(session.mask);
templateStore.create(session.template);
}, 500);
}}
/>,
]}
>
<MaskConfig
mask={session.mask}
updateMask={(updater) => {
const mask = { ...session.mask };
updater(mask);
chatStore.updateCurrentSession((session) => (session.mask = mask));
<TemplateConfig
template={session.template}
updateTemplate={(updater) => {
const template = { ...session.template };
updater(template);
chatStore.updateCurrentSession(
(session) => (session.template = template),
);
}}
extraListItems={
session.mask.modelConfig.sendMemory ? (
session.template.modelConfig.sendMemory ? (
<ListItem
className="copyable"
title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
Expand All @@ -160,7 +162,7 @@ export function SessionConfigModel(props: { onClose: () => void }) {
<></>
)
}
></MaskConfig>
></TemplateConfig>
</Modal>
</div>
);
Expand All @@ -173,7 +175,7 @@ function PromptToast(props: {
}) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const context = session.mask.context;
const context = session.template.context;

return (
<div className={styles["prompt-toast"]} key="prompt-toast">
Expand Down Expand Up @@ -455,7 +457,7 @@ export function ChatActions(props: {
}

// switch model
const currentModel = chatStore.currentSession().mask.modelConfig.model;
const currentModel = chatStore.currentSession().template.modelConfig.model;
const allModels = useAllModels();
const models = useMemo(() => {
const defaultModel = allModels.find((m) => m.is_default);
Expand Down Expand Up @@ -489,7 +491,7 @@ export function ChatActions(props: {
models.find((model) => model.is_default) || models[0]
).name;
chatStore.updateCurrentSession(
(session) => (session.mask.modelConfig.model = nextModel),
(session) => (session.template.modelConfig.model = nextModel),
);
showToast(nextModel);
}
Expand Down Expand Up @@ -543,10 +545,10 @@ export function ChatActions(props: {

<ChatAction
onClick={() => {
navigate(Path.Masks);
navigate(Path.Templates);
}}
text={Locale.Chat.InputActions.Masks}
icon={<MaskIcon />}
text={Locale.Chat.InputActions.Templates}
icon={<TemplateIcon />}
/>

<ChatAction
Expand Down Expand Up @@ -582,8 +584,8 @@ export function ChatActions(props: {
onSelection={(s) => {
if (s.length === 0) return;
chatStore.updateCurrentSession((session) => {
session.mask.modelConfig.model = s[0] as ModelType;
session.mask.syncGlobalConfig = false;
session.template.modelConfig.model = s[0] as ModelType;
session.template.syncGlobalConfig = false;
});
config.updateModelConfig({ model: s[0] as ModelType });
showToast(s[0]);
Expand All @@ -600,7 +602,7 @@ export function EditMessageModal(props: { onClose: () => void }) {
const [messages, setMessages] = useState(session.messages.slice());

return (
<div className="modal-mask">
<div className="modal-template">
<Modal
title={Locale.Chat.EditMessage.Title}
onClose={props.onClose}
Expand Down Expand Up @@ -834,10 +836,13 @@ function _Chat() {
}
});

// auto sync mask config from global config
if (session.mask.syncGlobalConfig) {
console.log("[Mask] syncing from global, name = ", session.mask.name);
session.mask.modelConfig = { ...config.modelConfig };
// auto sync template config from global config
if (session.template.syncGlobalConfig) {
console.log(
"[Template] syncing from global, name = ",
session.template.name,
);
session.template.modelConfig = { ...config.modelConfig };
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down Expand Up @@ -942,7 +947,7 @@ function _Chat() {

const onPinMessage = (message: ChatMessage) => {
chatStore.updateCurrentSession((session) =>
session.mask.context.push(message),
session.template.context.push(message),
);

showToast(Locale.Chat.Actions.PinToastContent, {
Expand All @@ -954,8 +959,8 @@ function _Chat() {
};

const context: RenderMessage[] = useMemo(() => {
return session.mask.hideContext ? [] : session.mask.context.slice();
}, [session.mask.context, session.mask.hideContext]);
return session.template.hideContext ? [] : session.template.context.slice();
}, [session.template.context, session.template.hideContext]);

if (
context.length === 0 &&
Expand Down Expand Up @@ -1088,7 +1093,8 @@ function _Chat() {

const handlePaste = useCallback(
async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
const currentModel = chatStore.currentSession().mask.modelConfig.model;
const currentModel =
chatStore.currentSession().template.modelConfig.model;
if (!isVisionModel(currentModel)) {
return;
}
Expand Down Expand Up @@ -1279,10 +1285,11 @@ function _Chat() {
{["system"].includes(message.role) ? (
<Avatar avatar="2699-fe0f" />
) : (
<MaskAvatar
avatar={session.mask.avatar}
<TemplateAvatar
avatar={session.template.avatar}
model={
message.model || session.mask.modelConfig.model
message.model ||
session.template.modelConfig.model
}
/>
)}
Expand Down Expand Up @@ -1326,7 +1333,7 @@ function _Chat() {
}
}
chatStore.updateCurrentSession((session) => {
const m = session.mask.context
const m = session.template.context
.concat(session.messages)
.find((m) => m.id === message.id);
if (m) {
Expand Down Expand Up @@ -1500,7 +1507,7 @@ function _Chat() {
className={styles["attach-image"]}
style={{ backgroundImage: `url("${image}")` }}
>
<div className={styles["attach-image-mask"]}>
<div className={styles["attach-image-template"]}>
<DeleteImageButton
deleteImage={() => {
setAttachImages(
Expand Down
16 changes: 8 additions & 8 deletions app/components/exporter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import dynamic from "next/dynamic";
import NextImage from "next/image";

import { toBlob, toPng } from "html-to-image";
import { DEFAULT_MASK_AVATAR } from "../store/mask";
import { DEFAULT_TEMPLATE_AVATAR } from "../store/template";

import { prettyObject } from "../utils/format";
import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
Expand All @@ -46,7 +46,7 @@ const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {

export function ExportMessageModal(props: { onClose: () => void }) {
return (
<div className="modal-mask">
<div className="modal-template">
<Modal
title={Locale.Export.Title}
onClose={props.onClose}
Expand Down Expand Up @@ -168,14 +168,14 @@ export function MessageExporter() {
const selectedMessages = useMemo(() => {
const ret: ChatMessage[] = [];
if (exportConfig.includeContext) {
ret.push(...session.mask.context);
ret.push(...session.template.context);
}
ret.push(...session.messages.filter((m) => selection.has(m.id)));
return ret;
}, [
exportConfig.includeContext,
session.messages,
session.mask.context,
session.template.context,
selection,
]);
function preview() {
Expand Down Expand Up @@ -432,7 +432,7 @@ export function PreviewActions(props: {
}

function ExportAvatar(props: { avatar: string }) {
if (props.avatar === DEFAULT_MASK_AVATAR) {
if (props.avatar === DEFAULT_TEMPLATE_AVATAR) {
return (
<div className="bot-avatar no-dark">
<MlcIcon />
Expand All @@ -449,7 +449,7 @@ export function ImagePreviewer(props: {
}) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const mask = session.mask;
const template = session.template;
const config = useAppConfig();

const previewRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -533,7 +533,7 @@ export function ImagePreviewer(props: {
</div>
<div>
<div className={styles["chat-info-item"]}>
{Locale.Exporter.Model}: {mask.modelConfig.model}
{Locale.Exporter.Model}: {template.modelConfig.model}
</div>
<div className={styles["chat-info-item"]}>
{Locale.Exporter.Messages}: {props.messages.length}
Expand All @@ -557,7 +557,7 @@ export function ImagePreviewer(props: {
>
{m.role !== "user" && (
<div className={styles["avatar"]}>
<ExportAvatar avatar={mask.avatar} />
<ExportAvatar avatar={template.avatar} />
</div>
)}

Expand Down
Loading

0 comments on commit 24f8138

Please sign in to comment.