klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make loading message, styling configurable. Do not show agent when no data

Browse Source 
- Pass Loading message, class name via props to both inline and normal
  loading spinners
- Pass loading conversation message to loading spinner when chat
  history is being fetched
This commit is contained in:
Debanjum Singh Solanky
2024-07-14 12:58:29 +05:30
parent 63719747cb
commit c2bf405489
2 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/interface/web/app/components/chatHistory/chatHistory.tsx
View File

@@ -247,7 +247,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
<div ref={ref}>
<div className={styles.chatHistory} ref={chatHistoryRef}>
<div ref={sentinelRef} style={{ height: '1px' }}>
{fetchingData && <InlineLoading />}
{fetchingData && <InlineLoading message="Loading Conversation" className='opacity-50'/>}
</div>
{(data && data.chat) && data.chat.map((chatMessage, index) => (
<ChatMessage
@@ -328,16 +328,18 @@ export default function ChatHistory(props: ChatHistoryProps) {
isLastMessage={true}
/>
}
<div className={`${styles.agentIndicator} pb-4`}>
<div className="relative group mx-2 cursor-pointer">
<ProfileCard
name={constructAgentName()}
link={constructAgentLink()}
avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
description={constructAgentPersona()}
/>
{data &&
<div className={`${styles.agentIndicator} pb-4`}>
<div className="relative group mx-2 cursor-pointer">
<ProfileCard
name={constructAgentName()}
link={constructAgentLink()}
avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
description={constructAgentPersona()}
/>
</div>
</div>
</div>
}
</div>
</div>
</ScrollArea>

19
src/interface/web/app/components/loading/loading.tsx
View File

@@ -1,22 +1,23 @@
import { CircleNotch } from '@phosphor-icons/react';
export default function Loading() {
interface LoadingProps {
className?: string;
message?: string;
}
export default function Loading(props: LoadingProps) {
return (
// NOTE: We can display usage tips here for casual learning moments.
<div className={`bg-background opacity-50 flex items-center justify-center h-screen`}>
<div>Loading <span><CircleNotch className={`inline animate-spin h-5 w-5`} /></span></div>
<div className={props.className || "bg-background opacity-50 flex items-center justify-center h-screen"}>
<div>{props.message || "Loading" } <span><CircleNotch className="inline animate-spin h-5 w-5" /></span></div>
</div>
);
}
interface InlineLoadingProps {
className?: string;
}
export function InlineLoading(props: InlineLoadingProps) {
export function InlineLoading(props: LoadingProps) {
return (
<button className={`${props.className}`}>
<CircleNotch className={`animate-spin h-5 w-5 mt-3 mr-3`} />
<span>{props.message} <CircleNotch className="inline animate-spin h-5 w-5 mx-3" /></span>
</button>
)
}