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

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

@ -34,16 +34,8 @@ const InputToolbar: React.FC = () => {
return ( return (
<Fragment> <Fragment>
<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"> <div className="h-6 space-x-5">
{currentConvoState?.waitingForResponse === true && ( {currentConvoState?.error && (
<div className="ml-1 my-2" key="indicator">
<LoadingIndicator />
</div>
)}
{!currentConvoState?.waitingForResponse &&
currentConvoState?.error && (
<div className="flex flex-row justify-center"> <div className="flex flex-row justify-center">
<span className="mx-5 my-2 text-red-500 text-sm"> <span className="mx-5 my-2 text-red-500 text-sm">
{currentConvoState?.error?.toString()} {currentConvoState?.error?.toString()}
@ -51,6 +43,7 @@ const InputToolbar: React.FC = () => {
</div> </div>
)} )}
</div> </div>
<div className="flex justify-center gap-2 my-5">
{/* <SecondaryButton title="Regenerate" onClick={onRegenerateClick} /> */} {/* <SecondaryButton title="Regenerate" onClick={onRegenerateClick} /> */}
<SecondaryButton <SecondaryButton
onClick={onNewConversationClick} 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 { getMessageCode } from "@/_utils/message";
import Image from "next/image"; import Image from "next/image";
import { MessageSenderType } from "@/_models/ChatMessage"; import { MessageSenderType } from "@/_models/ChatMessage";
import LoadingIndicator from "../LoadingIndicator";
type Props = { type Props = {
avatarUrl: string; avatarUrl: string;
@ -13,6 +14,17 @@ type Props = {
text?: string; 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> = ({ const SimpleTextMessage: React.FC<Props> = ({
senderName, senderName,
createdAt, createdAt,
@ -43,15 +55,10 @@ const SimpleTextMessage: React.FC<Props> = ({
{displayDate(createdAt)} {displayDate(createdAt)}
</div> </div>
</div> </div>
{text.includes("```") ? ( {text === "" ? (
getMessageCode(text).map((item, i) => ( <LoadingIndicator />
<div className="flex gap-1 flex-col" key={i}> ) : text.includes("```") ? (
<p className="leading-[20px] whitespace-break-spaces text-sm font-normal dark:text-[#d1d5db]"> renderMessageCode(text)
{item.text}
</p>
{item.code.trim().length > 0 && <TextCode text={item.code} />}
</div>
))
) : ( ) : (
<span className="text-sm leading-loose font-normal">{text}</span> <span className="text-sm leading-loose font-normal">{text}</span>
)} )}