✨ Enhance type safety and improve React component handling

Introduced stricter PropTypes, fixed React component keys, and cleanup.

Author: pelikhan

packages/web/src/App.tsx

@@ -1,9 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-/// <reference path="../../core/src/types/prompt_template.d.ts" />
-/// <reference path="./vscode-elements.d.ts" />
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import "@vscode-elements/elements/dist/vscode-button";
 import "@vscode-elements/elements/dist/vscode-single-select";
@@ -185,7 +183,6 @@ function RefreshButton() {
 function ScriptSelect() {
   const scripts = useScripts();
   const { scriptid, setScriptid } = useScriptId();
-  const { refresh } = useApi();
   const { filename } = useScript() || {};
 
   return (
@@ -207,7 +204,7 @@ function ScriptSelect() {
         {scripts
           .filter((s) => !s.isSystem && !s.unlisted)
           .map(({ id, title }) => (
-            <vscode-option value={id} selected={scriptid === id} description={title}>
+            <vscode-option key={id} value={id} selected={scriptid === id} description={title}>
               {id}
             </vscode-option>
           ))}
@@ -282,6 +279,7 @@ function PromptParametersFields() {
             .map(([key, fieldSchema]) => {
               return (
                 <JSONSchemaObjectForm
+                  key={key}
                   schema={fieldSchema as JSONSchemaObject}
                   value={parameters}
                   fieldPrefix={`${key}.`}

packages/web/src/BarChart.tsx

@@ -4,7 +4,7 @@
 import React from "react";
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryTheme } from "victory";
 
-export default function BarChart(props: { rows: any[]; headers: string[] }) {
+export default function BarChart(props: { rows: Record<string, number>[]; headers: string[] }) {
   const { rows, headers } = props;
   const x = headers[0];
   const ys = headers.slice(1);

packages/web/src/Buttons.tsx

@@ -7,19 +7,22 @@ import "@vscode-elements/elements/dist/vscode-button";
 import AIDisclaimer from "./AIDisclaimer";
 import { hosted } from "./configuration";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function extractTextFromChildren(children: any): string {
   if (!children) return "";
 
   return React.Children.toArray(children).reduce((text, child) => {
     if (typeof child === "string") {
       return text + child;
     } else if (React.isValidElement(child)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       return text + extractTextFromChildren((child.props as any).children);
     }
     return text;
   }, "") as string;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function CopyButton(props: { children: any; text?: string }) {
   const { children, text } = props;
   const [copied, setCopied] = useState(false);
@@ -30,7 +33,7 @@ function CopyButton(props: { children: any; text?: string }) {
       await navigator.clipboard.writeText(res);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (err) {}
+    } catch {}
   };
   const title = copied ? "Copied!" : "Copy";
   const buttonText = copied ? "Copied!" : "";
@@ -41,6 +44,7 @@ function CopyButton(props: { children: any; text?: string }) {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function SaveButton(props: { filename?: string; children: any; text?: string }) {
   const { children, text, filename } = props;
   const [saved, setSaved] = useState(false);
@@ -64,7 +68,7 @@ function SaveButton(props: { filename?: string; children: any; text?: string })
       }
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
-    } catch (err) {}
+    } catch {}
   };
   const title = saved ? "Saved!" : "Save";
   return (
@@ -79,6 +83,7 @@ function SaveButton(props: { filename?: string; children: any; text?: string })
 }
 
 export default function CopySaveButtons(props: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   children: any;
   filename?: string;
   text?: string;

packages/web/src/DataTable.tsx

@@ -9,7 +9,7 @@ import "@vscode-elements/elements/dist/vscode-table-row";
 import "@vscode-elements/elements/dist/vscode-table-header-cell";
 import "@vscode-elements/elements/dist/vscode-table-cell";
 
-export default function DataTable(props: { rows: any[]; headers: string[] }) {
+export default function DataTable(props: { rows: Record<string, number>[]; headers: string[] }) {
   const { rows, headers } = props;
   if (!rows?.length || !headers?.length) return null;
 

packages/web/src/DataTableTabs.tsx

@@ -14,7 +14,7 @@ import DataTable from "./DataTable";
 
 export default function DataTableTabs(props: { children: string; chart?: string }) {
   const { children, chart } = props;
-  const rows: any[] = JSON5TryParse(children);
+  const rows: Record<string, number>[] = JSON5TryParse(children);
 
   // find rows that are numbers
   if (!rows?.length && typeof rows[0] !== "object") return null;

packages/web/src/JSONSchema.tsx

@@ -1,8 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-/// <reference path="../../core/src/types/prompt_template.d.ts" />
-/// <reference path="./vscode-elements.d.ts" />
 import React, { Dispatch, SetStateAction, startTransition, useEffect, useState } from "react";
 
 import { underscore } from "inflection";
@@ -233,7 +231,7 @@ function JSONSchemaSimpleTypeFormField(props: {
 function fieldDisplayName(fieldPrefix: string, fieldName: string, field: JSONSchemaSimpleType) {
   return underscore(
     (fieldPrefix ? `${fieldPrefix} / ` : fieldPrefix) + (field.title || fieldName),
-  ).replaceAll(/[_\.]/g, " ");
+  ).replaceAll(/[_.]/g, " ");
 }
 
 export function JSONBooleanOptionsGroup(props: {

packages/web/src/Results.tsx

@@ -204,6 +204,7 @@ function StatsTabPanel() {
   const result = useResult();
   const { usage } = result || {};
   if (!usage) return null;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { cost, ...rest } = usage || {};
 
   const md = usage

packages/web/src/RunnerContext.tsx

@@ -54,7 +54,7 @@ export function RunnerProvider({ children }: { children: React.ReactNode }) {
   useEventListener(client, RunClient.SCRIPT_START_EVENT, start, false);
 
   const runUpdate = useCallback(
-    (e: Event) =>
+    () =>
       startTransition(() => {
         setRunId(client.runId);
         setState("running");
@@ -64,7 +64,7 @@ export function RunnerProvider({ children }: { children: React.ReactNode }) {
   useEventListener(client, RunClient.RUN_EVENT, runUpdate, false);
 
   const end = useCallback(
-    (e: Event) =>
+    () =>
       startTransition(() => {
         setState(undefined);
         if (runId === client.runId) setResult(client.result);
@@ -74,7 +74,7 @@ export function RunnerProvider({ children }: { children: React.ReactNode }) {
   useEventListener(client, RunClient.SCRIPT_END_EVENT, end, false);
 
   const appendTrace = useCallback(
-    (evt: Event) =>
+    () =>
       startTransition(() => {
         setTrace(() => client.trace);
         setOutput(() => client.output);

packages/web/src/useUrlSearchParam.ts

@@ -11,6 +11,7 @@ export function useUrlSearchParams<T>(
   const [state, setState] = useState<T>(initialValues);
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const newState: any = {};
     Object.entries(fields).forEach(([key, field]) => {
       const { type } = field;
@@ -43,7 +44,7 @@ export function useUrlSearchParams<T>(
       if (type === "string") {
         if (value !== "") params.set(key, value as string);
       } else if (type === "boolean") {
-        if (!!value) params.set(key, "1");
+        if (value) params.set(key, "1");
       } else if (type === "integer" || type === "number") {
         const v = value as number;
         if (!isNaN(v)) params.set(key, v.toString());