mirror of
https://github.com/khoj-ai/khoj.git
synced 2025-02-18 23:44:19 +00:00
Style user attached images as carousel on chat input area of web app
This commit is contained in:
parent
5d5bea6a5f
commit
7646ac6779
2 changed files with 4 additions and 3 deletions
src/interface/web/app/components/chatInputArea
|
@ -1,4 +1,5 @@
|
|||
div.actualInputArea {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
|
|
@ -427,10 +427,10 @@ export default function ChatInputArea(props: ChatInputProps) {
|
|||
</Button>
|
||||
</div>
|
||||
<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 &&
|
||||
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
|
||||
src={path}
|
||||
alt={`img-${index}`}
|
||||
|
@ -439,7 +439,7 @@ export default function ChatInputArea(props: ChatInputProps) {
|
|||
<Button
|
||||
variant="ghost"
|
||||
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)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
|
|
Loading…
Add table
Reference in a new issue