klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-04 13:20:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add hover effects for chat messages

Browse Source
This commit is contained in:
sabaimran
2024-07-09 14:56:57 +05:30
parent a0e9530fa4
commit 5b69252337
4 changed files with 72 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/interface/web/app/chat/page.tsx
View File

@@ -149,9 +149,8 @@ function ChatInputArea(props: ChatInputProps) {
<FileArrowUp weight='fill' />
</Button>
<div className="grid w-full gap-1.5">
{/* <Label htmlFor="message">Your message</Label> */}
<Textarea
className='border-none min-h-[60px]'
className='border-none min-h-[20px]'
placeholder="Type / to see a list of commands"
id="message"
value={message}

10
src/interface/web/app/components/chatMessage/chatMessage.module.css
View File

@@ -61,7 +61,8 @@ div.author {
div.chatFooter {
display: flex;
justify-content: flex-end;
justify-content: space-between;
min-height: 28px;
}
div.chatButtons {
@@ -71,7 +72,8 @@ div.chatButtons {
border-radius: 16px;
position: relative;
bottom: -28px;
background-color: hsla(var(--background));
background-color: hsla(var(--secondary));
box-shadow: 0 4px 10px var(--box-shadow-color);
}
div.chatFooter button {
@@ -88,10 +90,6 @@ div.chatFooter button:hover {
background-color: hsla(var(--frosted-background-color));
}
div.chatTimestamp {
font-size: small;
}
button.codeCopyButton {
cursor: pointer;
float: right;

103
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -214,6 +214,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
export default function ChatMessage(props: ChatMessageProps) {
const [copySuccess, setCopySuccess] = useState<boolean>(false);
const [isHovering, setIsHovering] = useState<boolean>(false);
let message = props.chatMessage.message;
@@ -260,12 +261,23 @@ export default function ChatMessage(props: ChatMessageProps) {
}, [markdownRendered]);
function renderTimeStamp(timestamp: string) {
var dateObject = new Date(timestamp);
var month = dateObject.getMonth() + 1;
var date = dateObject.getDate();
var year = dateObject.getFullYear();
const formattedDate = `${month}/${date}/${year}`;
return `${formattedDate} ${dateObject.toLocaleTimeString()}`;
const messageDateTime = new Date(timestamp);
const currentDataTime = new Date();
const timeDiff = currentDataTime.getTime() - messageDateTime.getTime();
if (timeDiff < 60000) {
return "Just now";
}
if (timeDiff < 3600000) {
return `${Math.floor(timeDiff / 60000)}m ago`;
}
if (timeDiff < 86400000) {
return `${Math.floor(timeDiff / 3600000)}h ago`;
}
return `${Math.floor(timeDiff / 86400000)}d ago`;
}
useEffect(() => {
@@ -304,6 +316,8 @@ export default function ChatMessage(props: ChatMessageProps) {
return (
<div
className={constructClasses(props.chatMessage)}
onMouseLeave={(event) => setIsHovering(false)}
onMouseEnter={(event) => setIsHovering(true)}
onClick={props.chatMessage.by === "khoj" ? (event) => undefined : undefined}>
<div className={chatMessageWrapperClasses(props.chatMessage)}>
<div ref={messageRef} className={styles.chatMessage} dangerouslySetInnerHTML={{ __html: markdownRendered }} />
@@ -315,40 +329,49 @@ export default function ChatMessage(props: ChatMessageProps) {
onlineReferenceCardData={allReferences.onlineReferenceCardData} />
</div>
<div className={styles.chatFooter}>
{/* <div className={styles.chatTimestamp}>
{renderTimeStamp(props.chatMessage.created)}
</div> */}
<div className={styles.chatButtons}>
{
<div className={styles.referenceButton}>
<button onClick={(event) => console.log("speaker")}>
<SpeakerHifi color='hsl(var(--muted-foreground))' />
</button>
</div>
}
<button className={`${styles.copyButton}`} onClick={() => {
navigator.clipboard.writeText(props.chatMessage.message);
setCopySuccess(true);
}}>
{
copySuccess ?
<Copy color='green' />
: <Copy color='hsl(var(--muted-foreground))' />
}
</button>
{
props.chatMessage.by === "khoj" &&
(
props.chatMessage.intent ?
<FeedbackButtons
uquery={props.chatMessage.intent.query}
kquery={props.chatMessage.message} />
: <FeedbackButtons
uquery={props.chatMessage.rawQuery || props.chatMessage.message}
kquery={props.chatMessage.message} />
)
}
</div>
{
isHovering &&
(
<>
<div className={`text-gray-400 relative top-2 left-2`}>
{renderTimeStamp(props.chatMessage.created)}
</div>
<div className={styles.chatButtons}>
{
(props.chatMessage.by === "khoj") &&
(
<button onClick={(event) => console.log("speaker")}>
<SpeakerHifi color='hsl(var(--muted-foreground))' />
</button>
)
}
<button className={`${styles.copyButton}`} onClick={() => {
navigator.clipboard.writeText(props.chatMessage.message);
setCopySuccess(true);
}}>
{
copySuccess ?
<Copy color='green' />
: <Copy color='hsl(var(--muted-foreground))' />
}
</button>
{
(props.chatMessage.by === "khoj") &&
(
props.chatMessage.intent ?
<FeedbackButtons
uquery={props.chatMessage.intent.query}
kquery={props.chatMessage.message} />
: <FeedbackButtons
uquery={props.chatMessage.rawQuery || props.chatMessage.message}
kquery={props.chatMessage.message} />
)
}
</div>
</>
)
}
</div>
</div>
)

8
src/interface/web/app/components/referencePanel/referencePanel.tsx
View File

@@ -59,7 +59,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
className={`${props.showFullContent ? 'w-auto' : 'w-[200px]'} overflow-hidden break-words text-balance rounded-lg p-2 bg-muted border-none`}
>
>
<h3 className={`${props.showFullContent ? 'block' : 'line-clamp-1'} text-muted-foreground}`}>
<File className='w-6 h-6 text-muted-foreground inline-flex' />
{props.title}
@@ -320,9 +320,9 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
return (
<Sheet>
<SheetTrigger className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'
onClick={() => { console.log("showing references") }}>
View references <ArrowRight className='m-1' />
<SheetTrigger
className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'>
View references <ArrowRight className='m-1' />
</SheetTrigger>
<SheetContent className="overflow-y-scroll">
<SheetHeader>