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

Style user attached images as carousel on chat input area of web app

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-10-20 00:40:08 -07:00
parent 5d5bea6a5f
commit 7646ac6779
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/components/chatInputArea/chatInputArea.module.css
View File

@@ -1,4 +1,5 @@
div.actualInputArea { div.actualInputArea {
display: grid; display: grid;
grid-template-columns: auto 1fr auto auto; grid-template-columns: auto 1fr auto auto;
max-width: 700px;
} }

6
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -427,10 +427,10 @@ export default function ChatInputArea(props: ChatInputProps) {
</Button> </Button>
</div> </div>
<div className="flex-grow flex flex-col w-full gap-1.5 relative pb-2"> <div className="flex-grow flex flex-col w-full gap-1.5 relative pb-2">
<div className="flex flex-wrap items-center gap-2"> <div className="flex items-center gap-2 overflow-x-auto">
{imageUploaded && {imageUploaded &&
imagePaths.map((path, index) => ( imagePaths.map((path, index) => (
<div key={index} className="relative flex-shrink-0 group"> <div key={index} className="relative flex-shrink-0 pb-3 pt-2 group">
<img <img
src={path} src={path}
alt={`img-${index}`} alt={`img-${index}`}
@@ -439,7 +439,7 @@ export default function ChatInputArea(props: ChatInputProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-neutral-200 dark:bg-neutral-600 hover:bg-neutral-300 dark:hover:bg-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" className="absolute -top-0 -right-2 h-5 w-5 rounded-full bg-neutral-200 dark:bg-neutral-600 hover:bg-neutral-300 dark:hover:bg-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => removeImageUpload(index)} onClick={() => removeImageUpload(index)}
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />