Skip to content

Commit 817287c

Browse files
bloveclaude
blove
and
claude
committed
fix(chat): center input text, remove Assistant label, ChatGPT pattern
- Input: items-end → items-center for vertical centering of single-line text - Input: inline SVG for send button (replaces [innerHTML] which Angular sanitizes) - AI messages: remove "Assistant" label, use avatar inline with content (ChatGPT pattern) - Typing indicator: match new AI message layout (avatar + dots, no label) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent eb26a6f commit 817287c

4 files changed

Lines changed: 27 additions & 36 deletions

File tree

‎libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,15 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
6666
</div>
6767
</ng-template>
6868
69-
<!-- AI messages: no bubble, avatar + markdown -->
69+
<!-- AI messages: avatar inline with content (ChatGPT pattern) -->
7070
<ng-template chatMessageTemplate="ai" let-message>
71-
<div class="flex flex-col gap-1.5">
72-
<div class="flex items-center gap-2">
73-
<div
74-
class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
75-
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
76-
>A</div>
77-
<span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
78-
</div>
71+
<div class="flex gap-3">
7972
<div
80-
class="chat-md pl-8 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
73+
class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5"
74+
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
75+
>A</div>
76+
<div
77+
class="chat-md flex-1 min-w-0 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
8178
style="color: var(--chat-text);"
8279
[innerHTML]="renderMd(messageContent(message))"
8380
></div>

‎libs/chat/src/lib/compositions/chat/chat.component.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -107,18 +107,15 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
107107
</div>
108108
</ng-template>
109109
110-
<!-- AI messages: no bubble, avatar + markdown -->
110+
<!-- AI messages: avatar inline with content (ChatGPT pattern) -->
111111
<ng-template chatMessageTemplate="ai" let-message>
112-
<div class="flex flex-col gap-1.5">
113-
<div class="flex items-center gap-2">
114-
<div
115-
class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
116-
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
117-
>A</div>
118-
<span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
119-
</div>
112+
<div class="flex gap-3">
120113
<div
121-
class="chat-md pl-8 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
114+
class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5"
115+
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
116+
>A</div>
117+
<div
118+
class="chat-md flex-1 min-w-0 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
122119
style="color: var(--chat-text);"
123120
[innerHTML]="renderMd(messageContent(message))"
124121
></div>

‎libs/chat/src/lib/primitives/chat-input/chat-input.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
} from '@angular/core';
1010
import { FormsModule } from '@angular/forms';
1111
import type { StreamResourceRef } from '@cacheplane/stream-resource';
12-
import { ICON_SEND } from '../../styles/chat-icons';
1312

1413
export function submitMessage(
1514
ref: StreamResourceRef<any, any>,
@@ -34,7 +33,7 @@ export function submitMessage(
3433
template: `
3534
<form
3635
(submit)="onSubmit(); $event.preventDefault()"
37-
class="flex items-end gap-2 px-4 py-2.5 pl-[18px] border transition-colors duration-150"
36+
class="flex items-center gap-2 px-4 py-2.5 pl-[18px] border transition-colors duration-150"
3837
[style.background]="'var(--chat-input-bg)'"
3938
[style.borderColor]="focused() ? 'var(--chat-input-focus-border)' : 'var(--chat-input-border)'"
4039
[style.borderRadius]="'var(--chat-radius-input)'"
@@ -63,8 +62,10 @@ export function submitMessage(
6362
[style.background]="'var(--chat-send-bg)'"
6463
[style.color]="'var(--chat-send-text)'"
6564
aria-label="Send message"
66-
[innerHTML]="sendIcon"
6765
>
66+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
67+
<path d="M8 12V4M8 4L4 8M8 4L12 8"/>
68+
</svg>
6869
</button>
6970
</form>
7071
`,
@@ -77,7 +78,6 @@ export class ChatInputComponent {
7778
readonly messageText = signal<string>('');
7879
readonly isDisabled = computed(() => this.ref().isLoading());
7980
readonly focused = signal(false);
80-
readonly sendIcon = ICON_SEND;
8181

8282
onSubmit(): void {
8383
const submitted = submitMessage(this.ref(), this.messageText());

‎libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,15 @@ export function isTyping(ref: StreamResourceRef<any, any>): boolean {
3333
`],
3434
template: `
3535
@if (visible()) {
36-
<div role="status" aria-label="Agent is typing" class="flex flex-col gap-1.5">
37-
<div class="flex items-center gap-2">
38-
<div
39-
class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
40-
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
41-
>A</div>
42-
<span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
43-
<div class="flex items-center gap-1 pl-1">
44-
<span class="chat-dot"></span>
45-
<span class="chat-dot"></span>
46-
<span class="chat-dot"></span>
47-
</div>
36+
<div role="status" aria-label="Agent is typing" class="flex items-center gap-3">
37+
<div
38+
class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0"
39+
style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
40+
>A</div>
41+
<div class="flex items-center gap-1">
42+
<span class="chat-dot"></span>
43+
<span class="chat-dot"></span>
44+
<span class="chat-dot"></span>
4845
</div>
4946
</div>
5047
}

0 commit comments

Comments
 (0)