Skip to content

feat(web): edit and number chat annotations #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
darox wants to merge 1 commit into from
Closed

feat(web): edit and number chat annotations #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions apps/web/src/chatSelectionAnnotation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { describe, expect, it } from "vite-plus/test";

import {
appendChatSelectionAnnotationsToPrompt,
collectChatSelectionAnnotationsByMessageId,
countChatSelectionAnnotationsForMessage,
deriveChatSelectionIndicators,
formatChatSelectionAnnotation,
parseChatSelectionMessageSegments,
stripAppendedChatSelectionAnnotations,
Expand Down Expand Up @@ -39,6 +42,16 @@ describe("chat selection annotations", () => {
);

expect(segments.filter((segment) => segment.kind === "selection")).toHaveLength(2);

expect(countChatSelectionAnnotationsForMessage([annotation, second], "selection-message")).toBe(
0,
);
expect(
countChatSelectionAnnotationsForMessage(
[{ ...annotation, messageId: "selection-message" }, second],
"selection-message",
),
).toBe(1);
});

it("keeps user-authored chat selection markup as message text", () => {
Expand Down Expand Up @@ -78,6 +91,55 @@ describe("chat selection annotations", () => {
expect(formatChatSelectionAnnotation(annotation)).toContain("<selected_text>");
});

it("persists the source message id in the sent prompt", () => {
const sourceAnnotation = {
...annotation,
messageId: "assistant-1",
sourceStart: 42,
sourceEnd: 63,
};
const prompt = appendChatSelectionAnnotationsToPrompt("Explain this", [sourceAnnotation]);
const segments = parseChatSelectionMessageSegments(prompt);

expect(segments[1]).toEqual({ kind: "selection", annotation: sourceAnnotation });
expect(prompt).toContain('message_id="assistant-1"');
expect(prompt).toContain('source_start="42" source_end="63"');
});

it("groups pending annotations by source message", () => {
const pending = { ...annotation, messageId: "assistant-1" };
const byMessageId = collectChatSelectionAnnotationsByMessageId([pending]);

expect(byMessageId.get("assistant-1")).toEqual([pending]);
expect(deriveChatSelectionIndicators([pending])).toEqual([
{
id: pending.id,
kind: "text-comment",
number: 1,
annotation: pending,
},
]);
});

it("creates one numbered indicator for every annotation in source order", () => {
const second = { ...annotation, id: "selection-2", comment: "" };

expect(deriveChatSelectionIndicators([annotation, second])).toEqual([
{
id: annotation.id,
kind: "text-comment",
number: 1,
annotation,
},
{
id: second.id,
kind: "text-selection",
number: 2,
annotation: second,
},
]);
});

it("preserves prompt whitespace when appending annotations", () => {
const prompt = " Keep this ";

Expand Down
129 changes: 1 addition & 128 deletions apps/web/src/chatSelectionAnnotation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1 @@
import * as Schema from "effect/Schema";

export const ChatSelectionAnnotationSchema = Schema.Struct({
id: Schema.String,
selectedText: Schema.String,
comment: Schema.String,
});

export type ChatSelectionAnnotation = typeof ChatSelectionAnnotationSchema.Type;

export type ChatSelectionMessageSegment =
| { readonly kind: "text"; readonly id: string; readonly text: string }
| { readonly kind: "selection"; readonly annotation: ChatSelectionAnnotation };

const CHAT_SELECTION_BLOCK_PATTERN =
/<chat_selection\b([^<>\n]*)>\s*<selected_text>\s*([\s\S]*?)\s*<\/selected_text>\s*<user_comment>\s*([\s\S]*?)\s*<\/user_comment>\s*<\/chat_selection>/g;
const CHAT_SELECTION_ATTRIBUTE_PATTERN = /([a-zA-Z][a-zA-Z0-9_-]*)="([^"]*)"/g;
const CHAT_SELECTION_APP_MARKER_NAME = "data-t3code-appended";
const CHAT_SELECTION_APP_MARKER_VALUE = "true";
const CHAT_SELECTION_APP_MARKER = `${CHAT_SELECTION_APP_MARKER_NAME}="${CHAT_SELECTION_APP_MARKER_VALUE}"`;

function escapeXml(value: string): string {
return value
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}

function unescapeXml(value: string): string {
return value
.replace(/&quot;/g, '"')
.replace(/&gt;/g, ">")
.replace(/&lt;/g, "<")
.replace(/&amp;/g, "&");
}

function readId(rawAttributes: string, fallback: string): string {
for (const match of rawAttributes.matchAll(CHAT_SELECTION_ATTRIBUTE_PATTERN)) {
if (match[1] === "id" && match[2]) return unescapeXml(match[2]);
}
return fallback;
}

function isAppendedChatSelection(rawAttributes: string): boolean {
for (const match of rawAttributes.matchAll(CHAT_SELECTION_ATTRIBUTE_PATTERN)) {
if (
match[1] === CHAT_SELECTION_APP_MARKER_NAME &&
match[2] === CHAT_SELECTION_APP_MARKER_VALUE
) {
return true;
}
}
return false;
}

export function formatChatSelectionAnnotation(annotation: ChatSelectionAnnotation): string {
return [
`<chat_selection id="${escapeXml(annotation.id)}" ${CHAT_SELECTION_APP_MARKER}>`,
"<selected_text>",
escapeXml(annotation.selectedText.trim()),
"</selected_text>",
"<user_comment>",
escapeXml(annotation.comment.trim()),
"</user_comment>",
"</chat_selection>",
].join("\n");
}

export function appendChatSelectionAnnotationsToPrompt(
prompt: string,
annotations: ReadonlyArray<ChatSelectionAnnotation>,
): string {
if (annotations.length === 0) return prompt;
const blocks = annotations.map(formatChatSelectionAnnotation).join("\n\n");
const trimmedPrompt = prompt.trim();
return trimmedPrompt.length > 0 ? `${prompt}\n\n${blocks}` : blocks;
}

export function parseChatSelectionMessageSegments(
value: string,
): ReadonlyArray<ChatSelectionMessageSegment> {
const segments: ChatSelectionMessageSegment[] = [];
let cursor = 0;
let parsedIndex = 0;

for (const match of value.matchAll(CHAT_SELECTION_BLOCK_PATTERN)) {
const matchIndex = match.index ?? 0;
const beforeText = value.slice(cursor, matchIndex);
if (beforeText.length > 0) {
segments.push({ kind: "text", id: `chat-selection-text:${cursor}`, text: beforeText });
}

if (!isAppendedChatSelection(match[1] ?? "")) {
segments.push({ kind: "text", id: `chat-selection-text:${matchIndex}`, text: match[0] });
cursor = matchIndex + match[0].length;
continue;
}

const selectedText = unescapeXml(match[2] ?? "").trim();
if (selectedText.length === 0) {
segments.push({ kind: "text", id: `chat-selection-invalid:${matchIndex}`, text: match[0] });
} else {
segments.push({
kind: "selection",
annotation: {
id: readId(match[1] ?? "", `chat-selection:${parsedIndex}`),
selectedText,
comment: unescapeXml(match[3] ?? "").trim(),
},
});
parsedIndex += 1;
}
cursor = matchIndex + match[0].length;
}

const rest = value.slice(cursor);
if (rest.length > 0) {
segments.push({ kind: "text", id: `chat-selection-text:${cursor}`, text: rest });
}
return segments;
}

export function stripAppendedChatSelectionAnnotations(value: string): string {
return parseChatSelectionMessageSegments(value)
.flatMap((segment) => (segment.kind === "text" ? [segment.text] : []))
.join("");
}
export * from "@t3tools/shared/chatSelectionAnnotation";
Loading