Merge pull request #2 from ivanleomk/ivanleomk/migrate-representation

Implement AI-SDK

Author: ivanleomk

agent.ts

@@ -21,6 +21,7 @@
 		"ink": "^4.1.0",
 		"ink-text-input": "^6.0.0",
 		"meow": "^11.0.0",
+		"openai": "^6.2.0",
 		"react": "^18.2.0",
 		"zod": "^4.0.5"
 	},

bun.lockb

@@ -1,14 +1,42 @@
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import {Text, Box, useInput, useApp} from 'ink';
 import TextInput from 'ink-text-input';
-import {useMessages} from './hooks/useMessages.js';
+import {useAgent} from './hooks/useAgent.js';
 import Message from './components/Message.js';
+// import {XAIProvider} from './provider/xai.js';
+// import {AnthropicProvider} from './provider/anthropic.js';
+import {XAIProvider} from './provider/xai.js';
 
 export default function App() {
-	const {messages, input, setInput, sendMessage} = useMessages();
+	const provider = useMemo(
+		() =>
+			new XAIProvider({
+				baseURL: 'https://api.x.ai/v1',
+				apiKey: process.env['XAI_API_KEY'],
+				defaultModel: 'grok-code-fast-1',
+				maxTokens: 4096,
+			}),
+		// new AnthropicProvider({
+		// 	defaultModel: 'claude-3-7-sonnet-latest',
+		// 	maxTokens: 8092,
+		// 	reasoningBudget: 4096,
+		// }),
+		[],
+	);
+
+	const {conversation, complete} = useAgent(provider);
+	const [input, setInput] = useState('');
 	const [showShutdown, setShowShutdown] = useState(false);
 	const {exit} = useApp();
 
+	const sendMessage = async () => {
+		if (input.trim().length === 0) {
+			return;
+		}
+		setInput('');
+		await complete(input);
+	};
+
 	useInput((input, key) => {
 		if (key.ctrl && input === 'd') {
 			setShowShutdown(true);
@@ -22,10 +50,10 @@ export default function App() {
 	return (
 		<Box flexDirection="column" height="100%">
 			<Box flexGrow={1} flexDirection="column" gap={1}>
-				{messages.map((message, index) => (
+				{conversation.map((message, index) => (
 					<Message key={index} message={message} />
 				))}
-				{messages.length > 0 && <Box flexGrow={1} />}
+				{conversation.length > 0 && <Box flexGrow={1} />}
 			</Box>
 			<Box width="100%">
 				<Text color="blue">$ </Text>

package.json

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import type {Tool} from '../lib/types.js';
+
+interface CreateFileDisplayProps {
+	toolCall: Tool & {name: 'create_file'};
+}
+
+export default function CreateFileDisplay({toolCall}: CreateFileDisplayProps) {
+	const args = toolCall.args as {path: string; content: string};
+	const lines = args.content.split('\n');
+	const maxLines = 25;
+	const displayLines = lines.slice(0, maxLines);
+	const hasMore = lines.length > maxLines;
+
+	return (
+		<Box flexDirection="column" marginY={0} width="90%" alignSelf="center">
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderBottom={false}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Text color="gray">create_file </Text>
+				<Text color="white">[{args.path}]</Text>
+			</Box>
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderTop={false}
+				padding={1}
+				flexDirection="column"
+			>
+				<Text color="white" wrap="wrap">
+					{displayLines.join('\n')}
+				</Text>
+				{hasMore && <Text color="dim">... total({lines.length}) lines</Text>}
+			</Box>
+		</Box>
+	);
+}

source/app.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import type {Tool} from '../lib/types.js';
+
+interface ListFileDisplayProps {
+	toolCall: Tool & {name: 'list_files'};
+}
+
+export default function ListFileDisplay({toolCall}: ListFileDisplayProps) {
+	const textOutput = toolCall.output.find(item => item.type === 'text');
+	const args = toolCall.args as {directory: string; maxDepth: number};
+
+	if (!textOutput || textOutput.type !== 'text') {
+		return null;
+	}
+
+	const lines = textOutput.text.split('\n');
+	const maxLines = 25;
+	const displayLines = lines.slice(0, maxLines);
+	const hasMore = lines.length > maxLines;
+
+	return (
+		<Box flexDirection="column" marginY={0} width="90%" alignSelf="center">
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderBottom={false}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Text color="gray">list_files </Text>
+				<Text color="white"> [{args.directory}]</Text>
+			</Box>
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderTop={false}
+				padding={1}
+				flexDirection="column"
+			>
+				<Text color="white" wrap="wrap">
+					{displayLines.join('\n')}
+				</Text>
+				{hasMore && (
+					<Text color="dim">
+						... found a total of ({lines.length}) files/directories
+					</Text>
+				)}
+			</Box>
+		</Box>
+	);
+}

source/components/CreateFileDisplay.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import {highlight} from 'cli-highlight';
+
+interface MarkdownTextProps {
+	children: string;
+	color?: string;
+}
+
+function CodeBlock({code, language}: {code: string; language?: string}) {
+	const highlightedCode = language
+		? highlight(code, {language, ignoreIllegals: true})
+		: code;
+
+	return (
+		<Box
+			flexDirection="column"
+			marginY={0}
+			padding={0}
+			width="90%"
+			alignSelf="center"
+		>
+			<Box
+				padding={1}
+				borderStyle="round"
+				borderColor="gray"
+				justifyContent="space-between"
+			>
+				<Text color="white">{highlightedCode}</Text>
+				{language && (
+					<Text color="cyan" dimColor>
+						{language}
+					</Text>
+				)}
+			</Box>
+		</Box>
+	);
+}
+
+function InlineMarkdown({children, color = 'white'}: MarkdownTextProps) {
+	const parts: React.ReactNode[] = [];
+	let currentIndex = 0;
+	const text = children;
+
+	const headerStyles = {
+		1: {
+			bold: true,
+			underline: true,
+			color: 'cyan',
+			fontSize: 20,
+			marginBottom: 1,
+		},
+		2: {bold: true, color: 'cyan', fontSize: 18, marginBottom: 1},
+		3: {bold: true, color: 'white', fontSize: 16, marginBottom: 1},
+	} as const;
+
+	const patterns = [
+		{
+			regex: /^(#{1,4})\s+(.+)/gm,
+			render: (match: string, level: number) => {
+				const style =
+					headerStyles[level as keyof typeof headerStyles] || headerStyles[3];
+				return (
+					<Text key={currentIndex++} {...style}>
+						{match}
+					</Text>
+				);
+			},
+		},
+		{
+			regex: /`([^`]+)`/g,
+			render: (match: string) => (
+				<Text key={currentIndex++} backgroundColor="gray" color="white">
+					{match}
+				</Text>
+			),
+		},
+		{
+			regex: /\*\*([^*]+)\*\*/g,
+			render: (match: string) => (
+				<Text key={currentIndex++} bold>
+					{match}
+				</Text>
+			),
+		},
+		{
+			regex: /\*([^*]+)\*/g,
+			render: (match: string) => (
+				<Text key={currentIndex++} italic>
+					{match}
+				</Text>
+			),
+		},
+	];
+
+	let lastIndex = 0;
+	const matches: Array<{start: number; end: number; node: React.ReactNode}> =
+		[];
+
+	for (const {regex, render} of patterns) {
+		const re = new RegExp(regex);
+		let match;
+		while ((match = re.exec(text)) !== null) {
+			if (match[1]) {
+				const captureGroup = match[2] || match[1];
+				const level = match[2] ? match[1].length : undefined;
+				matches.push({
+					start: match.index,
+					end: match.index + match[0].length,
+					node: render(captureGroup, level as number),
+				});
+			}
+		}
+	}
+
+	matches.sort((a, b) => a.start - b.start);
+
+	const nonOverlapping: Array<{
+		start: number;
+		end: number;
+		node: React.ReactNode;
+	}> = [];
+	for (const match of matches) {
+		const lastItem = nonOverlapping[nonOverlapping.length - 1];
+		if (
+			nonOverlapping.length === 0 ||
+			(lastItem && match.start >= lastItem.end)
+		) {
+			nonOverlapping.push(match);
+		}
+	}
+
+	lastIndex = 0;
+	for (const {start, end, node} of nonOverlapping) {
+		if (start > lastIndex) {
+			parts.push(
+				<Text key={currentIndex++} color={color}>
+					{text.slice(lastIndex, start)}
+				</Text>,
+			);
+		}
+		parts.push(node);
+		lastIndex = end;
+	}
+
+	if (lastIndex < text.length) {
+		parts.push(
+			<Text key={currentIndex++} color={color}>
+				{text.slice(lastIndex)}
+			</Text>,
+		);
+	}
+
+	return <>{parts}</>;
+}
+
+export default function MarkdownText({children, color = 'white'}: MarkdownTextProps) {
+	const codeBlockRegex = /```(\w+)?\n([\s\S]+?)\n?```/g;
+	const segments: React.ReactNode[] = [];
+	let lastIndex = 0;
+	let match;
+	let keyIndex = 0;
+
+	while ((match = codeBlockRegex.exec(children)) !== null) {
+		if (match.index > lastIndex) {
+			const textBefore = children.slice(lastIndex, match.index);
+			segments.push(
+				<Box key={keyIndex++} marginLeft={2}>
+					<Box flexGrow={1} flexShrink={1}>
+						<Text color={color} wrap="wrap">
+							<InlineMarkdown color={color}>{textBefore}</InlineMarkdown>
+						</Text>
+					</Box>
+				</Box>,
+			);
+		}
+
+		if (match[2]) {
+			segments.push(
+				<CodeBlock key={keyIndex++} code={match[2]} language={match[1]} />,
+			);
+		}
+		lastIndex = match.index + match[0].length;
+	}
+
+	if (lastIndex < children.length) {
+		const textAfter = children.slice(lastIndex);
+		segments.push(
+			<Box key={keyIndex++} marginLeft={2}>
+				<Box flexGrow={1} flexShrink={1}>
+					<Text color={color} wrap="wrap">
+						<InlineMarkdown color={color}>{textAfter}</InlineMarkdown>
+					</Text>
+				</Box>
+			</Box>,
+		);
+	}
+
+	return <>{segments}</>;
+}