langgraph-ui-components 0.0.29 → 0.0.31

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Karthik-MP
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -52,7 +52,7 @@ function App() {
 Use subpath imports for best auto-import support in VS Code and TypeScript:
 
 ```tsx
-import { Sidebar, Chat } from 'langgraph-ui-components/components';
+import { Sidebar, Chat, AskUserInterrupt } from 'langgraph-ui-components/components';
 import {
   ChatProvider,
   ChatRuntimeProvider,
@@ -71,6 +71,13 @@ import {
   useTools,
   useModels,
 } from 'langgraph-ui-components/hooks';
+import type {
+  AskUserInterruptProps,
+  AskUserResponse,
+  Question,
+  QuestionAnswer,
+  QuestionOption,
+} from 'langgraph-ui-components/components';
 import 'langgraph-ui-components/styles.css';
 ```
 
@@ -78,6 +85,7 @@ Root import is also supported for backward compatibility:
 
 ```tsx
 import { Sidebar, ChatProvider, useStreamContext } from 'langgraph-ui-components';
+import type { AskUserInterruptProps, AskUserResponse } from 'langgraph-ui-components';
 ```
 
 ### Speech-to-Text Configuration
@@ -119,6 +127,7 @@ The microphone button in the ChatInput component will automatically use these se
 
 - `Sidebar` - Main chat UI with sidebar navigation
 - `Chat` - Standalone chat interface with thread history
+- `AskUserInterrupt` - Built-in UI for `ask_user` HITL questions
 
 ## Component Props
 
@@ -639,6 +648,98 @@ function App() {
 
 Or register via `ChatProvider`'s `customComponents` if you prefer props-based setup (note: this is for generative UI components — for interrupts, use `registerInterruptComponent` as above).
 
+### `ask_user` Interrupts (Built-in)
+
+For question/answer style interruptions, the library includes a ready-to-use `AskUserInterrupt` renderer.
+
+If your interrupt payload has `type: "ask_user"` and a `questions` array, `ChatBody` renders the built-in component automatically.
+
+#### Agent-side format (`ask_user`)
+
+```python
+from langgraph.types import interrupt
+
+interrupt({
+    "type": "ask_user",
+    "questions": [
+        {
+            "header": "Environment",
+            "question": "Which environment should I deploy to?",
+            "options": [
+                {"label": "Staging", "description": "Safe pre-production run"},
+                {"label": "Production", "description": "Live users"}
+            ],
+            "allowFreeformInput": True,
+            "multiSelect": False,
+        }
+    ]
+})
+```
+
+#### TypeScript types
+
+```ts
+import type {
+  AskUserInterruptProps,
+  AskUserResponse,
+  Question,
+  QuestionAnswer,
+  QuestionOption,
+} from 'langgraph-ui-components/components';
+
+// also available from root:
+// import type { AskUserInterruptProps, AskUserResponse } from 'langgraph-ui-components';
+```
+
+`AskUserInterruptProps` shape:
+
+```ts
+interface AskUserInterruptProps {
+  questions: Question[];
+  onSubmit: (response: AskUserResponse) => void;
+}
+```
+
+#### Overriding `ask_user` UI
+
+You can override the default card by registering an interrupt component under the `ask_user` key:
+
+```tsx
+import { useEffect } from 'react';
+import { useCustomComponents } from 'langgraph-ui-components/providers';
+import type { InterruptComponentProps } from 'langgraph-ui-components/providers';
+
+function MyAskUserInterrupt({ interrupt, actions }: InterruptComponentProps) {
+  return (
+    <div>
+      <h3>Need your input</h3>
+      <pre>{JSON.stringify(interrupt.questions, null, 2)}</pre>
+      <button
+        onClick={() =>
+          actions.edit({
+            answers: {
+              Environment: { selected: ["Staging"], freeText: null, skipped: false },
+            },
+          })
+        }
+      >
+        Submit
+      </button>
+    </div>
+  );
+}
+
+function RegisterAskUserInterrupt() {
+  const { registerInterruptComponent } = useCustomComponents();
+
+  useEffect(() => {
+    registerInterruptComponent('ask_user', MyAskUserInterrupt);
+  }, [registerInterruptComponent]);
+
+  return null;
+}
+```
+
 ### `InterruptComponentProps`
 
 ```typescript

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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../node_modules/.pnpm/react-syntax-highlighter@16.1.1_react@19.2.4/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.cjs.js");var e=r.__require();exports.prismExports=e;
 //# sourceMappingURL=index.cjs.js.map

package/dist/_virtual/index.cjs3.js

@@ -1,2 +1,2 @@
-"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;
+"use strict";const e=require("./_commonjsHelpers.cjs.js"),r=require("../node_modules/.pnpm/@babel_runtime@7.29.2/node_modules/@babel/runtime/regenerator/index.cjs.js");var t=r.__require();const o=e.getDefaultExportFromCjs(t);module.exports=o;
 //# sourceMappingURL=index.cjs3.js.map

package/dist/_virtual/index.es.js

@@ -1,4 +1,4 @@
-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";
+import { __require as r } from "../node_modules/.pnpm/react-syntax-highlighter@16.1.1_react@19.2.4/node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.es.js";
 var i = /* @__PURE__ */ r();
 export {
   i as p

package/dist/_virtual/index.es3.js

@@ -1,5 +1,5 @@
 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";
+import { __require as e } from "../node_modules/.pnpm/@babel_runtime@7.29.2/node_modules/@babel/runtime/regenerator/index.es.js";
 var t = e();
 const m = /* @__PURE__ */ r(t);
 export {