Skip to content

feat(site/src/pages/AgentsPage): make links in chat prompts clickable #27169

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

Draft
ibetitsmike wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(site/src/pages/AgentsPage): make links in chat prompts clickable #27169

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
105 changes: 105 additions & 0 deletions site/src/pages/AgentsPage/components/ChatConversation/ConversationTimeline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1062,6 +1062,79 @@ export const UserMessageWithMixedAttachments: Story = {
},
};

export const UserMessageLinksStayLiteralAndSafe: Story = {
args: {
...buildStoryArgs(
buildUserMessage({
text: "Visit https://coder.com, www.coder.com, see https://coder.com/docs. Literal [docs](https://coder.com/docs) <script>alert(1)</script>",
}),
),
urlTransform: fn((url) =>
url === "https://coder.com" ? "https://proxy.example" : url,
),
},
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
expect(args.urlTransform).toHaveBeenCalled();
const secureLink = canvas.getByRole("link", { name: "https://coder.com" });
expect(secureLink).toHaveAttribute("href", "https://proxy.example");
expect(secureLink).toHaveAttribute("target", "_blank");
expect(secureLink).toHaveAttribute(
"rel",
expect.stringContaining("noopener"),
);
expect(secureLink).toHaveAttribute(
"rel",
expect.stringContaining("noreferrer"),
);

expect(canvas.getByRole("link", { name: "www.coder.com" })).toHaveAttribute(
"href",
"https://www.coder.com",
);
const docsLinks = canvas.getAllByRole("link", {
name: "https://coder.com/docs",
});
expect(docsLinks).toHaveLength(2);
for (const link of docsLinks) {
expect(link).toHaveAttribute("href", "https://coder.com/docs");
}

const userRow = secureLink.closest('[data-role="user"]');
expect(userRow).not.toBeNull();
expect(userRow).toHaveTextContent("see https://coder.com/docs.");
expect(userRow).toHaveTextContent("[docs](https://coder.com/docs)");
expect(userRow).toHaveTextContent("<script>alert(1)</script>");
expect(userRow?.querySelector("script")).toBeNull();
},
};

export const AssistantMessageBareURLIsLinked: Story = {
args: {
...defaultArgs,
parsedMessages: buildMessages([
{
...baseMessage,
id: 1,
role: "assistant",
content: [
{
type: "text",
text: "Read more at https://coder.com/docs",
},
],
},
]),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const link = canvas.getByRole("link", { name: "https://coder.com/docs" });
expect(link).toHaveAttribute("href", "https://coder.com/docs");
expect(link).toHaveAttribute("target", "_blank");
expect(link).toHaveAttribute("rel", expect.stringContaining("noopener"));
},
};

/** Text-only messages must not produce spurious image thumbnails. */
export const UserMessageTextOnly: Story = {
args: {
Expand Down Expand Up @@ -1200,6 +1273,38 @@ export const UserMessageWithImagesAndFileRefs: Story = {
},
};

export const UserMessageLinkWithInlineFileRef: Story = {
args: {
...defaultArgs,
parsedMessages: buildMessages([
{
...baseMessage,
id: 1,
role: "user",
content: [
{ type: "text", text: "Review https://coder.com/docs with " },
{
type: "file-reference",
file_name: "site/src/components/Button.tsx",
start_line: 42,
end_line: 42,
content: "export const Button = ...",
},
{ type: "text", text: " before shipping." },
],
},
]),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(
canvas.getByRole("link", { name: "https://coder.com/docs" }),
).toHaveAttribute("href", "https://coder.com/docs");
expect(canvas.getByText(/Button\.tsx/)).toBeInTheDocument();
expect(canvas.getByText(/before shipping/)).toBeInTheDocument();
},
};

/** File references render inline with text, matching the chat input style. */
export const UserMessageWithInlineFileRef: Story = {
args: {
Expand Down
6 changes: 6 additions & 0 deletions site/src/pages/AgentsPage/components/ChatConversation/ConversationTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,6 +610,7 @@ const ChatMessageItem = memo<{
markdown={parsed.markdown}
isEditing={editingMessageId === message.id}
fadeFromBottom={fadeFromBottom}
urlTransform={urlTransform}
onImageClick={setPreviewImage}
onTextFileClick={setPreviewText}
/>
Expand Down Expand Up @@ -778,6 +779,7 @@ const StickyUserMessage = memo<{
prevUserMessageId?: number;
nextUserMessageId?: number;
onJumpToUserMessage?: (messageId: number) => void;
urlTransform?: UrlTransform;
registerSentinel?: (messageId: number, el: HTMLDivElement | null) => void;
}>(
({
Expand All @@ -789,6 +791,7 @@ const StickyUserMessage = memo<{
prevUserMessageId,
nextUserMessageId,
onJumpToUserMessage,
urlTransform,
registerSentinel,
}) => {
const [isStuck, setIsStuck] = useState(false);
Expand Down Expand Up @@ -1028,6 +1031,7 @@ const StickyUserMessage = memo<{
prevUserMessageId={prevUserMessageId}
nextUserMessageId={nextUserMessageId}
onJumpToUserMessage={onJumpToUserMessage}
urlTransform={urlTransform}
/>
</div>

Expand Down Expand Up @@ -1073,6 +1077,7 @@ const StickyUserMessage = memo<{
prevUserMessageId={prevUserMessageId}
nextUserMessageId={nextUserMessageId}
onJumpToUserMessage={onJumpToUserMessage}
urlTransform={urlTransform}
fadeFromBottom
/>
</div>
Expand Down Expand Up @@ -1266,6 +1271,7 @@ export const ConversationTimeline = memo<ConversationTimelineProps>(
prevUserMessageId={userNeighborsById.get(message.id)?.prevId}
nextUserMessageId={userNeighborsById.get(message.id)?.nextId}
onJumpToUserMessage={jumpToUserMessage}
urlTransform={urlTransform}
registerSentinel={registerSentinel}
/>
);
Expand Down
137 changes: 137 additions & 0 deletions site/src/pages/AgentsPage/components/ChatConversation/LinkifiedText.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { describe, expect, it } from "vitest";
import { tokenizeLinkifiedText } from "./LinkifiedText";

describe("tokenizeLinkifiedText", () => {
it.each([
{
name: "links an HTTPS URL in a sentence",
text: "Visit https://coder.com/docs for details",
expected: [
{ type: "text", value: "Visit " },
{
type: "url",
value: "https://coder.com/docs",
href: "https://coder.com/docs",
},
{ type: "text", value: " for details" },
],
},
{
name: "links an HTTP URL",
text: "http://localhost:3000/path",
expected: [
{
type: "url",
value: "http://localhost:3000/path",
href: "http://localhost:3000/path",
},
],
},
{
name: "adds an HTTPS scheme to a www URL",
text: "www.coder.com",
expected: [
{
type: "url",
value: "www.coder.com",
href: "https://www.coder.com",
},
],
},
{
name: "excludes trailing punctuation",
text: "See https://coder.com/docs., and www.coder.com?",
expected: [
{ type: "text", value: "See " },
{
type: "url",
value: "https://coder.com/docs",
href: "https://coder.com/docs",
},
{ type: "text", value: "., and " },
{
type: "url",
value: "www.coder.com",
href: "https://www.coder.com",
},
{ type: "text", value: "?" },
],
},
{
name: "keeps balanced URL parentheses",
text: "https://en.wikipedia.org/wiki/Foo_(bar)",
expected: [
{
type: "url",
value: "https://en.wikipedia.org/wiki/Foo_(bar)",
href: "https://en.wikipedia.org/wiki/Foo_(bar)",
},
],
},
{
name: "excludes an unmatched trailing parenthesis",
text: "(https://coder.com/docs)",
expected: [
{ type: "text", value: "(" },
{
type: "url",
value: "https://coder.com/docs",
href: "https://coder.com/docs",
},
{ type: "text", value: ")" },
],
},
{
name: "links multiple URLs",
text: "https://coder.com and www.example.com",
expected: [
{
type: "url",
value: "https://coder.com",
href: "https://coder.com",
},
{ type: "text", value: " and " },
{
type: "url",
value: "www.example.com",
href: "https://www.example.com",
},
],
},
{
name: "preserves text without URLs",
text: "Keep *markdown* literal",
expected: [{ type: "text", value: "Keep *markdown* literal" }],
},
{
name: "preserves newlines in text segments",
text: "First line\nhttps://coder.com\nLast line",
expected: [
{ type: "text", value: "First line\n" },
{
type: "url",
value: "https://coder.com",
href: "https://coder.com",
},
{ type: "text", value: "\nLast line" },
],
},
{
name: "does not link a bare domain",
text: "Visit coder.com",
expected: [{ type: "text", value: "Visit coder.com" }],
},
{
name: "does not link incomplete URL prefixes",
text: "Keep https:// and www. literal",
expected: [{ type: "text", value: "Keep https:// and www. literal" }],
},
{
name: "handles empty text",
text: "",
expected: [],
},
])("$name", ({ text, expected }) => {
expect(tokenizeLinkifiedText(text)).toEqual(expected);
});
});
Loading
Loading