begin building zod schemas for llm attributes

app/package.json

@@ -47,6 +47,7 @@
     "three-stdlib": "^2.30.4",
     "use-deep-compare-effect": "^1.8.1",
     "use-zustand": "^0.0.4",
+    "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

app/src/pages/playground/SpanPlaygroundPage.tsx

@@ -1,10 +1,94 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useLoaderData } from "react-router";
+import { z } from "zod";
 
-// import { useLoaderData } from "react-router";
+import { PlaygroundInstance } from "@phoenix/store";
+
+import { spanPlaygroundPageLoaderQuery$data } from "./__generated__/spanPlaygroundPageLoaderQuery.graphql";
 import { Playground } from "./Playground";
 
+type PlaygroundSpan = Extract<
+  spanPlaygroundPageLoaderQuery$data["span"],
+  { __typename: "Span" }
+>;
+
+const toolCallSchema = z
+  .object({
+    function: z
+      .object({
+        name: z.string(),
+        arguments: z.string(),
+      })
+      .partial(),
+  })
+  .partial();
+
+const messageSchema = z
+  .object({
+    role: z.string(),
+    content: z.string(),
+    name: z.string(),
+    tool_calls: z.array(toolCallSchema),
+  })
+  .partial();
+
+const llmAttributesSchema = z
+  .object({
+    model_name: z.string(),
+    prompts: z.array(z.string()),
+    prompt_template: z
+      .object({
+        template: z.string(),
+        variables: z.record(z.string()),
+      })
+      .partial(),
+  })
+  .partial();
+
 export function SpanPlaygroundPage() {
-  // const data = useLoaderData();
+  const data = useLoaderData() as spanPlaygroundPageLoaderQuery$data;
+  const span = useMemo(() => {
+    if (data.span.__typename === "Span") {
+      return data.span;
+    }
+    return null;
+  }, [data.span]);
+
+  if (!span) {
+    throw new Error("Invalid span");
+  }
+
+  const PlaygroundInstance = z.object({
+    template: z.string(),
+  });
 
   return <Playground />;
 }
+
+type MessageTemplate = {
+  messages: { role: string; message: string }[];
+};
+
+const a = z.object({
+  messages: z.array(
+    z.object({
+      role: z.string(),
+      message: z.string(),
+    })
+  ),
+});
+function transformSpanAttributesToPlaygroundInstance(
+  span: PlaygroundSpan
+): PlaygroundInstance {
+  const result = ZMessageTemplate.safeParse(span);
+  if (!result.success) {
+    throw new Error("Invalid data");
+  }
+  return result.data;
+  // return {
+  //   messages: data.messages.map(message => ({
+  //     role: message.role,
+  //     message: message.message
+  //   }))
+  // };
+}

app/src/pages/playground/schemas.ts

@@ -0,0 +1,67 @@
+import { z } from "zod";
+
+import {
+  ImageAttributesPostfixes,
+  LLMAttributePostfixes,
+  MessageAttributePostfixes,
+  MessageContentsAttributePostfixes,
+  SemanticAttributePrefixes,
+} from "@arizeai/openinference-semantic-conventions";
+
+/**
+ * The zod schema for llm tool calls in an input message
+ * @see {@link https://github.com/Arize-ai/openinference/blob/main/spec/semantic_conventions.md|Semantic Conventions}
+ */
+const toolCallSchema = z
+  .object({
+    function: z
+      .object({
+        name: z.string(),
+        arguments: z.string(),
+      })
+      .partial(),
+  })
+  .partial();
+/**
+ * The zod schema for llm message contents
+ * @see {@link https://github.com/Arize-ai/openinference/blob/main/spec/semantic_conventions.md|Semantic Conventions}
+ */
+const messageContentSchema = z.object({
+  [SemanticAttributePrefixes.message_content]: z
+    .object({
+      [MessageContentsAttributePostfixes.type]: z.string(),
+      [MessageContentsAttributePostfixes.text]: z.string(),
+      [MessageContentsAttributePostfixes.image]: z
+        .object({
+          [MessageContentsAttributePostfixes.image]: z
+            .object({
+              [ImageAttributesPostfixes.url]: z.string(),
+            })
+            .partial(),
+        })
+        .partial(),
+    })
+    .partial(),
+});
+const messageSchema = z
+  .object({
+    [MessageAttributePostfixes.role]: z.string(),
+    [MessageAttributePostfixes.content]: z.string(),
+    [MessageAttributePostfixes.name]: z.string(),
+    [MessageAttributePostfixes.tool_calls]: z.array(toolCallSchema),
+    [MessageAttributePostfixes.contents]: z.array(messageContentSchema),
+  })
+  .partial();
+
+const llmAttributesSchema = z
+  .object({
+    [LLMAttributePostfixes.model_name]: z.string(),
+    [LLMAttributePostfixes.prompts]: z.array(z.string()),
+    prompt_template: z
+      .object({
+        template: z.string(),
+        variables: z.record(z.string()),
+      })
+      .partial(),
+  })
+  .partial();