feat: markdown formatting

package.json

@@ -50,11 +50,14 @@
     "ink": "^4.4.1",
     "ink-link": "^3.0.0",
     "ink-text-input": "^5.0.1",
+    "marked": "^12.0.2",
+    "marked-terminal": "^7.0.0",
     "openai": "^4.42.0",
     "prompts": "^2.4.2",
     "react": "^18.2.0",
     "redent": "^4.0.0",
     "tiktoken": "^1.0.14",
+    "ts-regex-builder": "^1.7.1",
     "update-notifier": "^7.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.6",
@@ -77,6 +80,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
+    "ink-markdown": "^1.0.4",
     "jest": "^29.7.0",
     "mock-fs": "^5.2.0",
     "prettier": "^3.2.5",

src/commands/chat/ui/AiResponseLoader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text } from 'ink';
+import { Markdown } from '../../../components/Markdown.js';
 import { TextSpinner } from '../../../components/TextSpinner.js';
 import { colors } from '../../../theme/colors.js';
 import { texts } from '../texts.js';
@@ -14,7 +15,7 @@ export function AiResponseLoader({ text }: AiResponseLoaderProps) {
       <Text color={colors.assistant}>{texts.assistantLabel}</Text>
       {text ? (
         <>
-          {text} <TextSpinner type="sand" />
+          <Markdown>{text}</Markdown> <TextSpinner type="sand" />
         </>
       ) : (
         <>

src/commands/chat/ui/list/AiChatMessageItem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text } from 'ink';
+//import { any, buildRegExp, capture, negativeLookahead, zeroOrMore } from 'ts-regex-builder';
 import { formatSpeed, formatTime } from '../../../../format.js';
+import { Markdown } from '../../../../components/Markdown.js';
 import { colors } from '../../../../theme/colors.js';
 import { useChatState, type AiChatMessage } from '../../state/state.js';
 import { texts } from '../../texts.js';
@@ -16,7 +18,7 @@ export function AiChatMessageItem({ message }: AiChatMessageItemProps) {
     <>
       <Text color={colors.assistant}>
         <Text>{texts.assistantLabel}</Text>
-        <Text>{message.text}</Text>
+        <Markdown>{message.text}</Markdown>
 
         {verbose && message.responseTime != null ? (
           <Text color={colors.info}>
@@ -31,3 +33,40 @@ export function AiChatMessageItem({ message }: AiChatMessageItemProps) {
     </>
   );
 }
+
+// const asteriskNextToChar = /[^\s*]/;
+
+// const boldRegex = buildRegExp(
+//   [
+//     '**',
+//     negativeLookahead('*'),
+//     capture([asteriskNextToChar, zeroOrMore(any, { greedy: false }), asteriskNextToChar]),
+//     '**',
+//     negativeLookahead('*'),
+//   ],
+//   { global: true },
+// );
+
+// const italicsRegex = buildRegExp(
+//   [
+//     '*',
+//     negativeLookahead('*'),
+//     capture([asteriskNextToChar, zeroOrMore(any, { greedy: false }), asteriskNextToChar]),
+//     '*',
+//     negativeLookahead('*'),
+//   ],
+//   { global: true },
+// );
+
+// function processMessage(message: string) {
+//   const result1 = message.split(boldRegex);
+
+//   text = text.replace(normalItalicsRegex, '_$1_');
+//   text = text.replace(normalBoldRegex, '*$1*');
+
+//   return (
+//     <>
+//       <AiChatMessageItem message={message} />
+//     </>
+//   );
+// }

src/components/Markdown.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from 'ink';
+import { parse, setOptions } from 'marked';
+import TerminalRenderer, { type TerminalRendererOptions } from 'marked-terminal';
+
+export type Props = TerminalRendererOptions & {
+  children: string;
+};
+
+export function Markdown({ children, ...options }: Props) {
+  // @ts-ignore
+  setOptions({ renderer: new TerminalRenderer(options) });
+  // @ts-ignore
+  return <Text>{parse(children).trim()}</Text>;
+}