diff --git a/apps/code/src/renderer/features/sessions/components/session-update/parseFileMentions.tsx b/apps/code/src/renderer/features/sessions/components/session-update/parseFileMentions.tsx index 46f693fb7..5d34a27f4 100644 --- a/apps/code/src/renderer/features/sessions/components/session-update/parseFileMentions.tsx +++ b/apps/code/src/renderer/features/sessions/components/session-update/parseFileMentions.tsx @@ -3,7 +3,7 @@ import { defaultRemarkPlugins, } from "@features/editor/components/MarkdownRenderer"; import { File, GithubLogo, Warning } from "@phosphor-icons/react"; -import { Code, Text } from "@radix-ui/themes"; +import { Text } from "@radix-ui/themes"; import type { ReactNode } from "react"; import { memo } from "react"; import type { Components } from "react-markdown"; @@ -13,6 +13,7 @@ const MENTION_TAG_REGEX = /||[\s\S]*?<\/error_context>/g; const MENTION_TAG_TEST = /<(?:file\s+path|github_issue\s+number|error_context\s+label)="[^"]+"/; +const SLASH_COMMAND_START = /^\/([a-zA-Z][\w-]*)(?=\s|$)/; const inlineComponents: Components = { ...baseComponents, @@ -39,11 +40,14 @@ export const InlineMarkdown = memo(function InlineMarkdown({ }); export function hasMentionTags(content: string): boolean { - return MENTION_TAG_TEST.test(content); + return MENTION_TAG_TEST.test(content) || SLASH_COMMAND_START.test(content); } export const hasFileMentions = hasMentionTags; +const chipClass = + "inline-flex items-center gap-1 rounded-[var(--radius-1)] bg-[var(--accent-a3)] px-1 py-px align-middle font-medium text-[var(--accent-11)]"; + function MentionChip({ icon, label, @@ -53,23 +57,30 @@ function MentionChip({ label: string; onClick?: () => void; }) { + const style = { + fontSize: "var(--font-size-1)", + margin: "0 2px", + }; + + if (onClick) { + return ( + + ); + } + return ( - + {icon} {label} - + ); } @@ -77,8 +88,17 @@ export function parseMentionTags(content: string): ReactNode[] { const parts: ReactNode[] = []; let lastIndex = 0; + const slashMatch = content.match(SLASH_COMMAND_START); + if (slashMatch) { + parts.push( + , + ); + lastIndex = slashMatch[0].length; + } + for (const match of content.matchAll(MENTION_TAG_REGEX)) { const matchIndex = match.index ?? 0; + if (matchIndex < lastIndex) continue; if (matchIndex > lastIndex) { parts.push(