Visualization foundations (#6489)

* Create .nvmrc

* Add foundations for viz

* ✨

* 🙈

* 🙈

* Fix useFile hook

* ✂️

* Remove Sparkle from viz

types/src/front/assistant/actions/visualization.ts

@@ -25,3 +25,45 @@ export interface VisualizationActionType extends BaseAction {
 export const VisualizationActionOutputSchema = t.type({
   generation: t.string,
 });
+
+export function visualizationExtractCodeNonStreaming(code: string) {
+  const regex = /<visualization[^>]*>\s*([\s\S]*?)\s*<\/visualization>/;
+  let extractedCode: string | null = null;
+  const match = code.match(regex);
+  if (match && match[1]) {
+    extractedCode = match[1];
+  }
+  if (!extractedCode) {
+    return null;
+  }
+  return extractedCode;
+}
+
+export function visualizationExtractCodeStreaming(code: string) {
+  const startOffset = code.indexOf(">");
+  if (startOffset === -1) {
+    return null;
+  }
+  const endOffset = code.indexOf("</visualization>");
+  if (endOffset === -1) {
+    return code.substring(startOffset + 1);
+  } else {
+    return code.substring(startOffset + 1, endOffset);
+  }
+}
+
+export function visualizationExtractCode(code: string) {
+  return (
+    visualizationExtractCodeNonStreaming(code) ||
+    visualizationExtractCodeStreaming(code)
+  );
+}
+
+// This defines the commands that the iframe can send to the host window.
+export type VisualizationRPCCommand = "getCodeToExecute" | "retry" | "getFile";
+export type VisualizationRPCRequest = {
+  command: VisualizationRPCCommand;
+  messageUniqueId: string;
+  actionId: number;
+  params: unknown;
+};

viz/.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "eqeqeq": "error",
+    "no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
 }

viz/.nvmrc

@@ -0,0 +1 @@
+20.13.0

viz/app/components/Components.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+// We can't use Sparkle components in the viz app,
+// because of client-side rendering issue.
+// So we define the components here.
+
+export const Button = ({
+  label,
+  onClick,
+}: {
+  label: string;
+  onClick: () => void;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-600"
+    >
+      {label}
+    </button>
+  );
+};
+
+export const ErrorMessage = ({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) => {
+  return (
+    <div className="bg-pink-100 border-l-4 border-pink-500 rounded-lg p-4 max-w-md">
+      <div className="flex items-center mb-2">
+        <svg
+          className="w-6 h-6 text-pink-500 mr-2"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+            clipRule="evenodd"
+          />
+        </svg>
+        <h3 className="text-lg font-semibold text-pink-800">{title}</h3>
+      </div>
+      <div className="text-pink-700">{children}</div>
+    </div>
+  );
+};
+
+export const Spinner = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent border-solid rounded-full animate-spin"></div>
+    </div>
+  );
+};