-
+
+ @if (messageText) {
+
+ }
- @if (message.role !== chatRole.System) {
-
- }
-
+ @if (message.role !== chatRole.System) {
+
+ }
+
+ @if (messageImage.length) {
+
+ @for (image of messageImage; track messageImage) {
+
File ID: {{ image.image_file.file_id }}
+ }
+
+ }
+
}
diff --git a/apps/spa/src/app/components/chat/chat-message/chat-message.component.scss b/apps/spa/src/app/components/chat/chat-message/chat-message.component.scss
index 14478b0..0be069c 100644
--- a/apps/spa/src/app/components/chat/chat-message/chat-message.component.scss
+++ b/apps/spa/src/app/components/chat/chat-message/chat-message.component.scss
@@ -46,3 +46,10 @@
max-width: 80%;
z-index: 1;
}
+
+.chat-message__file {
+ border-top: 1px dashed rgba(0, 0, 0, 0.4);
+ margin-top: $size-2;
+ padding-top: $size-2;
+ font-size: 11px;
+}
diff --git a/apps/spa/src/app/components/chat/chat-message/chat-message.component.ts b/apps/spa/src/app/components/chat/chat-message/chat-message.component.ts
index cdb0d9c..1a25913 100644
--- a/apps/spa/src/app/components/chat/chat-message/chat-message.component.ts
+++ b/apps/spa/src/app/components/chat/chat-message/chat-message.component.ts
@@ -7,6 +7,11 @@ import { MarkdownComponent } from 'ngx-markdown';
import { ChatAudioComponent } from '../chat-audio/chat-audio.component';
import { NgClass } from '@angular/common';
import { ChatAvatarComponent } from '../chat-avatar/chat-avatar.component';
+import {
+ getMessageImage,
+ getMessageText,
+} from '../../controls/message-content/message-content.helpers';
+import { ImageFileContentBlock } from 'openai/resources/beta/threads';
@Component({
selector: 'ai-chat-message',
@@ -25,6 +30,14 @@ export class ChatMessageComponent {
@Input() class = '';
chatRole = ChatRole;
+ get messageText(): string {
+ return getMessageText(this.message);
+ }
+
+ get messageImage(): ImageFileContentBlock[] {
+ return getMessageImage(this.message);
+ }
+
@HostBinding('class') get getClasses(): string {
return `${this.class} is-${this.message?.role || 'none'}`;
}
diff --git a/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html b/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
index a27b0da..950882a 100644
--- a/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
+++ b/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
@@ -1,10 +1,10 @@