Skip to content

Commit

Permalink
feat: Simplify the UI by removing buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Neet-Nestor
Neet-Nestor committed May 20, 2024
1 parent 92a3a30 commit 51ceaac
Show file tree
Hide file tree
Showing 6 changed files with 21 additions and 215 deletions.
2 changes: 1 addition & 1 deletion app/components/chat.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
}

&.full-width {
width: fit-content;
max-width: fit-content;

.text {
opacity: 1;
Expand Down
191 changes: 4 additions & 187 deletions app/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import React, {
} from "react";

import SendWhiteIcon from "../icons/send-white.svg";
import BrainIcon from "../icons/brain.svg";
import RenameIcon from "../icons/rename.svg";
import ExportIcon from "../icons/share.svg";
import ReturnIcon from "../icons/return.svg";
Expand Down Expand Up @@ -76,7 +75,6 @@ import {
ListItem,
Modal,
Selector,
showConfirm,
showPrompt,
showToast,
} from "./ui-lib";
Expand All @@ -90,7 +88,6 @@ import {
} from "../constant";
import { Avatar } from "./emoji";
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 @@ -103,101 +100,6 @@ const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
loading: () => <LoadingIcon />,
});

export function SessionConfigModel(props: { onClose: () => void }) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const templateStore = useTemplateStore();
const navigate = useNavigate();

return (
<div className="modal-template">
<Modal
title={Locale.Context.Edit}
onClose={() => props.onClose()}
actions={[
<IconButton
key="reset"
icon={<ResetIcon />}
bordered
text={Locale.Chat.Config.Reset}
onClick={async () => {
if (await showConfirm(Locale.Memory.ResetConfirm)) {
chatStore.updateCurrentSession(
(session) => (session.memoryPrompt = ""),
);
}
}}
/>,
<IconButton
key="copy"
icon={<CopyIcon />}
bordered
text={Locale.Chat.Config.SaveAs}
onClick={() => {
navigate(Path.Templates);
setTimeout(() => {
templateStore.create(session.template);
}, 500);
}}
/>,
]}
>
<TemplateConfig
template={session.template}
updateTemplate={(updater) => {
const template = { ...session.template };
updater(template);
chatStore.updateCurrentSession(
(session) => (session.template = template),
);
}}
extraListItems={
session.template.modelConfig.sendMemory ? (
<ListItem
className="copyable"
title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
></ListItem>
) : (
<></>
)
}
></TemplateConfig>
</Modal>
</div>
);
}

function PromptToast(props: {
showToast?: boolean;
showModal?: boolean;
setShowModal: (_: boolean) => void;
}) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const context = session.template.context;

return (
<div className={styles["prompt-toast"]} key="prompt-toast">
{props.showToast && (
<div
className={styles["prompt-toast-inner"] + " clickable"}
role="button"
onClick={() => props.setShowModal(true)}
>
<BrainIcon />
<span className={styles["prompt-toast-content"]}>
{Locale.Context.Toast(context.length)}
</span>
</div>
)}
{props.showModal && (
<SessionConfigModel onClose={() => props.setShowModal(false)} />
)}
</div>
);
}

function useSubmitHandler() {
const config = useAppConfig();
const submitKey = config.submitKey;
Expand Down Expand Up @@ -446,18 +348,8 @@ export function ChatActions(props: {
const navigate = useNavigate();
const chatStore = useChatStore();

// switch themes
const theme = config.theme;
function nextTheme() {
const themes = [Theme.Auto, Theme.Light, Theme.Dark];
const themeIndex = themes.indexOf(theme);
const nextIndex = (themeIndex + 1) % themes.length;
const nextTheme = themes[nextIndex];
config.update((config) => (config.theme = nextTheme));
}

// switch model
const currentModel = chatStore.currentSession().template.modelConfig.model;
const currentModel = config.modelConfig.model;
const allModels = useAllModels();
const models = useMemo(() => {
const defaultModel = allModels.find((m) => m.is_default);
Expand All @@ -482,75 +374,22 @@ export function ChatActions(props: {
props.setAttachImages([]);
props.setUploading(false);
}
// if current model is not available
// switch to first available model
const isUnavaliableModel = !models.some((m) => m.name === currentModel);
if (isUnavaliableModel && models.length > 0) {
// show next model to default model if exist
let nextModel: ModelType = (
models.find((model) => model.is_default) || models[0]
).name;
chatStore.updateCurrentSession(
(session) => (session.template.modelConfig.model = nextModel),
);
showToast(nextModel);
}
}, [chatStore, currentModel, models]);

return (
<div className={styles["chat-input-actions"]}>
{!props.hitBottom && (
<ChatAction
onClick={props.scrollToBottom}
text={Locale.Chat.InputActions.ToBottom}
icon={<BottomIcon />}
/>
)}
{props.hitBottom && (
<ChatAction
onClick={props.showPromptModal}
text={Locale.Chat.InputActions.Settings}
icon={<SettingsIcon />}
/>
)}

{showUploadImage && (
<ChatAction
onClick={props.uploadImage}
text={Locale.Chat.InputActions.UploadImage}
icon={props.uploading ? <LoadingButtonIcon /> : <ImageIcon />}
/>
)}
<ChatAction
onClick={nextTheme}
text={Locale.Chat.InputActions.Theme[theme]}
icon={
<>
{theme === Theme.Auto ? (
<AutoIcon />
) : theme === Theme.Light ? (
<LightIcon />
) : theme === Theme.Dark ? (
<DarkIcon />
) : null}
</>
}
/>

<ChatAction
onClick={props.showPromptHints}
text={Locale.Chat.InputActions.Prompt}
icon={<PromptIcon />}
/>

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

<ChatAction
text={Locale.Chat.InputActions.Clear}
icon={<BreakIcon />}
Expand Down Expand Up @@ -583,10 +422,6 @@ export function ChatActions(props: {
onClose={() => setShowModelSelector(false)}
onSelection={(s) => {
if (s.length === 0) return;
chatStore.updateCurrentSession((session) => {
session.template.modelConfig.model = s[0] as ModelType;
session.template.syncGlobalConfig = false;
});
config.updateModelConfig({ model: s[0] as ModelType });
showToast(s[0]);
}}
Expand Down Expand Up @@ -836,15 +671,7 @@ function _Chat() {
}
}
});

// 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 };
}
session.messages.filter((m) => m.content.length > 0);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Expand Down Expand Up @@ -1094,8 +921,7 @@ function _Chat() {

const handlePaste = useCallback(
async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
const currentModel =
chatStore.currentSession().template.modelConfig.model;
const currentModel = config.modelConfig.model;
if (!isVisionModel(currentModel)) {
return;
}
Expand Down Expand Up @@ -1242,12 +1068,6 @@ function _Chat() {
</div>
)}
</div>

<PromptToast
showToast={!hitBottom}
showModal={showPromptModal}
setShowModal={setShowPromptModal}
/>
</div>

<div
Expand Down Expand Up @@ -1288,10 +1108,7 @@ function _Chat() {
) : (
<TemplateAvatar
avatar={session.template.avatar}
model={
message.model ||
session.template.modelConfig.model
}
model={message.model || config.modelConfig.model}
/>
)}
</>
Expand Down
8 changes: 7 additions & 1 deletion app/components/ui-lib.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,11 +218,17 @@ export function Toast(props: ToastProps) {
export function showToast(
content: string,
action?: ToastProps["action"],
parent?: HTMLElement,
delay = 3000,
) {
const div = document.createElement("div");
div.className = styles.show;
document.body.appendChild(div);

if (parent) {
parent.appendChild(div);
} else {
document.body.appendChild(div);
}

const root = createRoot(div);
const close = () => {
Expand Down
17 changes: 5 additions & 12 deletions app/store/chat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,15 +180,8 @@ export const useChatStore = createPersistStore(
const session = createEmptySession();

if (template) {
const config = useAppConfig.getState();
const globalModelConfig = config.modelConfig;

session.template = {
...template,
modelConfig: {
...globalModelConfig,
...template.modelConfig,
},
};
session.topic = template.name;
}
Expand Down Expand Up @@ -288,7 +281,7 @@ export const useChatStore = createPersistStore(
attachImages?: string[],
) {
const session = get().currentSession();
const modelConfig = session.template.modelConfig;
const modelConfig = useAppConfig.getState().modelConfig;

const userContent = fillTemplateWith(content, modelConfig);
console.log("[User Input] after template: ", userContent);
Expand Down Expand Up @@ -420,7 +413,7 @@ export const useChatStore = createPersistStore(

getMessagesWithMemory() {
const session = get().currentSession();
const modelConfig = session.template.modelConfig;
const modelConfig = useAppConfig.getState().modelConfig;
const clearContextIndex = session.clearContextIndex ?? 0;
const messages = session.messages.slice();
const totalMessageCount = session.messages.length;
Expand Down Expand Up @@ -525,7 +518,7 @@ export const useChatStore = createPersistStore(
summarizeSession(webllm: WebLLMApi) {
const config = useAppConfig.getState();
const session = get().currentSession();
const modelConfig = session.template.modelConfig;
const modelConfig = useAppConfig.getState().modelConfig;

// remove error messages if any
const messages = session.messages;
Expand All @@ -546,7 +539,7 @@ export const useChatStore = createPersistStore(
webllm.chat({
messages: topicMessages,
config: {
model: session.template.modelConfig.model,
model: modelConfig.model,
cache: useAppConfig.getState().cacheType,
stream: false,
},
Expand Down Expand Up @@ -630,7 +623,7 @@ export const useChatStore = createPersistStore(
config: {
...modelcfg,
stream: true,
model: session.template.modelConfig.model,
model: modelConfig.model,
cache: useAppConfig.getState().cacheType,
},
onUpdate(message) {
Expand Down
Loading

0 comments on commit 51ceaac

Please sign in to comment.