Workers AI Model Page & Catalog Fixes (#17409)

* Implement empty state for model catalog

* Clean up model schema design

* Dark mode fixes for model empty state

Author: hturan

src/components/ModelCatalog.jsx

@@ -184,6 +184,15 @@ const ModelCatalog = ({ models }) => {
 				</div>
 			</div>
 			<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
+				{modelList.length === 0 && (
+					<div className="border bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+						<span className="text-lg !font-bold">No models found</span>
+						<p>
+							Try a different search term, or broaden your search by removing
+							filters.
+						</p>
+					</div>
+				)}
 				{modelList.map((model) => {
 					const isBeta = model.model.properties.find(
 						({ property_id, value }) =>

src/components/models/SchemaRow.astro

@@ -1,38 +1,48 @@
 ---
-import { Type } from "~/components";
+import { Type, MetaInfo } from "~/components";
 import { type SchemaNode } from "@stoplight/json-schema-tree";
 
-const { node } = Astro.props;
+const { node, root } = Astro.props;
 ---
 
-<li class="my-2 !list-none">
-	<code class="mr-2 font-mono rounded-md bg-gray-100">
-		{node.subpath[node.subpath.length - 1]}
-	</code>
+<li
+	class={`py-2 !my-0 !list-none ${root ? "" : "border-l border-l-gray-200 dark:border-l-gray-500 pl-4"}`}
+>
+	{
+		node.title ? (
+			<span class="mr-2 font-bold">{node.title}</span>
+		) : (
+			<code class="mr-2 !pr-0 font-mono rounded-md bg-gray-100">
+				{node.subpath[node.subpath.length - 1]}
+			</code>
+		)
+	}
+
 	{node.primaryType && <Type text={node.primaryType} />}
+	{node.combiners && node.combiners.includes("oneOf") && <Type text="one of" />}
 
 	{
 		node.annotations.default && (
-			<span class="text-xs mr-2">default {node.annotations.default}</span>
+			<MetaInfo text={`default ${node.annotations.default}`} />
 		)
 	}
 	{
 		(node.validations.minLength !== undefined ||
 			node.validations.minimum !== undefined) && (
-			<span class="text-xs mr-2">
-				min {node.validations.minLength || node.validations.minimum}
-			</span>
+			<MetaInfo
+				text={`min ${node.validations.minLength || node.validations.minimum}`}
+			/>
 		)
 	}
 	{
 		(node.validations.maxLength !== undefined ||
 			node.validations.maximum !== undefined) && (
-			<span class="text-xs">
-				max {node.validations.maxLength || node.validations.maximum}
-			</span>
+			<MetaInfo
+				text={`max ${node.validations.maxLength || node.validations.maximum}`}
+			/>
 		)
 	}
-	<p>{node.annotations.description}</p>
+	<p class="!mb-0">{node.annotations.description}</p>
 
 	{
 		node.children && (

src/components/models/SchemaViewer.astro

@@ -56,7 +56,7 @@ jsonSchemaTree.populate();
 <ul class="list-none m-0 p-0">
 	{
 		(jsonSchemaTree.root.children[0] as RegularNode).children?.map(
-			(node: SchemaNode) => <SchemaRow node={node} />,
+			(node: SchemaNode) => <SchemaRow node={node} root />,
 		)
 	}
 </ul>