New ai

.tool-versions

@@ -1,3 +1,4 @@
 direnv 2.32.3
 nodejs 24.8.0
 pnpm 10.8.0
+bun 1.2.23

packages/components/package.json

@@ -79,6 +79,7 @@
     "immer": "10.1.1",
     "interactjs": "1.10.27",
     "leaflet": "2.0.0-alpha",
+    "mdast": "3.0.0",
     "motion": "12.17.0",
     "nanoid": "5.1.5",
     "react-hotkeys-hook": "4.6.1",
@@ -87,11 +88,15 @@
     "react-player": "2.16.0",
     "react-select": "5.10.1",
     "rehype-raw": "7.0.0",
+    "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
+    "remark-mdx-frontmatter": "5.2.0",
     "tippy.js": "6.3.7",
+    "unified": "11.0.5",
+    "unist-util-visit": "5.0.0",
     "use-deep-compare": "1.3.0",
     "usehooks-ts": "3.1.1",
-    "zod": "4.1.5",
+    "zod": "4.1.12",
     "zundo": "2.3.0",
     "zustand": "4.5.5"
   },
@@ -103,6 +108,7 @@
     "@types/express": "^4.17.21",
     "@types/leaflet": "1.9.20",
     "@types/lodash-es": "4.17.12",
+    "@types/mdast": "4.0.4",
     "@types/node": "^24.5.2",
     "@types/react": "19.1.13",
     "@types/react-dom": "^19.1.9",
@@ -121,16 +127,16 @@
   },
   "peerDependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
+    "@sinclair/typebox": "^0.34.41",
     "@upstart.gg/sdk": "workspace:*",
     "@upstart.gg/style-system": "workspace:*",
-    "@sinclair/typebox": "^0.34.41",
+    "ai": "^5.0.0",
     "chroma-js": "^3.1.2",
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.242.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-icons": "^5.5.0",
-    "ai": "^5.0.0"
+    "react-icons": "^5.5.0"
   },
   "publishConfig": {
     "access": "public"

packages/components/react-markdown.d.ts

@@ -0,0 +1,9 @@
+// react-markdown.d.ts
+import "react-markdown";
+
+declare module "react-markdown" {
+  interface Components {
+    choices?: React.ComponentType<"div">;
+    choice?: React.ComponentType<"button">;
+  }
+}

packages/components/src/editor/components/AttributesSettingsView.tsx

@@ -8,7 +8,7 @@ import type {
   pageAttributesSchema,
   SiteAttributes,
   siteAttributesSchema,
-} from "@upstart.gg/sdk/shared/attributes";
+} from "@upstart.gg/sdk/shared/site/attributes";
 import { useAttributesGroup, useEditorHelpers, usePreviewMode } from "../hooks/use-editor";
 import { useDraft } from "../hooks/use-page-data";
 import type { NavItem } from "./json-form/types";

packages/components/src/editor/components/BrickSettingsView.tsx

@@ -1,6 +1,6 @@
-import type { Brick } from "@upstart.gg/sdk/shared/bricks";
-import { defaultProps } from "@upstart.gg/sdk/shared/bricks/manifests/all-manifests";
-import { mergeIgnoringArrays } from "@upstart.gg/sdk/shared/utils/merge";
+import type { Brick } from "@upstart.gg/sdk/bricks";
+import { defaultProps } from "@upstart.gg/sdk/bricks/manifests";
+import { mergeIgnoringArrays } from "@upstart.gg/sdk/utils";
 import { tx } from "@upstart.gg/style-system/twind";
 import { get, set } from "lodash-es";
 import { useCallback, useMemo } from "react";

packages/components/src/editor/components/Chat/ChatBox.tsx

@@ -5,7 +5,7 @@ import { IoIosAttach } from "react-icons/io";
 import { BiStopCircle } from "react-icons/bi";
 import { type FormEvent, useRef } from "react";
 import { useGenerationState } from "../../hooks/use-page-data";
-import type { UpstartUIMessage } from "@upstart.gg/sdk/shared/ai/types";
+import type { UpstartUIMessage } from "@upstart.gg/sdk/ai";
 
 interface ChatBoxProps {
   input: string;

packages/components/src/editor/components/Chat/ChatChoicesButtons.tsx

@@ -0,0 +1,112 @@
+import type { UseChatHelpers } from "@ai-sdk/react";
+import type { Tools, UpstartUIMessage } from "@upstart.gg/sdk/ai";
+import { tx } from "@upstart.gg/style-system/twind";
+import type { ToolUIPart } from "ai";
+import { motion } from "motion/react";
+import { useState } from "react";
+
+export default function UserChoicesButtons({
+  part,
+  addToolResult,
+  addToolResultMessage,
+}: {
+  part: Extract<ToolUIPart<Tools>, { type: "tool-askUserChoice"; state: "input-available" }>;
+  addToolResult: UseChatHelpers<UpstartUIMessage>["addToolResult"];
+  addToolResultMessage: (text: string) => void;
+}) {
+  const [selectedChoices, setSelectedChoices] = useState<string[]>([]);
+
+  const handleChoiceClick = (choice: string) => {
+    if (part.input.allowMultiple) {
+      setSelectedChoices((prev) =>
+        prev.includes(choice) ? prev.filter((c) => c !== choice) : [...prev, choice],
+      );
+    } else {
+      setSelectedChoices([choice]);
+    }
+  };
+  return (
+    <motion.div
+      className={tx("flex flex-wrap gap-2 justify-between")}
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: "auto" }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
+    >
+      {part.input.allowMultiple ? (
+        <>
+          <div className={tx("flex flex-col flex-wrap gap-1.5")}>
+            {part.input.choices.map((choice, i) => {
+              return (
+                <button
+                  key={`multi-${i}`}
+                  type="button"
+                  className={tx(
+                    "inline-flex justify-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md",
+                    {
+                      "border !border-upstart-300 !text-gray-700 hover:border-upstart-300":
+                        !selectedChoices.includes(choice),
+                      "border !border-transparent !bg-upstart-700 text-white":
+                        selectedChoices.includes(choice),
+                    },
+                  )}
+                  onClick={async () => {
+                    console.log("addtoolresult to part", part);
+                    handleChoiceClick(choice);
+                  }}
+                >
+                  <span className={tx("text-nowrap", selectedChoices.includes(choice) ? "font-bold" : "")}>
+                    {choice}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+          <div className={tx("basis-full w-full mt-6 flex justify-end")}>
+            <button
+              type="button"
+              disabled={selectedChoices.length === 0}
+              className={tx(
+                "inline-flex justify-center content-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md !bg-upstart-700 hover:opacity-90 text-white disabled:opacity-50 disabled:cursor-not-allowed max-w-[150px]",
+              )}
+              onClick={async () => {
+                console.log("addtoolresult to part", part);
+                await addToolResult({
+                  tool: "askUserChoice",
+                  toolCallId: part.toolCallId,
+                  output: selectedChoices,
+                });
+                addToolResultMessage(selectedChoices.join(", "));
+                setSelectedChoices([]);
+              }}
+            >
+              Continue
+            </button>
+          </div>
+        </>
+      ) : (
+        part.input.choices.map((choice, i) => {
+          return (
+            <button
+              key={`single-${i}`}
+              type="button"
+              className={tx(
+                "inline-flex text-nowrap text-center justify-center content-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md !bg-upstart-700 hover:opacity-90 text-white",
+              )}
+              onClick={async () => {
+                await addToolResult({
+                  tool: "askUserChoice",
+                  toolCallId: part.toolCallId,
+                  output: choice,
+                });
+                addToolResultMessage(choice);
+              }}
+            >
+              {choice}
+            </button>
+          );
+        })
+      )}
+    </motion.div>
+  );
+}

packages/components/src/editor/components/Chat/ChatComponent.tsx

@@ -1,7 +1,7 @@
 import { useChat } from "@ai-sdk/react";
-import type { Tools, UpstartUIMessage } from "@upstart.gg/sdk/shared/ai/types";
-import { defineDataRecord } from "@upstart.gg/sdk/shared/datarecords";
-import { defineDatasource } from "@upstart.gg/sdk/shared/datasources";
+import type { Tools, UpstartUIMessage } from "@upstart.gg/sdk/ai";
+import { defineDataRecord } from "@upstart.gg/sdk/datarecords";
+import { defineDatasource } from "@upstart.gg/sdk/datasources";
 import { Spinner, toast } from "@upstart.gg/style-system/system";
 import { css, tx } from "@upstart.gg/style-system/twind";
 import { type ChatOnToolCallCallback, createIdGenerator, DefaultChatTransport, type ToolUIPart } from "ai";
@@ -20,10 +20,10 @@ import {
   useSitePrompt,
   useThemes,
 } from "../../hooks/use-page-data";
-import type { CallContextProps } from "@upstart.gg/sdk/shared/context";
+import type { CallContextProps } from "@upstart.gg/sdk/shared/ai/context";
 
 // Lazy load heavy components
-const Markdown = lazy(() => import("../Markdown"));
+const Markdown = lazy(() => import("./ChatMarkdown"));
 const ChatBox = lazy(() => import("./ChatBox"));
 const ChatReasoningPart = lazy(() => import("./ChatReasoningPart"));
 const ToolRenderer = lazy(() => import("./ChatToolRenderer"));
@@ -33,37 +33,27 @@ const WEB_SEARCH_ENABLED = false;
 const msgCommon = tx(
   "rounded-lg p-4 text-pretty transition-all duration-300 flex flex-col gap-1.5",
   css({
-    // whiteSpace: "pre-line",
-    "& p": {
-      marginBottom: ".28em",
-      lineHeight: "1.625",
-    },
-    "& p:first-child": {
-      marginTop: "0",
-    },
-    "& p:last-child": {
-      marginBottom: "0",
+    "& pre:has(> code) ": {
+      display: "hidden",
     },
     "& code": {
       fontSize: "88%",
     },
     "& ul": {
       listStyle: "outside",
       listStyleType: "square",
-      paddingLeft: "1.6em",
-      marginTop: "0.3em",
-      marginBottom: "0.2em",
     },
     "& ol": {
       listStyle: "outside",
       listStyleType: "decimal",
-      paddingLeft: "1.6em",
-      marginTop: "0.3em",
-      marginBottom: "0.2em",
     },
-    "& li": {
-      marginBottom: "0.35em",
-      paddingLeft: ".3em",
+
+    // whiteSpace: "pre-line",
+    "& >p:first-child": {
+      marginTop: "0",
+    },
+    "& > p:last-child": {
+      marginBottom: "0",
     },
     "& table": {
       width: "100%",
@@ -155,8 +145,8 @@ export default function Chat() {
     console.log("Tool call: %s: ", toolCall.toolName, toolCall);
   };
 
-  const { messages, sendMessage, error, status, regenerate, stop, addToolResult } = useChat<UpstartUIMessage>(
-    {
+  const { messages, sendMessage, setMessages, error, status, regenerate, stop, addToolResult } =
+    useChat<UpstartUIMessage>({
       id: chatSession.id,
       // resume: generationState.isReady === false,
       transport: new DefaultChatTransport({
@@ -188,10 +178,6 @@ export default function Chat() {
 
           const hasToolResults = previousMessage?.parts.some((part) => part.type === "tool-askUserChoice");
 
-          console.log("Send chat request with hasToolResults=%s", hasToolResults);
-          console.log({ message });
-          console.log({ previousMessage });
-
           return {
             body: {
               messages: hasToolResults ? messages.slice(-2) : [message],
@@ -202,17 +188,17 @@ export default function Chat() {
         },
       }),
       messages: chatSession.messages,
+
       generateId: createIdGenerator({
         prefix: "user",
         separator: "_",
-        size: 28,
+        size: 8,
       }),
       onError: (error) => {
         console.error("ERROR", error);
       },
       onToolCall,
-    },
-  );
+    });
   const messagesListRef = useRef<HTMLDivElement>(null);
 
   const onSubmit = (e: Event | FormEvent) => {
@@ -221,6 +207,10 @@ export default function Chat() {
     setInput("");
   };
 
+  const updateMessage = (id: string, update: Partial<UpstartUIMessage>) => {
+    setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === id ? { ...msg, ...update } : msg)));
+  };
+
   const debouncedScroll = useDebounceCallback(() => {
     // when messages change, scroll to the bottom
     if (messagesListRef.current && !hasScrolledUp) {
@@ -254,7 +244,9 @@ export default function Chat() {
   }, []);
 
   const toolInvocations = useMemo(() => {
-    const results = messages
+    const messagesToAnalyze = messages.slice(-1);
+    console.log({ messagesToAnalyze });
+    const results = messagesToAnalyze
       .filter((msg) => msg.role === "assistant")
       .flatMap((msg) => msg.parts as ToolUIPart<Tools>[])
       .filter((part) => part.type.startsWith("tool-"))
@@ -267,7 +259,7 @@ export default function Chat() {
   const hasRunningTools = useMemo(() => {
     // get the last 2 messages
     const results = messages
-      .slice(-2)
+      .slice(-1)
       .filter((msg) => msg.role === "assistant")
       .flatMap((msg) => msg.parts as ToolUIPart<Tools>[])
       .filter((part) => part.type.startsWith("tool-") && part.type !== "tool-askUserChoice")
@@ -278,7 +270,7 @@ export default function Chat() {
 
   const isWaitingForNChoices = useMemo(() => {
     const results = messages
-      .slice(-2)
+      .slice(-1)
       .filter((msg) => msg.role === "assistant")
       .flatMap((msg) => msg.parts as ToolUIPart<Tools>[])
       .filter((part) => part.type === "tool-askUserChoice")
@@ -453,6 +445,11 @@ export default function Chat() {
       msg.parts.some((part) => part.type === "text" || part.type.startsWith("tool-")),
   );
 
+  const dataMessages = messages.filter((msg) => msg.parts.some((part) => part.type.startsWith("data-")));
+
+  console.log("dataMessages", dataMessages);
+  // console.log("All messages length is %d, displaying %d", messages.length, displayedMessages.length);
+
   useEffect(() => {
     if (sendingEnabled) {
       chatboxRef.current?.focus();
@@ -511,15 +508,7 @@ export default function Chat() {
               if (part.type.startsWith("tool-")) {
                 return (
                   <Suspense key={i} fallback={null}>
-                    <ToolRenderer
-                      key={i}
-                      // test showing tools
-                      hasToolsRunning={hasRunningTools}
-                      toolPart={part as ToolUIPart<Tools>}
-                      addToolResult={addToolResult}
-                      addToolResultMessage={(text: string) => sendMessage({ text })}
-                      error={error}
-                    />
+                    <ToolRenderer key={i} toolPart={part as ToolUIPart<Tools>} error={error} />
                   </Suspense>
                 );
               }