Spaces:
Build error
Build error
File size: 3,388 Bytes
51ff9e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
Here's a running example of how to perform a task with the provided tools.
--------------------- START OF EXAMPLE ---------------------
USER: I need to find all TypeScript files in the project and then search for files that contain React components.
A: I'll help you find TypeScript files and React components. Let's break this down into steps:
1. First, let's use the glob tool to find all TypeScript files:
<function=glob>
<parameter=pattern>**/*.{ts,tsx}</parameter>
</function>
USER: EXECUTION RESULT of [glob]:
Below are the execution results of the glob command: rg --files . -g **/*.{ts,tsx} --sortr=modified | head -n 100
src/components/Header.tsx
src/components/Button.tsx
src/pages/Home.tsx
src/utils/types.ts
src/App.tsx
src/index.tsx
A: Great! Now let's search for files that likely contain React components by looking for patterns like "export" followed by "function" or "class":
<function=grep>
<parameter=pattern>export\s+(default\s+)?(function|class)</parameter>
<parameter=include>*.{ts,tsx}</parameter>
</function>
USER: EXECUTION RESULT of [grep]:
Below are the execution results of the search command: rg -li export\s+(default\s+)?(function|class) --sortr=modified --glob *.{ts,tsx} .
src/components/Header.tsx
src/components/Button.tsx
src/pages/Home.tsx
src/App.tsx
A: Let's examine one of these components to confirm it's a React component. I'll look at the Header component:
<function=view>
<parameter=path>src/components/Header.tsx</parameter>
</function>
USER: EXECUTION RESULT of [view]:
1 import React from 'react';
2
3 interface HeaderProps {
4 title: string;
5 subtitle?: string;
6 }
7
8 export function Header({ title, subtitle }: HeaderProps) {
9 return (
10 <header className="app-header">
11 <h1>{title}</h1>
12 {subtitle && <h2>{subtitle}</h2>}
13 </header>
14 );
15 }
A: Let me also check the Button component to see its implementation:
<function=view>
<parameter=path>src/components/Button.tsx</parameter>
</function>
USER: EXECUTION RESULT of [view]:
1 import React from 'react';
2
3 interface ButtonProps {
4 onClick: () => void;
5 children: React.ReactNode;
6 variant?: 'primary' | 'secondary';
7 }
8
9 export default function Button({ onClick, children, variant = 'primary' }: ButtonProps) {
10 return (
11 <button
12 className={`btn btn-${variant}`}
13 onClick={onClick}
14 >
15 {children}
16 </button>
17 );
18 }
A: I've found several React components in the project. Here's a summary:
1. Found TypeScript files using glob pattern `**/*.{ts,tsx}`
2. Identified potential React components using grep pattern `export\s+(default\s+)?(function|class)`
3. Confirmed two components:
- `Header.tsx`: A function component that renders a header with title and optional subtitle
- `Button.tsx`: A reusable button component with primary/secondary variants
Would you like me to examine any other components or search for specific features within these components?
<function=finish>
</function>
--------------------- END OF EXAMPLE ---------------------
Do NOT assume the environment is the same as in the example above.
--------------------- NEW TASK DESCRIPTION ---------------------
|