Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: loading indicator appears in ai reply

Browse Source
This commit is contained in:
0xSage 2023-10-13 15:52:30 +08:00
parent 0180937262
commit 69e26c39a1
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/app/_components/InputToolbar/index.tsx
View File

@ -34,23 +34,16 @@ const InputToolbar: React.FC = () => {
return (
<Fragment>
<div className="h-6 space-x-5">
{currentConvoState?.error && (
<div className="flex flex-row justify-center">
<span className="mx-5 my-2 text-red-500 text-sm">
{currentConvoState?.error?.toString()}
</span>
</div>
)}
</div>
<div className="flex justify-center gap-2 my-5">
{/* TODO: take loading out of input toolbar and into response */}
<div className="h-6 space-x-5">
{currentConvoState?.waitingForResponse === true && (
<div className="ml-1 my-2" key="indicator">
<LoadingIndicator />
</div>
)}
{!currentConvoState?.waitingForResponse &&
currentConvoState?.error && (
<div className="flex flex-row justify-center">
<span className="mx-5 my-2 text-red-500 text-sm">
{currentConvoState?.error?.toString()}
</span>
</div>
)}
</div>
{/* <SecondaryButton title="Regenerate" onClick={onRegenerateClick} /> */}
<SecondaryButton
onClick={onNewConversationClick}

25
web/app/_components/SimpleTextMessage/index.tsx
View File

@ -4,6 +4,7 @@ import { TextCode } from "../TextCode";
import { getMessageCode } from "@/_utils/message";
import Image from "next/image";
import { MessageSenderType } from "@/_models/ChatMessage";
import LoadingIndicator from "../LoadingIndicator";
type Props = {
avatarUrl: string;
@ -13,6 +14,17 @@ type Props = {
text?: string;
};
const renderMessageCode = (text: string) => {
return getMessageCode(text).map((item, i) => (
<div className="flex gap-1 flex-col" key={i}>
<p className="leading-[20px] whitespace-break-spaces text-sm font-normal dark:text-[#d1d5db]">
{item.text}
</p>
{item.code.trim().length > 0 && <TextCode text={item.code} />}
</div>
));
};
const SimpleTextMessage: React.FC<Props> = ({
senderName,
createdAt,
@ -43,15 +55,10 @@ const SimpleTextMessage: React.FC<Props> = ({
{displayDate(createdAt)}
</div>
</div>
{text.includes("```") ? (
getMessageCode(text).map((item, i) => (
<div className="flex gap-1 flex-col" key={i}>
<p className="leading-[20px] whitespace-break-spaces text-sm font-normal dark:text-[#d1d5db]">
{item.text}
</p>
{item.code.trim().length > 0 && <TextCode text={item.code} />}
</div>
))
{text === "" ? (
<LoadingIndicator />
) : text.includes("```") ? (
renderMessageCode(text)
) : (
<span className="text-sm leading-loose font-normal">{text}</span>
)}