feat: conversations on a ticket are settled, and you see who is typing
A top-level comment and its replies can be resolved by whoever can
change the ticket (CommentThreadResolvedEvent), with an optional
conclusion added as a reply marked as a decision, so it shows above the
ticket. A settled conversation folds to one line (topic, who settled it
and the conclusion) and can be unfolded or reopened; the header counts
the open ones, and finishing the ticket with one open asks first.
«Ana está escribiendo…» shows in the conversation being answered, at
once: a `typing` mutation publishes to a Redis channel per ticket
(`typing` subscription), never stored. In replies, Enter sends and
Shift+Enter breaks the line, except inside lists and code.
API: resolveThread / PUT-DELETE /api/comments/{id}/resolution, Comment
.resolved/resolvedBy/resolvedAt, typing mutation and subscription. MCP:
resolve_thread.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -641,24 +641,104 @@ a.ts-key {
|
||||
|
||||
// A text link, past @pi/ui's global button look: as a 40 px pill it sat on
|
||||
// the line under the comment.
|
||||
.ts-reply__open {
|
||||
justify-self: start;
|
||||
.ts-thread__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
/* Small text buttons, not @pi/ui's sized ones. */
|
||||
.ts-thread__action {
|
||||
flex: none;
|
||||
height: auto !important;
|
||||
min-width: 0 !important;
|
||||
margin-top: 0.375rem;
|
||||
padding: 0.125rem 0 !important;
|
||||
border: 0;
|
||||
background: none !important;
|
||||
color: var(--ts-brand);
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* A settled conversation, folded to one line. */
|
||||
.ts-thread-done {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
border-radius: 0.625rem;
|
||||
background: var(--ts-sunken);
|
||||
}
|
||||
|
||||
.ts-thread-done__check {
|
||||
flex: none;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--ts-c-green) 18%, transparent);
|
||||
color: var(--ts-c-green);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ts-thread-done__text {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.875rem;
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ts-thread-done__topic {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ts-open-threads {
|
||||
margin-left: auto;
|
||||
padding: 0.0625rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--ts-c-amber) 18%, transparent);
|
||||
color: var(--ts-ink);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.ts-typing {
|
||||
margin: 0;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ts-resolve__label {
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.ts-resolve__text {
|
||||
font: inherit;
|
||||
color: var(--ts-ink);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ts-reply__actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
|
||||
@@ -53,6 +53,7 @@ import {
|
||||
isTyping,
|
||||
POINT_SCALE,
|
||||
ReleaseStatus,
|
||||
StatusCategory,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import {
|
||||
clock,
|
||||
@@ -654,6 +655,16 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<h2 class="ts-section">
|
||||
Comentarios
|
||||
<span class="ts-mono">{{ commentCount() }}</span>
|
||||
@if (openThreads()) {
|
||||
<span class="ts-open-threads"
|
||||
>{{ openThreads() }}
|
||||
{{
|
||||
openThreads() === 1
|
||||
? 'conversación abierta'
|
||||
: 'conversaciones abiertas'
|
||||
}}</span
|
||||
>
|
||||
}
|
||||
</h2>
|
||||
<ng-template #commentView let-comment>
|
||||
<div
|
||||
@@ -761,68 +772,188 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
</div>
|
||||
</ng-template>
|
||||
@for (thread of threads(); track thread.comment.id) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: thread.comment }
|
||||
"
|
||||
/>
|
||||
<div class="ts-replies">
|
||||
@for (reply of thread.replies; track reply.id) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: reply }
|
||||
"
|
||||
/>
|
||||
}
|
||||
@if (replyingTo() === thread.comment.id) {
|
||||
<form
|
||||
class="ts-form ts-reply"
|
||||
(submit)="$event.preventDefault(); reply(thread.comment)"
|
||||
novalidate
|
||||
@if (
|
||||
thread.comment.resolved && !expanded().has(thread.comment.id)
|
||||
) {
|
||||
<!-- Settled: one line, the conversation a click away. -->
|
||||
<div class="ts-thread-done">
|
||||
<span class="ts-thread-done__check" aria-hidden="true"
|
||||
>✓</span
|
||||
>
|
||||
<ts-rich-editor
|
||||
[placeholder]="
|
||||
'Responde a ' + thread.comment.author.name + '…'
|
||||
"
|
||||
[(value)]="replyBody"
|
||||
[members]="mentionable()"
|
||||
[me]="facade.me()"
|
||||
[upload]="pasteImage"
|
||||
[loader]="loadImage"
|
||||
(submitted)="reply(thread.comment)"
|
||||
/>
|
||||
<div class="ts-reply__actions">
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Responder"
|
||||
[disabled]="!replyBody().trim()"
|
||||
(execute)="reply(thread.comment)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link"
|
||||
(click)="replyingTo.set(null)"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
} @else if (project.canReport() && !thread.comment.deleted) {
|
||||
<div class="ts-thread-done__text">
|
||||
<span class="ts-thread-done__topic">{{
|
||||
thread.comment.deleted
|
||||
? 'Conversación'
|
||||
: excerpt(thread.comment.body)
|
||||
}}</span>
|
||||
<span class="ts-muted"
|
||||
>Resuelta{{
|
||||
thread.comment.resolvedBy
|
||||
? ' por ' + thread.comment.resolvedBy.name
|
||||
: ''
|
||||
}}{{
|
||||
conclusionOf(thread)
|
||||
? ': ' + excerpt(conclusionOf(thread) ?? '')
|
||||
: ''
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link ts-reply__open"
|
||||
(click)="startReply(thread.comment)"
|
||||
class="ts-thread__action"
|
||||
(click)="toggleThread(thread.comment.id)"
|
||||
>
|
||||
Responder{{
|
||||
thread.replies.length
|
||||
? ' (' + thread.replies.length + ')'
|
||||
: ''
|
||||
}}
|
||||
Ver conversación ({{ thread.replies.length + 1 }})
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: thread.comment }
|
||||
"
|
||||
/>
|
||||
<div class="ts-replies">
|
||||
@for (reply of thread.replies; track reply.id) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: reply }
|
||||
"
|
||||
/>
|
||||
}
|
||||
@if (typistsIn(thread.comment.id); as typing) {
|
||||
<p class="ts-typing" aria-live="polite">{{ typing }}</p>
|
||||
}
|
||||
@if (resolving() === thread.comment.id) {
|
||||
<form
|
||||
class="ts-form ts-reply"
|
||||
(submit)="
|
||||
$event.preventDefault(); resolve(thread.comment)
|
||||
"
|
||||
novalidate
|
||||
>
|
||||
<label class="ts-resolve__label">
|
||||
Conclusión (opcional): quedará como decisión, arriba del
|
||||
ticket
|
||||
<textarea
|
||||
class="ts-input ts-resolve__text"
|
||||
rows="2"
|
||||
maxlength="20000"
|
||||
placeholder="Vamos con…"
|
||||
[value]="conclusion()"
|
||||
(input)="conclusion.set($any($event.target).value)"
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="ts-reply__actions">
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Resolver"
|
||||
(execute)="resolve(thread.comment)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link"
|
||||
(click)="resolving.set(null)"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
} @else if (replyingTo() === thread.comment.id) {
|
||||
<form
|
||||
class="ts-form ts-reply"
|
||||
(submit)="$event.preventDefault(); reply(thread.comment)"
|
||||
novalidate
|
||||
>
|
||||
<ts-rich-editor
|
||||
[placeholder]="
|
||||
'Responde a ' + thread.comment.author.name + '…'
|
||||
"
|
||||
[(value)]="replyBody"
|
||||
[members]="mentionable()"
|
||||
[me]="facade.me()"
|
||||
[upload]="pasteImage"
|
||||
[loader]="loadImage"
|
||||
[enterSends]="true"
|
||||
(submitted)="reply(thread.comment)"
|
||||
/>
|
||||
<div class="ts-reply__actions">
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Responder"
|
||||
[disabled]="!replyBody().trim()"
|
||||
(execute)="reply(thread.comment)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link"
|
||||
(click)="replyingTo.set(null)"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
} @else {
|
||||
<div class="ts-thread__actions">
|
||||
@if (project.canReport() && !thread.comment.deleted) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-thread__action"
|
||||
(click)="startReply(thread.comment)"
|
||||
>
|
||||
Responder{{
|
||||
thread.replies.length
|
||||
? ' (' + thread.replies.length + ')'
|
||||
: ''
|
||||
}}
|
||||
</button>
|
||||
}
|
||||
@if (project.canContribute()) {
|
||||
@if (thread.comment.resolved) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-thread__action"
|
||||
(click)="
|
||||
facade.resolveThread(thread.comment.id, false)
|
||||
"
|
||||
>
|
||||
Reabrir
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-thread__action"
|
||||
(click)="toggleThread(thread.comment.id)"
|
||||
>
|
||||
Plegar
|
||||
</button>
|
||||
} @else if (
|
||||
thread.replies.length && !thread.comment.deleted
|
||||
) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-thread__action"
|
||||
(click)="startResolve(thread.comment)"
|
||||
>
|
||||
✓ Resolver
|
||||
</button>
|
||||
}
|
||||
} @else if (thread.comment.resolved) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-thread__action"
|
||||
(click)="toggleThread(thread.comment.id)"
|
||||
>
|
||||
Plegar
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@if (typistsIn(null); as typing) {
|
||||
<p class="ts-typing" aria-live="polite">{{ typing }}</p>
|
||||
}
|
||||
@if (project.canReport()) {
|
||||
<form
|
||||
@@ -1247,6 +1378,11 @@ export class IssuePage {
|
||||
/** The comment being answered, and the answer being written. */
|
||||
protected readonly replyingTo = signal<string | null>(null);
|
||||
protected readonly replyBody = signal('');
|
||||
/** The conversation being settled, and its conclusion. */
|
||||
protected readonly resolving = signal<string | null>(null);
|
||||
protected readonly conclusion = signal('');
|
||||
/** Settled conversations unfolded to read. */
|
||||
protected readonly expanded = signal<ReadonlySet<string>>(new Set());
|
||||
/** Top-level comments, each with its replies (oldest first). */
|
||||
protected readonly threads = computed(() => {
|
||||
const comments = this.facade.comments();
|
||||
@@ -1414,6 +1550,14 @@ export class IssuePage {
|
||||
if (id && this.facade.comments().some((c) => c.id === id))
|
||||
untracked(() => setTimeout(() => this.goToComment(id)));
|
||||
});
|
||||
// Writing an answer or a comment: the others see it as I type.
|
||||
effect(() => {
|
||||
if (this.replyBody().trim())
|
||||
untracked(() => this.presence.typed(this.replyingTo()));
|
||||
});
|
||||
effect(() => {
|
||||
if (this.commentBody().trim()) untracked(() => this.presence.typed(null));
|
||||
});
|
||||
effect(() => {
|
||||
const editing = this.editingInDrawer() || !!this.commentBody().trim();
|
||||
untracked(() => this.presence.setEditing(editing));
|
||||
@@ -1473,6 +1617,17 @@ export class IssuePage {
|
||||
}
|
||||
|
||||
protected move(to: string): void {
|
||||
const open = this.openThreads();
|
||||
if (
|
||||
open &&
|
||||
this.project.workflow().status(to)?.category === StatusCategory.DONE &&
|
||||
!confirm(
|
||||
open === 1
|
||||
? 'Queda una conversación sin resolver. ¿Terminar el ticket igualmente?'
|
||||
: `Quedan ${open} conversaciones sin resolver. ¿Terminar el ticket igualmente?`,
|
||||
)
|
||||
)
|
||||
return;
|
||||
if (this.project.workflow().requiresReason(to)) {
|
||||
this.pendingStatus = to;
|
||||
this.reason().reset({ text: '' });
|
||||
@@ -1565,6 +1720,68 @@ export class IssuePage {
|
||||
this.replyingTo.set(comment.id);
|
||||
}
|
||||
|
||||
protected startResolve(comment: Comment): void {
|
||||
this.conclusion.set('');
|
||||
this.replyingTo.set(null);
|
||||
this.resolving.set(comment.id);
|
||||
}
|
||||
|
||||
protected resolve(comment: Comment): void {
|
||||
this.facade.resolveThread(comment.id, true, this.conclusion());
|
||||
this.resolving.set(null);
|
||||
this.conclusion.set('');
|
||||
// It folds once settled.
|
||||
this.expanded.update((ids) => {
|
||||
const next = new Set(ids);
|
||||
next.delete(comment.id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
protected toggleThread(id: string): void {
|
||||
this.expanded.update((ids) => {
|
||||
const next = new Set(ids);
|
||||
if (!next.delete(id)) next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/** Conversations with answers still to settle. */
|
||||
protected readonly openThreads = computed(
|
||||
() =>
|
||||
this.threads().filter(
|
||||
(t) => t.replies.length && !t.comment.resolved && !t.comment.deleted,
|
||||
).length,
|
||||
);
|
||||
|
||||
/** What a settled conversation concluded: its last reply marked as a decision. */
|
||||
protected conclusionOf(thread: { replies: Comment[] }): string | null {
|
||||
const decided = thread.replies.filter((r) => r.decision && !r.deleted);
|
||||
return decided[decided.length - 1]?.body ?? null;
|
||||
}
|
||||
|
||||
/** The first words of a comment, on one line. */
|
||||
protected excerpt(body: string): string {
|
||||
const text = body
|
||||
.replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1')
|
||||
.replace(/[*_`~#>]+/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
return text.length > 80 ? `${text.slice(0, 79)}…` : text;
|
||||
}
|
||||
|
||||
/** «Ana está escribiendo…» in a conversation (null: a new comment). */
|
||||
protected typistsIn(threadId: string | null): string | null {
|
||||
const names = this.presence
|
||||
.typists()
|
||||
.filter((t) => t.threadId === threadId)
|
||||
.map((t) => t.user.name);
|
||||
if (!names.length) return null;
|
||||
return names.length === 1
|
||||
? `${names[0]} está escribiendo…`
|
||||
: `${names.slice(0, -1).join(', ')} y ${names[names.length - 1]} están escribiendo…`;
|
||||
}
|
||||
|
||||
protected reply(comment: Comment): void {
|
||||
const body = this.replyBody().trim();
|
||||
if (!body) return;
|
||||
|
||||
@@ -423,7 +423,9 @@ export class RichEditorComponent implements FormValueControl<string> {
|
||||
/** Turns pasting screenshots on. */
|
||||
readonly upload = input<ImageUploader | null>(null);
|
||||
readonly loader = input<AttachmentLoader | null>(null);
|
||||
/** Ctrl/Cmd+Enter. */
|
||||
/** Plain Enter sends too (Shift+Enter breaks the line), like a chat. */
|
||||
readonly enterSends = input(false);
|
||||
/** Ctrl/Cmd+Enter (and Enter with `enterSends`). */
|
||||
readonly submitted = output<void>();
|
||||
readonly touch = output<void>();
|
||||
|
||||
@@ -440,6 +442,7 @@ export class RichEditorComponent implements FormValueControl<string> {
|
||||
});
|
||||
protected readonly hint = computed(() =>
|
||||
[
|
||||
this.enterSends() ? 'Enter envía, Shift+Enter cambia de línea' : '',
|
||||
this.members().length ? 'Escribe @ para mencionar a alguien' : '',
|
||||
this.upload() ? 'pega capturas con Ctrl+V' : '',
|
||||
]
|
||||
@@ -539,6 +542,7 @@ export class RichEditorComponent implements FormValueControl<string> {
|
||||
placeholder: () => this.placeholder(),
|
||||
loader: this.loader(),
|
||||
onSubmit: () => this.submitted.emit(),
|
||||
enterSends: () => this.enterSends(),
|
||||
suggestion: {
|
||||
items: ({ query }) =>
|
||||
this.members()
|
||||
|
||||
@@ -106,6 +106,11 @@ export interface RichTextOptions {
|
||||
suggestion?: Omit<SuggestionOptions<Mentionable>, 'editor'> | null;
|
||||
/** Ctrl/Cmd+Enter. */
|
||||
onSubmit?: () => void;
|
||||
/**
|
||||
* Plain Enter submits too (Shift+Enter breaks the line), like a chat;
|
||||
* not inside a list or code, where Enter means a new item or line.
|
||||
*/
|
||||
enterSends?: () => boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -152,6 +157,17 @@ export function richTextExtensions(
|
||||
options.onSubmit?.();
|
||||
return !!options.onSubmit;
|
||||
},
|
||||
Enter: ({ editor }) => {
|
||||
if (!options.onSubmit || !options.enterSends?.()) return false;
|
||||
if (
|
||||
editor.isActive('codeBlock') ||
|
||||
editor.isActive('listItem') ||
|
||||
editor.isActive('taskItem')
|
||||
)
|
||||
return false;
|
||||
options.onSubmit();
|
||||
return true;
|
||||
},
|
||||
}),
|
||||
}),
|
||||
Markdown.configure({ markedOptions: { gfm: true, breaks: true } }),
|
||||
|
||||
Reference in New Issue
Block a user