diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css index 65048310..ba9372b8 100644 --- a/src/interface/web/app/components/chatMessage/chatMessage.module.css +++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css @@ -57,7 +57,26 @@ div.emptyChatMessage { 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; height: auto; max-width: 100%; diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx index e0d0f09c..205acc49 100644 --- a/src/interface/web/app/components/chatMessage/chatMessage.tsx +++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx @@ -330,11 +330,11 @@ const ChatMessage = forwardRef((props, ref) => if (props.chatMessage.images && props.chatMessage.images.length > 0) { const imagesInMd = props.chatMessage.images .map( - (image) => - `![uploaded image](${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image})`, + (image, index) => + `
uploaded image ${index + 1}
`, ) - .join("\n\n"); - message = `${imagesInMd}\n\n${message}`; + .join(""); + message = `
${imagesInMd}
${message}`; } if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") {