langgraph-ui-components 0.0.23 → 0.0.25

package/README.md

@@ -1,4 +1,4 @@
-# Agentic Chat Components
+# Langgraph UI Chat Components
 
 A React component library for building AI chat interfaces with LangChain/LangGraph integration.
 
@@ -16,7 +16,7 @@ A React component library for building AI chat interfaces with LangChain/LangGra
 ## Installation
 
 ```bash
-npm install agentic-chat-ui-components
+npm install langgraph-ui-components
 ```
 
 **Peer dependencies** (install these separately):
@@ -28,11 +28,9 @@ npm install react react-dom @langchain/core @langchain/langgraph @langchain/lang
 ## Usage
 
 ```tsx
-import { 
-  Sidebar,
-  ChatProvider
-} from 'agentic-chat-ui-components';
-import 'agentic-chat-ui-components/styles.css';
+import { Sidebar } from 'langgraph-ui-components/components';
+import { ChatProvider } from 'langgraph-ui-components/providers';
+import 'langgraph-ui-components/styles.css';
 
 function App() {
   return (
@@ -47,17 +45,47 @@ function App() {
 }
 ```
 
+## Import Paths
+
+Use subpath imports for best auto-import support in VS Code and TypeScript:
+
+```tsx
+import { Sidebar, Chat } from 'langgraph-ui-components/components';
+import {
+  ChatProvider,
+  ChatRuntimeProvider,
+  ThreadProvider,
+  StreamProvider,
+  FileProvider,
+  CustomComponentProvider,
+  useThread,
+  useStreamContext,
+  useChatRuntime,
+  useFileProvider,
+  useCustomComponents,
+  useChatSuggestions,
+} from 'langgraph-ui-components/providers';
+import {
+  useTools,
+  useModels,
+} from 'langgraph-ui-components/hooks';
+import 'langgraph-ui-components/styles.css';
+```
+
+Root import is also supported for backward compatibility:
+
+```tsx
+import { Sidebar, ChatProvider, useStreamContext } from 'langgraph-ui-components';
+```
+
 ### Speech-to-Text Configuration
 
 To enable speech-to-text functionality with your Whisper API backend, configure the `textToSpeechVoice` property in the `identity` object:
 
 ```tsx
-import { 
-  Sidebar,
-  ChatProvider,
-  ChatRuntimeProvider
-} from 'agentic-chat-ui-components';
-import 'agentic-chat-ui-components/styles.css';
+import { Sidebar } from 'langgraph-ui-components/components';
+import { ChatProvider, ChatRuntimeProvider } from 'langgraph-ui-components/providers';
+import 'langgraph-ui-components/styles.css';
 
 function App() {
   return (
@@ -97,7 +125,7 @@ The microphone button in the ChatInput component will automatically use these se
 The `Chat` component provides a complete chat interface with thread history and file upload support.
 
 ```tsx
-import { Chat } from 'agentic-chat-ui-components';
+import { Chat } from 'langgraph-ui-components/components';
 
 <Chat 
   enableToolCallIndicator={true}
@@ -116,7 +144,7 @@ import { Chat } from 'agentic-chat-ui-components';
 The `Sidebar` component provides a chat interface with collapsible sidebar navigation.
 
 ```tsx
-import { Sidebar } from 'agentic-chat-ui-components';
+import { Sidebar } from 'langgraph-ui-components/components';
 
 <Sidebar 
   supportChatHistory={true}
@@ -148,12 +176,15 @@ import { Sidebar } from 'agentic-chat-ui-components';
 
 ## Exported Hooks
 
-- `useThread()` - Access thread state
-- `useStreamContext()` - Access streaming state
-- `useChatRuntime()` - Access runtime config
-- `useFileProvider()` - Access file state
-- `useCustomComponents()` - Register custom components
-- `useChatSuggestions()` - Display contextual chat suggestions
+- `useThread()` - Access thread state (`langgraph-ui-components/providers`)
+- `useStreamContext()` - Access streaming state (`langgraph-ui-components/providers`)
+- `useChatRuntime()` - Access runtime config (`langgraph-ui-components/providers`)
+- `useFileProvider()` - Access file state (`langgraph-ui-components/providers`)
+- `useCustomComponents()` - Register custom components (`langgraph-ui-components/providers`)
+- `useChatSuggestions()` - Display contextual chat suggestions (`langgraph-ui-components/providers`)
+- `useTools()` - Access tool registration helpers (`langgraph-ui-components/hooks`)
+- `useToolsDefault` - Backward-compatible default export alias for `useTools` (`langgraph-ui-components/hooks`)
+- `useModels()` - Access configured model options (`langgraph-ui-components/hooks`)
 
 ## useChatSuggestions Hook
 
@@ -169,7 +200,7 @@ The `useChatSuggestions` hook enables intelligent, opt-in chat suggestions for y
 ### Basic Usage
 
 ```tsx
-import { useChatSuggestions } from 'agentic-chat-ui-components';
+import { useChatSuggestions } from 'langgraph-ui-components/hooks';
 
 function MyComponent() {
   // Simply call the hook - it registers configuration internally
@@ -244,7 +275,7 @@ The `sendMessage` function is available through the `useStreamContext()` hook an
 ### Usage Example
 
 ```tsx
-import { useStreamContext } from 'agentic-chat-ui-components';
+import { useStreamContext } from 'langgraph-ui-components/hooks';
 
 function MyComponent() {
   const { sendMessage } = useStreamContext();
@@ -274,7 +305,7 @@ You can inject custom React components into chat messages using the `CustomCompo
 Pass initial components as the `initialComponents` prop to `CustomComponentProvider`:
 
 ```tsx
-import { CustomComponentProvider } from 'agentic-chat-ui-components';
+import { CustomComponentProvider } from 'langgraph-ui-components/providers';
 
 const MyCustomButton = ({ text }) => <button>{text}</button>;
 
@@ -296,7 +327,7 @@ function App() {
 Use the `registerComponent` method from the `useCustomComponents` hook:
 
 ```tsx
-import { useCustomComponents } from 'agentic-chat-ui-components';
+import { useCustomComponents } from 'langgraph-ui-components/hooks';
 
 function RegisterComponent() {
   const { registerComponent } = useCustomComponents();
@@ -321,6 +352,21 @@ Full TypeScript definitions available for:
 - `ChatRuntimeContextValue`
 - `FileInfo`
 - `SuggestionsOptions`
+- `SuggestionConfig`
+- `ThreadMode`
+- `ThreadConfiguration`
+- `ThreadContextType`
+- `StateType`
+- `CustomComponentContextValue`
+- `CustomTool`
+- `ModelOption`
+- `ChatProps`
+- `ChatSidebarProps`
+- `ChatUIProps`
+- `CallThisOnSubmitResponse`
+- `chatBodyProps`
+- `headerProps`
+- `textToSpeechVoice`
 
 ## Keywords
 

package/dist/_virtual/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../node_modules/.pnpm/react-syntax-highlighter@16.1.0_react@19.2.3/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.cjs.js");var e=r.__require();exports.prismExports=e;
+"use strict";const e=require("../node_modules/.pnpm/camelcase@6.3.0/node_modules/camelcase/index.cjs.js");e.__require();
 //# sourceMappingURL=index.cjs.js.map

package/dist/_virtual/index.cjs12.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";const e=require("./_commonjsHelpers.cjs.js"),r=require("../node_modules/.pnpm/@babel_runtime@7.28.6/node_modules/@babel/runtime/regenerator/index.cjs.js");var t=r.__require();const o=e.getDefaultExportFromCjs(t);module.exports=o;
 //# sourceMappingURL=index.cjs12.js.map

package/dist/_virtual/index.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./_commonjsHelpers.cjs.js"),r=require("../node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.cjs.js");var s=r.__require();const t=e.getDefaultExportFromCjs(s);module.exports=t;
+"use strict";const e=require("../node_modules/.pnpm/semver@7.7.3/node_modules/semver/index.cjs.js");e.__require();
 //# sourceMappingURL=index.cjs2.js.map

package/dist/_virtual/index.cjs3.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../node_modules/.pnpm/semver@7.7.3/node_modules/semver/index.cjs.js");e.__require();
+"use strict";const e=require("./_commonjsHelpers.cjs.js"),r=require("../node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.cjs.js");var s=r.__require();const t=e.getDefaultExportFromCjs(s);module.exports=t;
 //# sourceMappingURL=index.cjs3.js.map

package/dist/_virtual/index.cjs4.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./_commonjsHelpers.cjs.js"),r=require("../node_modules/.pnpm/decamelize@1.2.0/node_modules/decamelize/index.cjs.js");var s=r.__require();const t=e.getDefaultExportFromCjs(s);module.exports=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../node_modules/.pnpm/react-syntax-highlighter@16.1.0_react@19.2.3/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.cjs.js");var e=r.__require();exports.prismExports=e;
 //# sourceMappingURL=index.cjs4.js.map

package/dist/_virtual/index.cjs5.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../node_modules/.pnpm/camelcase@6.3.0/node_modules/camelcase/index.cjs.js");e.__require();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
 //# sourceMappingURL=index.cjs5.js.map

package/dist/_virtual/index.cjs6.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
 //# sourceMappingURL=index.cjs6.js.map

package/dist/_virtual/index.cjs7.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
 //# sourceMappingURL=index.cjs7.js.map

package/dist/_virtual/index.cjs8.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
 //# sourceMappingURL=index.cjs8.js.map

package/dist/_virtual/index.es.js

@@ -1,6 +1,3 @@
-import { __require as r } from "../node_modules/.pnpm/react-syntax-highlighter@16.1.0_react@19.2.3/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.es.js";
-var i = /* @__PURE__ */ r();
-export {
-  i as p
-};
+import { __require as e } from "../node_modules/.pnpm/camelcase@6.3.0/node_modules/camelcase/index.es.js";
+e();
 //# sourceMappingURL=index.es.js.map

package/dist/_virtual/index.es12.js

@@ -1,5 +1,8 @@
-var e = { exports: {} };
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.es.js";
+import { __require as e } from "../node_modules/.pnpm/@babel_runtime@7.28.6/node_modules/@babel/runtime/regenerator/index.es.js";
+var t = e();
+const m = /* @__PURE__ */ r(t);
 export {
-  e as __module
+  m as default
 };
 //# sourceMappingURL=index.es12.js.map

package/dist/_virtual/index.es12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es12.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.es12.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index.es2.js

@@ -1,8 +1,3 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.es.js";
-import { __require as t } from "../node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.es.js";
-var e = t();
-const i = /* @__PURE__ */ r(e);
-export {
-  i as default
-};
+import { __require as r } from "../node_modules/.pnpm/semver@7.7.3/node_modules/semver/index.es.js";
+r();
 //# sourceMappingURL=index.es2.js.map

package/dist/_virtual/index.es2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.es2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index.es3.js

@@ -1,3 +1,8 @@
-import { __require as r } from "../node_modules/.pnpm/semver@7.7.3/node_modules/semver/index.es.js";
-r();
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.es.js";
+import { __require as t } from "../node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.es.js";
+var e = t();
+const i = /* @__PURE__ */ r(e);
+export {
+  i as default
+};
 //# sourceMappingURL=index.es3.js.map

package/dist/_virtual/index.es3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.es3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index.es4.js

@@ -1,8 +1,6 @@
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.es.js";
-import { __require as r } from "../node_modules/.pnpm/decamelize@1.2.0/node_modules/decamelize/index.es.js";
-var a = r();
-const m = /* @__PURE__ */ e(a);
+import { __require as r } from "../node_modules/.pnpm/react-syntax-highlighter@16.1.0_react@19.2.3/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.es.js";
+var i = /* @__PURE__ */ r();
 export {
-  m as default
+  i as p
 };
 //# sourceMappingURL=index.es4.js.map

package/dist/_virtual/index.es4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.es4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index.es5.js

@@ -1,3 +1,5 @@
-import { __require as e } from "../node_modules/.pnpm/camelcase@6.3.0/node_modules/camelcase/index.es.js";
-e();
+var r = {};
+export {
+  r as __exports
+};
 //# sourceMappingURL=index.es5.js.map

package/dist/_virtual/index.es5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index.es6.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index.es6.js.map

package/dist/_virtual/index.es7.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index.es7.js.map

package/dist/_virtual/index.es8.js

@@ -1,5 +1,5 @@
-var e = { exports: {} };
+var r = {};
 export {
-  e as __module
+  r as __exports
 };
 //# sourceMappingURL=index.es8.js.map