Merge branch 'main' into fix/supported-locale-link

Author: weedon-openai

.changeset/config.json

@@ -6,6 +6,5 @@
   "linked": [],
   "access": "public",
   "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": ["react-explorer"]
+  "updateInternalDependencies": "patch"
 }

README.md

@@ -83,6 +83,11 @@ Just add the ChatKit component, give it a client token, and customize the chat e
    }
    ```
 
+## See working examples
+
+- [Starter app](https://github.com/openai/openai-chatkit-starter-app) - Clone a repo to start with a fully working template
+- [Samples](https://github.com/openai/openai-chatkit-advanced-samples) - See working examples of ChatKit and get inspired
+
 ## License
 
 This project is licensed under the [Apache License 2.0](LICENSE).

packages/chatkit-react/CHANGELOG.md

@@ -0,0 +1,28 @@
+# @openai/chatkit-react
+
+## 1.1.1
+
+### Patch Changes
+
+- 7385e2f: Fix issue where ref was not being set
+
+## 1.1.0
+
+### Minor Changes
+
+- 3de3243: Exposed a ref to the underlying `OpenAIChatKit` DOM element in the return value of `useChatKit`
+
+### Patch Changes
+
+- 3de3243: Removed usage of React 19 only ref callback cleanup function
+
+## 1.0.0
+
+### Major Changes
+
+- 5e4488e: Initial release
+
+### Patch Changes
+
+- Updated dependencies [5e4488e]
+  - @openai/chatkit@1.0.0

packages/chatkit-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openai/chatkit-react",
-  "version": "0.0.0",
+  "version": "1.1.1",
   "description": "React bindings for the ChatKit Web Component.",
   "type": "module",
   "sideEffects": false,
@@ -43,5 +43,9 @@
     "access": "public",
     "provenance": false
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openai/chatkit-js"
+  },
   "license": "MIT"
 }

packages/chatkit-react/src/ChatKit.tsx

@@ -22,8 +22,8 @@ export const ChatKit = React.forwardRef<OpenAIChatKit, ChatKitProps>(
     const ref = React.useRef<OpenAIChatKit | null>(null);
 
     React.useLayoutEffect(() => {
-      if (!ref.current) return;
       const el = ref.current;
+      if (!el) return;
 
       // Fast path: element is already defined
       if (customElements.get('openai-chatkit')) {
@@ -46,45 +46,40 @@ export const ChatKit = React.forwardRef<OpenAIChatKit, ChatKitProps>(
       <openai-chatkit
         ref={(chatKit) => {
           ref.current = chatKit;
+
           control.setInstance(chatKit);
+
           if (typeof forwardedRef === 'function') {
             forwardedRef(chatKit);
           } else if (forwardedRef) {
             forwardedRef.current = chatKit;
           }
 
-          if (ref.current) {
-            const abortController = new AbortController();
-            const events = {
-              'chatkit.error': 'onError',
-              'chatkit.response.end': 'onResponseEnd',
-              'chatkit.response.start': 'onResponseStart',
-              'chatkit.log': 'onLog',
-              'chatkit.thread.change': 'onThreadChange',
-              'chatkit.thread.load.start': 'onThreadLoadStart',
-              'chatkit.thread.load.end': 'onThreadLoadEnd',
-            } satisfies {
-              [K in keyof ChatKitEvents]: ToEventHandlerKey<K>;
-            };
+          if (!ref.current) {
+            return;
+          }
+
+          const events: {
+            [K in keyof ChatKitEvents]: ToEventHandlerKey<K>;
+          } = {
+            'chatkit.error': 'onError',
+            'chatkit.response.end': 'onResponseEnd',
+            'chatkit.response.start': 'onResponseStart',
+            'chatkit.log': 'onLog',
+            'chatkit.thread.change': 'onThreadChange',
+            'chatkit.thread.load.start': 'onThreadLoadStart',
+            'chatkit.thread.load.end': 'onThreadLoadEnd',
+          };
 
-            for (const eventName of Object.keys(
-              events,
-            ) as (keyof ChatKitEvents)[]) {
-              ref.current.addEventListener(
-                eventName,
-                (e) => {
-                  const handler = control.handlers[events[eventName]];
-                  if (typeof handler === 'function') {
-                    handler(e.detail as any);
-                  }
-                },
-                { signal: abortController.signal },
-              );
-            }
+          const eventNames = Object.keys(events) as (keyof ChatKitEvents)[];
 
-            return () => {
-              abortController.abort();
-            };
+          for (const event of eventNames) {
+            ref.current.addEventListener(event, (e) => {
+              const handler = control.handlers[events[event]];
+              if (typeof handler === 'function') {
+                handler(e.detail as any);
+              }
+            });
           }
         }}
         {...htmlProps}

packages/chatkit-react/src/useChatKit.ts

@@ -50,6 +50,7 @@ export type ChatKitControl = {
 
 export type UseChatKitReturn = ChatKitMethods & {
   control: ChatKitControl;
+  ref: React.RefObject<OpenAIChatKit | null>;
 };
 
 export function useChatKit(options: UseChatKitOptions): UseChatKitReturn {
@@ -98,5 +99,8 @@ export function useChatKit(options: UseChatKitOptions): UseChatKitReturn {
     };
   }, [stableOptions, setInstance]);
 
-  return React.useMemo(() => ({ ...methods, control }), [methods, control]);
+  return React.useMemo(
+    () => ({ ...methods, control, ref }),
+    [methods, control],
+  );
 }

packages/chatkit/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @openai/chatkit
+
+## 1.0.0
+
+### Major Changes
+
+- 5e4488e: Initial release

packages/chatkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openai/chatkit",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "description": "Type definitions for the ChatKit Web Component.",
   "sideEffects": false,
@@ -22,5 +22,9 @@
     "access": "public",
     "provenance": false
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openai/chatkit-js"
+  },
   "license": "MIT"
 }

packages/docs/astro.config.ts

@@ -66,6 +66,19 @@ const sidebar = [
       },
     ],
   },
+  {
+    label: 'Examples',
+    items: [
+      {
+        label: 'Starter App',
+        link: 'https://github.com/openai/openai-chatkit-starter-app',
+      },
+      {
+        label: 'Advanced Samples',
+        link: 'https://github.com/openai/openai-chatkit-advanced-samples',
+      },
+    ],
+  },
 ];
 
 export default defineConfig({

packages/docs/src/content/docs/guides/theming-customization.mdx

@@ -20,7 +20,7 @@ const { control } = useChatKit({
     typography: { fontFamily: "Open Sans, sans-serif" },
   },
   header: {
-    customButtonLeft: {
+    leftAction: {
       icon: "settings-cog",
       onClick: () => alert("Profile settings"),
     },
@@ -63,7 +63,7 @@ el.setOptions({
     typography: { fontFamily: "Open Sans, sans-serif" },
   },
   header: {
-    customButtonLeft: {
+    leftAction: {
       icon: "settings-cog",
       onClick: () => alert("Profile settings"),
     },
@@ -184,11 +184,11 @@ Custom header buttons help you add navigation, context, or actions relevant to y
 ```jsx
 const options: Partial<ChatKitOptions> = {
   header: {
-    customButtonLeft: {
+    leftAction: {
       icon: "settings-cog",
       onClick: () => openProfileSettings(),
     },
-    customButtonRight: {
+    rightAction: {
       icon: "home",
       onClick: () => openHomePage(),
     },