@nlxai/touchpoint-ui 1.2.3 → 1.2.4-alpha.10

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 20.19.6

package/README.md

@@ -11,7 +11,9 @@ import { create } from "@nlxai/touchpoint-ui";
 
 const touchpoint = await create({
   config: {
-    applicationUrl: "REPLACE_WITH_APPLICATION_URL",
+    host: "REPLACE_WITH_HOST",
+    deploymentKey: "REPLACE_WITH_DEPLOYMENT_KEY",
+    channelKey: "REPLACE_WITH_CHANNEL_KEY",
     headers: {
       "nlx-api-key": "REPLACE_WITH_API_KEY",
     },
@@ -187,7 +189,7 @@ the context object
 ##### input?
 
 ```ts
-optional input: "text" | "voice" | "voiceMini";
+optional input: "text" | "external" | "voice" | "voiceMini";
 ```
 
 Controls the ways in which the user can communicate with the application. Defaults to `"text"`
@@ -646,6 +648,7 @@ const CustomCardRow: FC<{
   left: ReactNode;
   right: ReactNode;
   icon?: Icon;
+  className?: string;
 }>;
 ```
 
@@ -718,7 +721,7 @@ Represents the different types of icon buttons available in the application.
 
 ```ts
 const IconButton: FC<{
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   label: string;
   className?: string;
   type: IconButtonType;
@@ -861,6 +864,7 @@ type CustomModalityComponent<Data> = ComponentType<{
   data: Data;
   conversationHandler: ConversationHandler;
   className?: string;
+  renderedAsOverlay?: boolean;
 }>;
 ```
 

package/__tests__/feedback.test.tsx

@@ -0,0 +1,123 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useFeedback, getFeedbackInfo } from "../src/feedback";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+// Mock ConversationHandler
+const mockHandlerObj = {
+  submitFeedback: vi.fn(async () => Promise.resolve()),
+};
+const mockHandler =
+  mockHandlerObj as unknown as import("@nlxai/core").ConversationHandler;
+
+describe("useFeedback", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with default state", () => {
+    const { result } = renderHook(() => useFeedback(mockHandler));
+    const [state] = result.current;
+    expect(state.comment.state).toBe("idle");
+    expect(state.items).toEqual({});
+  });
+
+  it("should handle clickRating and update state", async () => {
+    const { result } = renderHook(() => useFeedback(mockHandler as any));
+    const [, actions] = result.current;
+    await act(async () => {
+      actions.clickRating("url1", 4);
+    });
+    const [state] = result.current;
+    expect(getFeedbackInfo(state as any, "url1").rating).toBe(4);
+    expect(mockHandler.submitFeedback).toHaveBeenCalledWith("url1", {
+      rating: 4,
+    });
+  });
+
+  it("should handle clickCommentButton and enter editing state", () => {
+    const { result } = renderHook(() => useFeedback(mockHandler));
+    const [, actions] = result.current;
+    act(() => {
+      actions.clickCommentButton("url2");
+    });
+    const [state] = result.current;
+    expect(state.comment.state).toBe("editing");
+    if (state.comment.state === "editing") {
+      expect(state.comment.activeFeedbackUrl).toBe("url2");
+    } else {
+      throw new Error("Expected comment state to be 'editing'");
+    }
+  });
+
+  it("should handle editCommentText and update text", () => {
+    const { result } = renderHook(() => useFeedback(mockHandler));
+    act(() => {
+      result.current[1].clickCommentButton("url3");
+    });
+    act(() => {
+      result.current[1].editCommentText("Test comment");
+    });
+    const [state] = result.current;
+    if (state.comment.state !== "editing") throw new Error();
+    expect(state.comment.text).toBe("Test comment");
+  });
+
+  it("should handle submitComment and update state on success", async () => {
+    const { result } = renderHook(() => useFeedback(mockHandler));
+    act(() => {
+      result.current[1].clickCommentButton("url4");
+    });
+    act(() => {
+      result.current[1].editCommentText("My feedback");
+    });
+    await act(async () => {
+      await result.current[1].submitComment();
+    });
+    // Wait for the state to update to 'submitted'
+    await waitFor(() => {
+      const [state] = result.current;
+      expect(state.comment.state).toBe("idle");
+    });
+    const [state] = result.current;
+    expect(getFeedbackInfo(state as any, "url4").commentSubmitted).toBe(true);
+    expect(getFeedbackInfo(state as any, "url4").commentText).toBe(
+      "My feedback",
+    );
+    expect(mockHandler.submitFeedback).toHaveBeenCalledWith("url4", {
+      comment: "My feedback",
+    });
+  });
+
+  it("should handle cancelComment and return to idle", () => {
+    const { result } = renderHook(() => useFeedback(mockHandler));
+    const [, actions] = result.current;
+    act(() => {
+      actions.clickCommentButton("url5");
+      actions.cancelComment();
+    });
+    const [state] = result.current;
+    expect(state.comment.state).toBe("idle");
+  });
+
+  it("should handle submission error", async () => {
+    const errorHandlerObj = {
+      submitFeedback: vi.fn(async () => Promise.reject(new Error("fail"))),
+    };
+    const errorHandler =
+      errorHandlerObj as unknown as import("@nlxai/core").ConversationHandler;
+    const { result } = renderHook(() => useFeedback(errorHandler));
+
+    act(() => {
+      result.current[1].clickCommentButton("url6");
+      result.current[1].editCommentText("fail");
+    });
+    await act(async () => {
+      await result.current[1].submitComment();
+    });
+    // Wait for the state to update to 'error'
+    await waitFor(() => {
+      const [state] = result.current;
+      expect(state.comment.state).toBe("error");
+    });
+  });
+});

package/docs/@nlxai/namespaces/Icons.md

@@ -0,0 +1,377 @@
+## Variables
+
+### Action
+
+```ts
+const Action: Icon;
+```
+
+---
+
+### Touchpoint
+
+```ts
+const Touchpoint: Icon;
+```
+
+---
+
+### AssistantOld
+
+```ts
+const AssistantOld: Icon;
+```
+
+---
+
+### Add
+
+```ts
+const Add: Icon;
+```
+
+---
+
+### ArrowDown
+
+```ts
+const ArrowDown: Icon;
+```
+
+---
+
+### ArrowLeft
+
+```ts
+const ArrowLeft: Icon;
+```
+
+---
+
+### ArrowRight
+
+```ts
+const ArrowRight: Icon;
+```
+
+---
+
+### ArrowUp
+
+```ts
+const ArrowUp: Icon;
+```
+
+---
+
+### ArrowForward
+
+```ts
+const ArrowForward: Icon;
+```
+
+---
+
+### Attachment
+
+```ts
+const Attachment: Icon;
+```
+
+---
+
+### BotMessage
+
+```ts
+const BotMessage: Icon;
+```
+
+---
+
+### Camera
+
+```ts
+const Camera: Icon;
+```
+
+---
+
+### Check
+
+```ts
+const Check: Icon;
+```
+
+---
+
+### Close
+
+```ts
+const Close: Icon;
+```
+
+---
+
+### Copy
+
+```ts
+const Copy: Icon;
+```
+
+---
+
+### Date
+
+```ts
+const Date: Icon;
+```
+
+---
+
+### Delete
+
+```ts
+const Delete: Icon;
+```
+
+---
+
+### Edit
+
+```ts
+const Edit: Icon;
+```
+
+---
+
+### Escalate
+
+```ts
+const Escalate: Icon;
+```
+
+---
+
+### Error
+
+```ts
+const Error: Icon;
+```
+
+---
+
+### FullScreen
+
+```ts
+const FullScreen: Icon;
+```
+
+---
+
+### Mic
+
+```ts
+const Mic: Icon;
+```
+
+---
+
+### MicOff
+
+```ts
+const MicOff: Icon;
+```
+
+---
+
+### Location
+
+```ts
+const Location: Icon;
+```
+
+---
+
+### Volume
+
+```ts
+const Volume: Icon;
+```
+
+---
+
+### VolumeOff
+
+```ts
+const VolumeOff: Icon;
+```
+
+---
+
+### Translate
+
+```ts
+const Translate: Icon;
+```
+
+---
+
+### OpenInNew
+
+```ts
+const OpenInNew: Icon;
+```
+
+---
+
+### Play
+
+```ts
+const Play: Icon;
+```
+
+---
+
+### Preview
+
+```ts
+const Preview: Icon;
+```
+
+---
+
+### Reorder
+
+```ts
+const Reorder: Icon;
+```
+
+---
+
+### Restart
+
+```ts
+const Restart: Icon;
+```
+
+---
+
+### Settings
+
+```ts
+const Settings: Icon;
+```
+
+---
+
+### Search
+
+```ts
+const Search: Icon;
+```
+
+---
+
+### Share
+
+```ts
+const Share: Icon;
+```
+
+---
+
+### Warning
+
+```ts
+const Warning: Icon;
+```
+
+---
+
+### ThumbDown
+
+```ts
+const ThumbDown: Icon;
+```
+
+---
+
+### ThumbUp
+
+```ts
+const ThumbUp: Icon;
+```
+
+---
+
+### Time
+
+```ts
+const Time: Icon;
+```
+
+---
+
+### Undo
+
+```ts
+const Undo: Icon;
+```
+
+---
+
+### Refresh
+
+```ts
+const Refresh: Icon;
+```
+
+---
+
+### Help
+
+```ts
+const Help: Icon;
+```
+
+---
+
+### OpenLink
+
+```ts
+const OpenLink: Icon;
+```
+
+## Interfaces
+
+### IconProps
+
+Props for icon components
+
+#### Properties
+
+##### className?
+
+```ts
+optional className: string;
+```
+
+Additional CSS classes to apply to the icon
+
+##### size?
+
+```ts
+optional size: number;
+```
+
+Custom size in pixels for the icon
+
+## Type Aliases
+
+### Icon
+
+```ts
+type Icon = FC<IconProps>;
+```
+
+Type definition for an icon component