@nlxai/touchpoint-ui 1.2.4-alpha.8 → 1.2.4

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",
     },
@@ -192,6 +194,14 @@ optional input: "text" | "external" | "voice" | "voiceMini";
 
 Controls the ways in which the user can communicate with the application. Defaults to `"text"`
 
+##### showVoiceTranscript?
+
+```ts
+optional showVoiceTranscript: boolean;
+```
+
+Sets whether the transcript is shown in `voice` and `voiceMini` inputs.
+
 ##### initialContext?
 
 ```ts
@@ -208,6 +218,14 @@ optional bidirectional: BidirectionalConfig;
 
 Enables bidirectional mode of voice+. Will automatically set the bidirectional flag in the config.
 
+##### copy?
+
+```ts
+optional copy: Partial<Copy>;
+```
+
+Copy
+
 ---
 
 ### TouchpointInstance
@@ -319,15 +337,15 @@ A list containing the custom commands to set.
 
 The full theme expressed as CSS custom properties.
 This means that for instance colors can be made to switch automatically based on the system color mode by using the `light-dark()` CSS function.
-Note also that not all colors need to be provided manually. For instance if only `primary80` is provided, the rest of the primary colors will be computed automatically based on it.
-Therefore, for a fully custom but minimal theme, you only need to provide `accent`, `primary80`, `secondary80`, `background`, `overlay`, and potentially the warning and error colors.
+Note also that not all colors need to be provided manually. For instance if only `primary` is provided, the rest of the primary colors will be computed automatically based on it.
+Therefore, for a fully custom but minimal theme, you only need to provide `accent`, `primary`, `secondary`, `background`, `overlay`, and potentially the warning and error colors.
 
 #### Example
 
 ```typescript
 const theme: Partial<Theme> = {
-  primary80: "light-dark(rgba(0, 2, 9, 0.8), rgba(255, 255, 255, 0.8))",
-  secondary80: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 2, 9, 0.8))",
+  primary: "light-dark(rgb(0, 2, 9), rgb(255, 255, 255))",
+  secondary: "light-dark(rgb(255, 255, 255), rgb(0, 2, 9))",
   accent: "light-dark(rgb(28, 99, 218), rgb(174, 202, 255))",
   background: "light-dark(rgba(220, 220, 220, 0.9), rgba(0, 2, 9, 0.9))",
 };
@@ -343,6 +361,22 @@ fontFamily: string;
 
 Font family
 
+##### primary
+
+```ts
+primary: string;
+```
+
+Primary color
+
+##### primary90
+
+```ts
+primary90: string;
+```
+
+Primary color with 90% opacity
+
 ##### primary80
 
 ```ts
@@ -399,6 +433,22 @@ primary1: string;
 
 Primary color with 1% opacity
 
+##### secondary
+
+```ts
+secondary: string;
+```
+
+Secondary color
+
+##### secondary90
+
+```ts
+secondary90: string;
+```
+
+Secondary color with 90% opacity
+
 ##### secondary80
 
 ```ts
@@ -1366,10 +1416,6 @@ A handler that will be called with an argument matching the schema when the comm
 
 `void`
 
-## Other
-
-- [Icons](@nlxai/namespaces/Icons.md)
-
 ## Utilities
 
 ### version

package/docs/README.md

@@ -160,7 +160,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"`
@@ -181,6 +181,14 @@ optional bidirectional: BidirectionalConfig;
 
 Enables bidirectional mode of voice+. Will automatically set the bidirectional flag in the config.
 
+##### copy?
+
+```ts
+optional copy: Partial<Copy>;
+```
+
+Copy
+
 ---
 
 ### TouchpointInstance
@@ -292,15 +300,15 @@ A list containing the custom commands to set.
 
 The full theme expressed as CSS custom properties.
 This means that for instance colors can be made to switch automatically based on the system color mode by using the `light-dark()` CSS function.
-Note also that not all colors need to be provided manually. For instance if only `primary80` is provided, the rest of the primary colors will be computed automatically based on it.
-Therefore, for a fully custom but minimal theme, you only need to provide `accent`, `primary80`, `secondary80`, `background`, `overlay`, and potentially the warning and error colors.
+Note also that not all colors need to be provided manually. For instance if only `primary` is provided, the rest of the primary colors will be computed automatically based on it.
+Therefore, for a fully custom but minimal theme, you only need to provide `accent`, `primary`, `secondary`, `background`, `overlay`, and potentially the warning and error colors.
 
 #### Example
 
 ```typescript
 const theme: Partial<Theme> = {
-  primary80: "light-dark(rgba(0, 2, 9, 0.8), rgba(255, 255, 255, 0.8))",
-  secondary80: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 2, 9, 0.8))",
+  primary: "light-dark(rgb(0, 2, 9), rgb(255, 255, 255))",
+  secondary: "light-dark(rgb(255, 255, 255), rgb(0, 2, 9))",
   accent: "light-dark(rgb(28, 99, 218), rgb(174, 202, 255))",
   background: "light-dark(rgba(220, 220, 220, 0.9), rgba(0, 2, 9, 0.9))",
 };
@@ -316,6 +324,22 @@ fontFamily: string;
 
 Font family
 
+##### primary
+
+```ts
+primary: string;
+```
+
+Primary color
+
+##### primary90
+
+```ts
+primary90: string;
+```
+
+Primary color with 90% opacity
+
 ##### primary80
 
 ```ts
@@ -372,6 +396,22 @@ primary1: string;
 
 Primary color with 1% opacity
 
+##### secondary
+
+```ts
+secondary: string;
+```
+
+Secondary color
+
+##### secondary90
+
+```ts
+secondary90: string;
+```
+
+Secondary color with 90% opacity
+
 ##### secondary80
 
 ```ts

package/index.html

@@ -1,63 +1,55 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Touchpoint</title>
-    <link
-      href="https://db.onlinewebfonts.com/c/0970e3fd1aa7e6ff6937c76a583f3a30?family=BW+Haas+Text+Mono+C+55+Rom+Regular"
-      rel="stylesheet"
-    />
-  </head>
 
-  <body
-    style="
-      background-image: url(https://platform.nlx.ai/onboarding-bg/voiceplus.webp);
-      background-size: cover;
-      color: white;
-    "
-  >
-    <div
-      style="width: 40vw; height: 80vh; margin: auto; padding-top: 10vh"
-    ></div>
-    <script type="module">
-      import { create, html } from "./src/index.tsx";
+<head>
+  <style>
+    html,
+    body,
+    nlx-touchpoint {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+  <meta charset="UTF-8" />
+  <title>Touchpoint</title>
+</head>
 
-      const touchpoint = await create({
-        config: {
-          applicationUrl:
-            "https://bots.dev.studio.nlx.ai/c/Nji0Tkk8UOqaFc3Z3mDW9/5p7ZdO_XgcnCKnuxbhNAS",
+<body>
+  <nlx-touchpoint></nlx-touchpoint>
+  <script type="module">
+    import {create, html} from "./src/index.tsx";
 
-          headers: {
-            "nlx-api-key": "crLjtXvXIOPtc1AgnPHoEE1y",
-          },
-          languageCode: "en-US",
-          conversationId: "12345",
+    const touchpointConfig = {
+      config: {
+        applicationUrl:
+          "https://bots.dev.studio.nlx.ai/c/Nji0Tkk8UOqaFc3Z3mDW9/5p7ZdO_XgcnCKnuxbhNAS",
+
+        headers: {
+          "nlx-api-key": "crLjtXvXIOPtc1AgnPHoEE1y",
         },
-        windowSize: "full",
-        input: "external",
-        bidirectional: {},
-        // colorMode: "light dark",
-        // userMessageBubble: true,
-        // agentMessageBubble: true,
-        // chatMode: true,
-        // theme: {
-        //   accent: "rgba(255, 253, 114, 1)",
-        //   primary80:
-        //     "light-dark(rgba(12, 12, 200, 0.8), rgba(255, 255, 255, 0.85))",
+        languageCode: "en-US",
+        conversationId: "12345",
+      },
+      windowSize: "full",
+      input: "text",
+      bidirectional: {},
+      // colorMode: "light dark",
+      // userMessageBubble: true,
+      // agentMessageBubble: true,
+      // chatMode: true,
+      // theme: {
+      //   accent: "rgba(255, 253, 114, 1)",
+      //   primary80:
+      //     "light-dark(rgba(12, 12, 200, 0.8), rgba(255, 255, 255, 0.85))",
 
-        //   fontFamily: "'BW Haas Text Mono C 55 Rom Regular', monospace",
-        // },
-      });
+      //   fontFamily: "'BW Haas Text Mono C 55 Rom Regular', monospace",
+      // },
+    };
+
+    document.querySelector("nlx-touchpoint").touchpointConfiguration = touchpointConfig;
+  </script>
+</body>
 
-      touchpoint.setCustomBidirectionalCommands([
-        {
-          action: "externalInput",
-          // description: "Handle external input",
-          handler: (args) => {
-            alert(`External input received: ${args}`);
-          },
-        },
-      ]);
-    </script>
-  </body>
 </html>

package/lib/ProviderStack.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+import { Copy, ColorMode, Theme } from './interface';
+/**
+ *
+ */
+export declare const ProviderStack: FC<{
+    /**
+     *
+     */
+    colorMode: ColorMode;
+    /**
+     *
+     */
+    className?: string;
+    /**
+     *
+     */
+    theme?: Partial<Theme>;
+    /**
+     *
+     */
+    children?: ReactNode;
+    /**
+     *
+     */
+    languageCode: string;
+    /**
+     *
+     */
+    copy?: Partial<Copy>;
+}>;

package/lib/components/FullscreenVoice.d.ts

@@ -1,21 +1,36 @@
-import { FC } from 'react';
-import { Context, ConversationHandler } from '@nlxai/core';
+import { FC, Dispatch, SetStateAction } from 'react';
+import { Context, ConversationHandler, Response } from '@nlxai/core';
 import { ColorMode, CustomModalityComponent } from '../interface';
-import { ModalitiesWithContext } from '../voice';
+import { VoiceHandler, VoiceState } from '../voice';
 interface Props {
     colorMode: ColorMode;
     handler: ConversationHandler;
+    responses: Response[];
     speakersEnabled: boolean;
+    showTranscript: boolean;
     brandIcon?: string;
     className?: string;
     context?: Context;
     modalityComponents: Record<string, CustomModalityComponent<unknown>>;
 }
+export type WidgetVoiceState = null | "loading" | {
+    type: "error";
+    error: string;
+} | {
+    type: "success";
+    handler: VoiceHandler;
+    state?: VoiceState;
+};
+export declare const useWidgetVoiceState: () => [
+    WidgetVoiceState,
+    Dispatch<SetStateAction<WidgetVoiceState>>
+];
 export declare const VoiceModalities: FC<{
     className?: string;
-    modalities: ModalitiesWithContext[];
+    responses: Response[];
     modalityComponents: Record<string, CustomModalityComponent<unknown>>;
     renderedAsOverlay: boolean;
+    showTranscript: boolean;
     handler: ConversationHandler;
 }>;
 export declare const FullscreenVoice: FC<Props>;

package/lib/components/Messages.d.ts

@@ -25,4 +25,9 @@ export declare const MessageChoices: FC<{
     responseIndex: number;
     messageIndex: number;
 }>;
+export declare const UserMessage: FC<{
+    text: string;
+    files?: File[];
+    bubble: boolean;
+}>;
 export declare const Messages: FC<MessagesProps>;

package/lib/components/Notice.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const Notice: FC<{
+    text: string;
+}>;

package/lib/components/Theme.d.ts

@@ -1,8 +1,4 @@
-import { FC, ReactNode } from 'react';
-import { ColorMode, Theme } from '../interface';
-export declare const CustomPropertiesContainer: FC<{
-    colorMode: ColorMode;
-    className?: string;
-    theme?: Partial<Theme>;
-    children?: ReactNode;
-}>;
+import { CSSProperties } from 'react';
+import { Theme } from '../interface';
+export declare const toCustomProperties: (theme: Theme) => CSSProperties;
+export declare const intelligentMerge: (theme: Partial<Theme>) => Theme;

package/lib/components/VoiceMini.d.ts

@@ -1,8 +1,10 @@
-import { Context, ConversationHandler } from '@nlxai/core';
+import { Context, ConversationHandler, Response } from '@nlxai/core';
 import { FC } from 'react';
 import { CustomModalityComponent } from '../interface';
 export declare const VoiceMini: FC<{
     modalityComponents: Record<string, CustomModalityComponent<unknown>>;
+    showTranscript: boolean;
+    responses: Response[];
     handler: ConversationHandler;
     brandIcon?: string;
     renderCollapse: boolean;

package/lib/components/ui/IconButton.d.ts

@@ -42,6 +42,12 @@ export declare const UnsemanticIconButton: FC<{
     type: IconButtonType;
     Icon: FC<IconProps>;
 }>;
+export declare const HeadlessIconButton: FC<{
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    label: string;
+    className?: string;
+    children: React.ReactNode;
+}>;
 /**
  * A button showing only an icon (textual label is provided for accessibility)
  * @example

package/lib/feedback.d.ts

@@ -11,27 +11,24 @@ export interface State {
 }
 type CommentState = {
     state: "idle";
-} | {
+} | ({
     state: "editing";
-    activeFeedbackUrl: string;
-    text: string;
-} | {
+} & ActiveCommentState) | ({
     state: "submitting";
-    activeFeedbackUrl: string;
-    text: string;
-} | {
+} & ActiveCommentState) | ({
     state: "submitted";
-    activeFeedbackUrl: string;
-    text: string;
-} | {
+} & ActiveCommentState) | ({
     state: "error";
+} & ActiveCommentState);
+interface ActiveCommentState {
     activeFeedbackUrl: string;
     text: string;
-};
+    prompt: string;
+}
 export declare const getFeedbackInfo: (state: State, feedbackUrl: string) => FeedbackInfo;
 export interface Actions {
     clickRating: (feedbackUrl: string, value: number) => void;
-    clickCommentButton: (feedbackUrl: string) => void;
+    clickCommentButton: (feedbackUrl: string, prompt: string) => void;
     clickCommentEdit: () => void;
     editCommentText: (text: string) => void;
     submitComment: () => Promise<void>;