@ridit/lens 0.1.8 → 0.2.0

package/src/components/chat/ChatMessage.tsx

@@ -1,415 +1,29 @@
-// StaticMessage.tsx
 import React from "react";
 import { Box, Text } from "ink";
-import { tokenize } from "sugar-high";
-import {
-  ACCENT,
-  TOKEN_KEYWORD,
-  TOKEN_STRING,
-  TOKEN_NUMBER,
-  TOKEN_PROPERTY,
-  TOKEN_ENTITY,
-  TOKEN_TEXT,
-  TOKEN_MUTED,
-  TOKEN_COMMENT,
-} from "../../colors";
+import { ACCENT } from "../../colors";
 import type { Message } from "../../types/chat";
 
-const T_IDENTIFIER = 0;
-const T_KEYWORD = 1;
-const T_STRING = 2;
-const T_CLS_NUMBER = 3;
-const T_PROPERTY = 4;
-const T_ENTITY = 5;
-const T_JSX_LITERAL = 6;
-const T_SIGN = 7;
-const T_COMMENT = 8;
-const T_BREAK = 9;
-const T_SPACE = 10;
-
-const JS_LANGS = new Set([
-  "js",
-  "javascript",
-  "jsx",
-  "ts",
-  "typescript",
-  "tsx",
-  "mjs",
-  "cjs",
-]);
-
-function tokenColor(type: number): string {
-  switch (type) {
-    case T_KEYWORD:
-      return TOKEN_KEYWORD;
-    case T_STRING:
-      return TOKEN_STRING;
-    case T_CLS_NUMBER:
-      return TOKEN_NUMBER;
-    case T_PROPERTY:
-      return TOKEN_PROPERTY;
-    case T_ENTITY:
-      return TOKEN_ENTITY;
-    case T_JSX_LITERAL:
-      return TOKEN_TEXT;
-    case T_SIGN:
-      return TOKEN_MUTED;
-    case T_COMMENT:
-      return TOKEN_COMMENT;
-    case T_IDENTIFIER:
-      return TOKEN_TEXT;
-    default:
-      return TOKEN_TEXT;
-  }
-}
-
-type SimpleToken = { color: string; text: string };
-
-const PYTHON_KW = new Set([
-  "def",
-  "class",
-  "import",
-  "from",
-  "return",
-  "if",
-  "elif",
-  "else",
-  "for",
-  "while",
-  "in",
-  "not",
-  "and",
-  "or",
-  "is",
-  "None",
-  "True",
-  "False",
-  "try",
-  "except",
-  "finally",
-  "with",
-  "as",
-  "pass",
-  "break",
-  "continue",
-  "raise",
-  "yield",
-  "lambda",
-  "async",
-  "await",
-  "del",
-  "global",
-  "nonlocal",
-  "assert",
-]);
-const RUST_KW = new Set([
-  "fn",
-  "let",
-  "mut",
-  "const",
-  "struct",
-  "enum",
-  "impl",
-  "trait",
-  "pub",
-  "use",
-  "mod",
-  "match",
-  "if",
-  "else",
-  "loop",
-  "while",
-  "for",
-  "in",
-  "return",
-  "self",
-  "Self",
-  "super",
-  "where",
-  "type",
-  "as",
-  "ref",
-  "move",
-  "unsafe",
-  "extern",
-  "dyn",
-  "async",
-  "await",
-  "true",
-  "false",
-  "Some",
-  "None",
-  "Ok",
-  "Err",
-]);
-const GO_KW = new Set([
-  "func",
-  "var",
-  "const",
-  "type",
-  "struct",
-  "interface",
-  "package",
-  "import",
-  "return",
-  "if",
-  "else",
-  "for",
-  "range",
-  "switch",
-  "case",
-  "default",
-  "break",
-  "continue",
-  "goto",
-  "defer",
-  "go",
-  "chan",
-  "map",
-  "make",
-  "new",
-  "nil",
-  "true",
-  "false",
-  "error",
-]);
-const SHELL_KW = new Set([
-  "if",
-  "then",
-  "else",
-  "elif",
-  "fi",
-  "for",
-  "do",
-  "done",
-  "while",
-  "case",
-  "esac",
-  "in",
-  "function",
-  "return",
-  "echo",
-  "export",
-  "local",
-  "source",
-  "exit",
-]);
-const CSS_AT = /^@[\w-]+/;
-const CSS_PROP = /^[\w-]+(?=\s*:)/;
-
-function tokenizeGeneric(code: string, lang: string): SimpleToken[][] {
-  const keywords =
-    lang === "python" || lang === "py"
-      ? PYTHON_KW
-      : lang === "rust" || lang === "rs"
-        ? RUST_KW
-        : lang === "go"
-          ? GO_KW
-          : lang === "bash" ||
-              lang === "sh" ||
-              lang === "shell" ||
-              lang === "zsh"
-            ? SHELL_KW
-            : new Set<string>();
-
-  const lines = code.split("\n");
-  return lines.map((line) => {
-    const tokens: SimpleToken[] = [];
-    let i = 0;
-
-    const push = (color: string, text: string) => {
-      if (text) tokens.push({ color, text });
-    };
-
-    while (i < line.length) {
-      const rest = line.slice(i);
-
-      const commentPrefixes =
-        lang === "python" || lang === "py"
-          ? ["#"]
-          : lang === "bash" ||
-              lang === "sh" ||
-              lang === "shell" ||
-              lang === "zsh"
-            ? ["#"]
-            : lang === "css" || lang === "scss"
-              ? ["//", "/*"]
-              : lang === "html" || lang === "xml"
-                ? ["<!--"]
-                : lang === "sql"
-                  ? ["--", "#"]
-                  : ["//", "#"];
-
-      let matchedComment = false;
-      for (const prefix of commentPrefixes) {
-        if (rest.startsWith(prefix)) {
-          push(TOKEN_COMMENT, line.slice(i));
-          i = line.length;
-          matchedComment = true;
-          break;
-        }
-      }
-      if (matchedComment) continue;
-
-      if (line[i] === '"' || line[i] === "'" || line[i] === "`") {
-        const quote = line[i]!;
-        let j = i + 1;
-        while (j < line.length) {
-          if (line[j] === "\\") {
-            j += 2;
-            continue;
-          }
-          if (line[j] === quote) {
-            j++;
-            break;
-          }
-          j++;
-        }
-        push(TOKEN_STRING, line.slice(i, j));
-        i = j;
-        continue;
-      }
-
-      const numMatch = rest.match(/^-?\d+\.?\d*/);
-      if (numMatch && (i === 0 || !/\w/.test(line[i - 1] ?? ""))) {
-        push(TOKEN_NUMBER, numMatch[0]);
-        i += numMatch[0].length;
-        continue;
-      }
-
-      if (lang === "css" || lang === "scss") {
-        const atMatch = rest.match(CSS_AT);
-        if (atMatch) {
-          push(TOKEN_KEYWORD, atMatch[0]);
-          i += atMatch[0].length;
-          continue;
-        }
-        const propMatch = rest.match(CSS_PROP);
-        if (propMatch) {
-          push(TOKEN_PROPERTY, propMatch[0]);
-          i += propMatch[0].length;
-          continue;
-        }
-      }
-
-      if ((lang === "html" || lang === "xml") && line[i] === "<") {
-        const tagMatch = rest.match(/^<\/?[\w:-]+/);
-        if (tagMatch) {
-          push(TOKEN_ENTITY, tagMatch[0]);
-          i += tagMatch[0].length;
-          continue;
-        }
-      }
-
-      const wordMatch = rest.match(/^[a-zA-Z_$][\w$]*/);
-      if (wordMatch) {
-        const word = wordMatch[0];
-        push(keywords.has(word) ? TOKEN_KEYWORD : TOKEN_TEXT, word);
-        i += word.length;
-        continue;
-      }
-
-      const opMatch = rest.match(/^[^\w\s"'`]+/);
-      if (opMatch) {
-        push(TOKEN_MUTED, opMatch[0]);
-        i += opMatch[0].length;
-        continue;
-      }
-
-      push(TOKEN_TEXT, line[i]!);
-      i++;
-    }
-
-    return tokens;
-  });
-}
-
-function HighlightedLine({ tokens }: { tokens: SimpleToken[] }) {
-  return (
-    <Text>
-      {"  "}
-      {tokens.map((t, i) => (
-        <Text key={i} color={t.color as any}>
-          {t.text}
-        </Text>
-      ))}
-    </Text>
-  );
-}
-
-function CodeBlock({ lang, code }: { lang: string; code: string }) {
-  const normalizedLang = lang.toLowerCase().trim();
-
-  let lines: SimpleToken[][];
-
-  if (JS_LANGS.has(normalizedLang)) {
-    const tokens = tokenize(code);
-    const lineAccum: SimpleToken[][] = [[]];
-
-    for (const [type, value] of tokens) {
-      if (type === T_BREAK) {
-        lineAccum.push([]);
-      } else if (type !== T_SPACE) {
-        lineAccum[lineAccum.length - 1]!.push({
-          color: tokenColor(type),
-          text: value,
-        });
-      } else {
-        lineAccum[lineAccum.length - 1]!.push({
-          color: TOKEN_TEXT,
-          text: value,
-        });
-      }
-    }
-    lines = lineAccum;
-  } else if (normalizedLang) {
-    lines = tokenizeGeneric(code, normalizedLang);
-  } else {
-    lines = code.split("\n").map((l) => [{ color: TOKEN_TEXT, text: l }]);
-  }
-
-  return (
-    <Box flexDirection="column" marginY={1} marginLeft={2}>
-      {normalizedLang ? (
-        <Text color={TOKEN_MUTED} dimColor>
-          {normalizedLang}
-        </Text>
-      ) : null}
-      {lines.map((lineTokens, i) => (
-        <HighlightedLine key={i} tokens={lineTokens} />
-      ))}
-    </Box>
-  );
-}
-
 function InlineText({ text }: { text: string }) {
-  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g);
+  const parts = text.split(/(`[^`]+`|\*\*[^*]+\*\*)/g);
   return (
     <>
       {parts.map((part, i) => {
-        if (part.startsWith("**") && part.endsWith("**")) {
-          return (
-            <Text key={i} bold color={TOKEN_TEXT}>
-              {part.slice(2, -2)}
-            </Text>
-          );
-        }
-        if (part.startsWith("*") && part.endsWith("*") && part.length > 2) {
+        if (part.startsWith("`") && part.endsWith("`")) {
           return (
-            <Text key={i} italic color={TOKEN_TEXT}>
+            <Text key={i} color={ACCENT}>
               {part.slice(1, -1)}
             </Text>
           );
         }
-        if (part.startsWith("`") && part.endsWith("`")) {
+        if (part.startsWith("**") && part.endsWith("**")) {
           return (
-            <Text key={i} color={ACCENT}>
-              {part.slice(1, -1)}
+            <Text key={i} bold color="white">
+              {part.slice(2, -2)}
             </Text>
           );
         }
         return (
-          <Text key={i} color={TOKEN_TEXT}>
+          <Text key={i} color="white">
             {part}
           </Text>
         );
@@ -418,177 +32,67 @@ function InlineText({ text }: { text: string }) {
   );
 }
 
-function Heading({ level, text }: { level: 1 | 2 | 3; text: string }) {
-  if (level === 1) {
-    return (
-      <Box marginTop={1}>
-        <Text color={ACCENT} bold underline>
-          {text}
-        </Text>
-      </Box>
-    );
-  }
-  if (level === 2) {
-    return (
-      <Box marginTop={1}>
-        <Text color={ACCENT} bold>
-          {text}
-        </Text>
-      </Box>
-    );
-  }
-  return (
-    <Box marginTop={1}>
-      <Text color={TOKEN_TEXT} bold>
-        {text}
-      </Text>
-    </Box>
-  );
-}
-
-function BulletItem({ text }: { text: string }) {
-  return (
-    <Box gap={1}>
-      <Text color={ACCENT}>{"*"}</Text>
-      <Box flexShrink={1}>
-        <InlineText text={text} />
-      </Box>
-    </Box>
-  );
-}
-
-function NumberedItem({ num, text }: { num: string; text: string }) {
-  return (
-    <Box gap={1}>
-      <Text color={TOKEN_MUTED}>{num}.</Text>
-      <Box flexShrink={1}>
-        <InlineText text={text} />
-      </Box>
-    </Box>
-  );
-}
-
-function BlockQuote({ text }: { text: string }) {
+function CodeBlock({ lang, code }: { lang: string; code: string }) {
   return (
-    <Box gap={1} marginLeft={1}>
-      <Text color={TOKEN_MUTED}>{"│"}</Text>
-      <Text color={TOKEN_MUTED} dimColor>
-        {text}
-      </Text>
+    <Box flexDirection="column">
+      {code.split("\n").map((line, i) => (
+        <Text key={i} color={ACCENT}>
+          {"  "}
+          {line}
+        </Text>
+      ))}
     </Box>
   );
 }
 
-type Block =
-  | { type: "heading"; level: 1 | 2 | 3; text: string }
-  | { type: "code"; lang: string; code: string }
-  | { type: "bullet"; text: string }
-  | { type: "numbered"; num: string; text: string }
-  | { type: "blockquote"; text: string }
-  | { type: "hr" }
-  | { type: "paragraph"; text: string };
-
-function parseBlocks(content: string): Block[] {
-  const blocks: Block[] = [];
-  const segments = content.split(/(```[\s\S]*?```)/g);
-
-  for (const seg of segments) {
-    if (seg.startsWith("```")) {
-      const lines = seg.slice(3).split("\n");
-      const lang = lines[0]?.trim() ?? "";
-      const code = lines
-        .slice(1)
-        .join("\n")
-        .replace(/```\s*$/, "")
-        .trimEnd();
-      blocks.push({ type: "code", lang, code });
-      continue;
-    }
-
-    for (const line of seg.split("\n")) {
-      const trimmed = line.trim();
-      if (!trimmed) continue;
-
-      const h3 = trimmed.match(/^### (.+)$/);
-      const h2 = trimmed.match(/^## (.+)$/);
-      const h1 = trimmed.match(/^# (.+)$/);
-      if (h3) {
-        blocks.push({ type: "heading", level: 3, text: h3[1]! });
-        continue;
-      }
-      if (h2) {
-        blocks.push({ type: "heading", level: 2, text: h2[1]! });
-        continue;
-      }
-      if (h1) {
-        blocks.push({ type: "heading", level: 1, text: h1[1]! });
-        continue;
-      }
-
-      if (/^[-*_]{3,}$/.test(trimmed)) {
-        blocks.push({ type: "hr" });
-        continue;
-      }
-
-      if (trimmed.startsWith("> ")) {
-        blocks.push({ type: "blockquote", text: trimmed.slice(2).trim() });
-        continue;
-      }
-
-      if (/^[-*•]\s/.test(trimmed)) {
-        blocks.push({ type: "bullet", text: trimmed.slice(2).trim() });
-        continue;
-      }
-
-      const numMatch = trimmed.match(/^(\d+)\.\s(.+)/);
-      if (numMatch) {
-        blocks.push({
-          type: "numbered",
-          num: numMatch[1]!,
-          text: numMatch[2]!,
-        });
-        continue;
-      }
-
-      blocks.push({ type: "paragraph", text: trimmed });
-    }
-  }
-
-  return blocks;
-}
-
 function MessageBody({ content }: { content: string }) {
-  const blocks = parseBlocks(content);
+  const segments = content.split(/(```[\s\S]*?```)/g);
 
   return (
     <Box flexDirection="column">
-      {blocks.map((block, i) => {
-        switch (block.type) {
-          case "heading":
-            return <Heading key={i} level={block.level} text={block.text} />;
-          case "code":
-            return <CodeBlock key={i} lang={block.lang} code={block.code} />;
-          case "bullet":
-            return <BulletItem key={i} text={block.text} />;
-          case "numbered":
-            return <NumberedItem key={i} num={block.num} text={block.text} />;
-          case "blockquote":
-            return <BlockQuote key={i} text={block.text} />;
-          case "hr":
-            return (
-              <Box key={i} marginY={1}>
-                <Text color={TOKEN_MUTED} dimColor>
-                  {"─".repeat(40)}
-                </Text>
-              </Box>
-            );
-          case "paragraph":
-            return (
-              <Box key={i}>
-                <InlineText text={block.text} />
-              </Box>
-            );
+      {segments.map((seg, si) => {
+        if (seg.startsWith("```")) {
+          const lines = seg.slice(3).split("\n");
+          const lang = lines[0]?.trim() ?? "";
+          const code = lines
+            .slice(1)
+            .join("\n")
+            .replace(/```\s*$/, "")
+            .trimEnd();
+          return <CodeBlock key={si} lang={lang} code={code} />;
         }
+
+        const lines = seg.split("\n").filter((l) => l.trim() !== "");
+        return (
+          <Box key={si} flexDirection="column">
+            {lines.map((line, li) => {
+              if (line.match(/^[-*•]\s/)) {
+                return (
+                  <Box key={li} gap={1}>
+                    <Text color={ACCENT}>*</Text>
+                    <InlineText text={line.slice(2).trim()} />
+                  </Box>
+                );
+              }
+
+              if (line.match(/^\d+\.\s/)) {
+                const num = line.match(/^(\d+)\.\s/)![1];
+                return (
+                  <Box key={li} gap={1}>
+                    <Text color="gray">{num}.</Text>
+                    <InlineText text={line.replace(/^\d+\.\s/, "").trim()} />
+                  </Box>
+                );
+              }
+
+              return (
+                <Box key={li}>
+                  <InlineText text={line} />
+                </Box>
+              );
+            })}
+          </Box>
+        );
       })}
     </Box>
   );
@@ -597,9 +101,15 @@ function MessageBody({ content }: { content: string }) {
 export function StaticMessage({ msg }: { msg: Message }) {
   if (msg.role === "user") {
     return (
-      <Box marginBottom={1} gap={1}>
-        <Text color={TOKEN_MUTED}>{">"}</Text>
-        <Text color={TOKEN_TEXT} bold>
+      <Box
+        marginBottom={1}
+        gap={1}
+        backgroundColor={"#1a1a1a"}
+        paddingLeft={1}
+        paddingRight={2}
+      >
+        <Text color="gray">{">"}</Text>
+        <Text color="white" bold>
           {msg.content}
         </Text>
       </Box>
@@ -611,12 +121,6 @@ export function StaticMessage({ msg }: { msg: Message }) {
       shell: "$",
       fetch: "~>",
       "read-file": "r",
-      "read-folder": "d",
-      grep: "/",
-      "delete-file": "x",
-      "delete-folder": "X",
-      "open-url": "↗",
-      "generate-pdf": "P",
       "write-file": "w",
       search: "?",
     };
@@ -632,17 +136,14 @@ export function StaticMessage({ msg }: { msg: Message }) {
       <Box flexDirection="column" marginBottom={1}>
         <Box gap={1}>
           <Text color={msg.approved ? ACCENT : "red"}>{icon}</Text>
-          <Text
-            color={msg.approved ? TOKEN_MUTED : "red"}
-            dimColor={!msg.approved}
-          >
+          <Text color={msg.approved ? "gray" : "red"} dimColor={!msg.approved}>
             {label}
           </Text>
           {!msg.approved && <Text color="red">denied</Text>}
         </Box>
         {msg.approved && msg.result && (
           <Box marginLeft={2}>
-            <Text color={TOKEN_MUTED}>
+            <Text color="gray">
               {msg.result.split("\n")[0]?.slice(0, 120)}
               {(msg.result.split("\n")[0]?.length ?? 0) > 120 ? "…" : ""}
             </Text>
@@ -660,13 +161,10 @@ export function StaticMessage({ msg }: { msg: Message }) {
           <MessageBody content={msg.content} />
         </Box>
         <Box marginLeft={2} gap={1}>
-          <Text color={msg.applied ? "green" : TOKEN_MUTED}>
+          <Text color={msg.applied ? "green" : "gray"}>
             {msg.applied ? "✓" : "·"}
           </Text>
-          <Text
-            color={msg.applied ? "green" : TOKEN_MUTED}
-            dimColor={!msg.applied}
-          >
+          <Text color={msg.applied ? "green" : "gray"} dimColor={!msg.applied}>
             {msg.applied ? "changes applied" : "changes skipped"}
           </Text>
         </Box>