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

Style user attached images with fixed height, in a single row on web app

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-10-19 16:47:27 -07:00
parent 58a331227d
commit 3cc1426edf
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/interface/web/app/components/chatMessage/chatMessage.module.css
View file

@ -57,7 +57,26 @@ div.emptyChatMessage {
display: none; display: none;
} }
div.chatMessageContainer img { div.imagesContainer {
display: flex;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 8px;
}
div.imageWrapper {
flex: 0 0 auto;
margin-right: 8px;
}
div.imageWrapper img {
width: auto;
height: 128px;
object-fit: cover;
border-radius: 8px;
}
div.chatMessageContainer > img {
width: auto; width: auto;
height: auto; height: auto;
max-width: 100%; max-width: 100%;

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

@ -330,11 +330,11 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
if (props.chatMessage.images && props.chatMessage.images.length > 0) { if (props.chatMessage.images && props.chatMessage.images.length > 0) {
const imagesInMd = props.chatMessage.images const imagesInMd = props.chatMessage.images
.map( .map(
(image) => (image, index) =>
`![uploaded image](${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image})`, `<div class="${styles.imageWrapper}"><img src="${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image}" alt="uploaded image ${index + 1}" /></div>`,
) )
.join("\n\n"); .join("");
message = `${imagesInMd}\n\n${message}`; message = `<div class="${styles.imagesContainer}">${imagesInMd}</div>${message}`;
} }
if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") { if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") {