feat: Internalize useCallbackRef and composeEventHandlers, introduce ThreadRoot primitive, and update component imports to use runtime components.

Author: arnaudpfu

packages-test-3/ai-chat/package.json

@@ -21,6 +21,7 @@
     "./primitives/thread-list-item-more": "./src/primitives/thread-list-item-more/index.ts",
     "./runtime": "./src/runtime.tsx",
     "./component-types": "./src/component-types.ts",
+    "./component-type-check": "./src/component-type-check.ts",
     "./hook-types": "./src/hook-types.ts",
     "./utils": "./src/utils/index.ts",
     "./hooks": "./src/hooks/index.ts",

packages-test-3/ai-chat/src/adapters/local-storage-adapter.ts

@@ -1,6 +1,5 @@
 "use client";
 
-import { CustomUIDataTypes } from "../primitives/thread/thread-root";
 import type { ThreadAdapter } from "../types/adapters";
 import type { Thread, Threads } from "../types/entities";
 import type { UIMessage } from "ai";

packages-test-3/ai-chat/src/component-type-check.ts

@@ -0,0 +1 @@
+export type {RuntimeComponents} from './component-types'

packages-test-3/ai-chat/src/component-types.ts

@@ -24,6 +24,7 @@ type Event = {
 export interface RuntimeComponents {
   Box: ComponentType<BaseComponentPropsWithChildren>
   Text: ComponentType<BaseComponentPropsWithChildren>
+  Form: ComponentType<BaseComponentPropsWithChildren & { onSubmit?: (e: Event) => void; }>
   Button: ButtonComponent
   ScrollArea: ComponentType<BaseComponentPropsWithChildren>
   Input: ComponentType<BaseComponentProps & { value?: string; onChange?: (e: Event) => void; placeholder?: string }>

packages-test-3/ai-chat/src/hooks/index.ts

@@ -2,4 +2,5 @@ export * from './use-escape-keydown'
 export * from './use-managed-ref'
 export * from './use-on-resize-content'
 export * from './use-on-scroll-to-bottom'
-export * from './use-size-handle'
+export * from './use-size-handle'
+export * from './use-callback-ref'

packages-test-3/ai-chat/src/hooks/use-callback-ref.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(
+  callback: T | undefined
+): T {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  // Return a memoized callback that will always call the latest callback
+  return useCallback(((...args) => callbackRef.current?.(...args)) as T, [])
+}

packages-test-3/ai-chat/src/hooks/use-on-resize-content.tsx

@@ -1,6 +1,6 @@
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useCallback } from "react";
 import { useManagedRef } from "./use-managed-ref";
+import { useCallbackRef } from "./use-callback-ref";
 
 export const useOnResizeContent = (callback: () => void) => {
   const callbackRef = useCallbackRef(callback);

packages-test-3/ai-chat/src/hooks/use-on-scroll-to-bottom.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useEffect } from "react";
 import { useThreadViewport } from "../primitives/thread/thread-viewport-context";
+import { useCallbackRef } from "./use-callback-ref";
 
 export const useOnScrollToBottom = (
   callback: (config: { behavior: ScrollBehavior }) => void,

packages-test-3/ai-chat/src/model-context/use-assistant-tool-ui.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useThread } from "../primitives/thread";
+import { useThread } from "@creatorem/ai-chat/primitives/thread";
 import type { ToolCallMessagePartComponent } from "../types/message-part-component-types";
 
 export type AssistantToolUIProps<TArgs, TResult> = {

packages-test-3/ai-chat/src/model-context/use-assistant-tool.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useThread } from "../primitives/thread";
+import { useThread } from "@creatorem/ai-chat/primitives/thread";
 import type { ToolCallMessagePartComponent } from "../types/message-part-component-types";
 import type { Tool } from "@creatorem/stream";