klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 13:23:15 +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 ref={ref}>
<div className={styles.chatHistory} ref={chatHistoryRef}> <div className={styles.chatHistory} ref={chatHistoryRef}>
<div ref={sentinelRef} style={{ height: '1px' }}> <div ref={sentinelRef} style={{ height: '1px' }}>
{fetchingData && <InlineLoading />} {fetchingData && <InlineLoading message="Loading Conversation" className='opacity-50'/>}
</div> </div>
{(data && data.chat) && data.chat.map((chatMessage, index) => ( {(data && data.chat) && data.chat.map((chatMessage, index) => (
<ChatMessage <ChatMessage
@@ -328,16 +328,18 @@ export default function ChatHistory(props: ChatHistoryProps) {
isLastMessage={true} isLastMessage={true}
/> />
} }
<div className={`${styles.agentIndicator} pb-4`}> {data &&
<div className="relative group mx-2 cursor-pointer"> <div className={`${styles.agentIndicator} pb-4`}>
<ProfileCard <div className="relative group mx-2 cursor-pointer">
name={constructAgentName()} <ProfileCard
link={constructAgentLink()} name={constructAgentName()}
avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />} link={constructAgentLink()}
description={constructAgentPersona()} avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
/> description={constructAgentPersona()}
/>
</div>
</div> </div>
</div> }
</div> </div>
</div> </div>
</ScrollArea> </ScrollArea>

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

@@ -1,22 +1,23 @@
import { CircleNotch } from '@phosphor-icons/react'; import { CircleNotch } from '@phosphor-icons/react';
export default function Loading() { interface LoadingProps {
className?: string;
message?: string;
}
export default function Loading(props: LoadingProps) {
return ( return (
// NOTE: We can display usage tips here for casual learning moments. // 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 className={props.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>{props.message || "Loading" } <span><CircleNotch className="inline animate-spin h-5 w-5" /></span></div>
</div> </div>
); );
} }
interface InlineLoadingProps { export function InlineLoading(props: LoadingProps) {
className?: string;
}
export function InlineLoading(props: InlineLoadingProps) {
return ( return (
<button className={`${props.className}`}> <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> </button>
) )
} }