sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

Improve Train of Thought icons spacing and loading circle

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-07-14 09:35:15 +05:30
parent e9567741eb
commit a0f38e079f
3 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/components/chatHistory/chatHistory.module.css
View file

@ -24,7 +24,7 @@ div.agentIndicator {
div.trainOfThought {
border: 1px var(--border-color) solid;
border-radius: 16px;
padding: 16px;
padding: 0 16px;
margin: 12px;
box-shadow: 0 4px 10px var(--box-shadow-color);
}

19
src/interface/web/app/components/chatMessage/chatMessage.tsx
View file

@ -155,35 +155,36 @@ interface TrainOfThoughtProps {
function chooseIconFromHeader(header: string, iconColor: string) {
const compareHeader = header.toLowerCase();
const classNames = `inline mt-1 mr-2 ${iconColor}`;
if (compareHeader.includes("understanding")) {
return <Brain className={`inline mr-2 ${iconColor}`} />
return <Brain className={`${classNames}`} />
}
if (compareHeader.includes("generating")) {
return <Cloud className={`inline mr-2 ${iconColor}`} />;
return <Cloud className={`${classNames}`} />;
}
if (compareHeader.includes("data sources")) {
return <Folder className={`inline mr-2 ${iconColor}`} />;
return <Folder className={`${classNames}`} />;
}
if (compareHeader.includes("notes")) {
return <Folder className={`inline mr-2 ${iconColor}`} />;
return <Folder className={`${classNames}`} />;
}
if (compareHeader.includes("read")) {
return <Book className={`inline mr-2 ${iconColor}`} />;
return <Book className={`${classNames}`} />;
}
if (compareHeader.includes("search")) {
return <MagnifyingGlass className={`inline mr-2 ${iconColor}`} />;
return <MagnifyingGlass className={`${classNames}`} />;
}
if (compareHeader.includes("summary") || compareHeader.includes("summarize")) {
return <Aperture className={`inline mr-2 ${iconColor}`} />;
return <Aperture className={`${classNames}`} />;
}
return <Brain className={`inline mr-2 ${iconColor}`} />;
return <Brain className={`${classNames}`} />;
}
@ -195,7 +196,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
const icon = chooseIconFromHeader(header, iconColor);
let markdownRendered = DomPurify.sanitize(md.render(props.message));
return (
<div className={`flex items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
<div className={`flex mt-1 ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
{icon}
<div dangerouslySetInnerHTML={{ __html: markdownRendered }} />
</div>

2
src/interface/web/app/components/loading/loading.tsx
View file

@ -16,7 +16,7 @@ interface InlineLoadingProps {
export function InlineLoading(props: InlineLoadingProps) {
return (
<button className={`${props.className}`}>
<CircleNotch className={`animate-spin h-5 w-5 mr-3`} />
<CircleNotch className={`animate-spin h-5 w-5 mt-3 mr-3`} />
</button>
)
}