refactor: tool input and result

src/components/ToolInputAndResult.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import Grid from '@mui/material/Grid';
+
+export default function ToolInputAndResult({
+  input,
+  result
+}: {
+  input: ReactNode;
+  result: ReactNode;
+}) {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        {input}
+      </Grid>
+      <Grid item xs={6}>
+        {result}
+      </Grid>
+    </Grid>
+  );
+}

src/components/options/ToolOptionGroups.tsx

@@ -2,10 +2,15 @@ import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { Box, Stack } from '@mui/material';
 
+interface ToolOptionGroup {
+  title: string;
+  component: ReactNode;
+}
+
 export default function ToolOptionGroups({
   groups
 }: {
-  groups: { title: string; component: ReactNode }[];
+  groups: ToolOptionGroup[];
 }) {
   return (
     <Stack direction={'row'} spacing={2}>