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

package/index.html

@@ -32,17 +32,17 @@
           languageCode: "en-US",
         },
         windowSize: "full",
-        colorMode: "light dark",
+        // 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))",
+        // 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",
+        // },
       });
     </script>
   </body>

package/lib/components/FeedbackComment.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import type * as Feedback from "../feedback";
+export declare const FeedbackComment: FC<{
+    feedbackState: Feedback.State;
+    feedbackActions: Feedback.Actions;
+}>;

package/lib/components/Messages.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Response, ConversationHandler, ApplicationMessage } from '@nlxai/core';
 import { CustomModalityComponent, ColorMode } from '../interface';
+import * as Feedback from "../feedback";
 export interface MessagesProps {
     isWaiting: boolean;
     handler: ConversationHandler;
@@ -14,6 +15,8 @@ export interface MessagesProps {
     modalityComponents: Record<string, CustomModalityComponent<unknown>>;
     className?: string;
     enabled: boolean;
+    feedbackState: Feedback.State;
+    feedbackActions: Feedback.Actions;
 }
 export declare const MessageChoices: FC<{
     handler: ConversationHandler;

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { MouseEventHandler, FC } from 'react';
 import { IconProps } from './Icons';
 /**
  * Represents the different types of icon buttons available in the application.
@@ -20,7 +20,7 @@ export interface IconButtonProps {
     /**
      * Handler function called when the button is clicked
      */
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Accessible label for the button
      */

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

@@ -26,12 +26,14 @@ export declare const ArrowRight: Icon;
 export declare const ArrowUp: Icon;
 export declare const ArrowForward: Icon;
 export declare const Attachment: Icon;
+export declare const BotMessage: Icon;
 export declare const Camera: Icon;
 export declare const Check: Icon;
 export declare const Close: Icon;
 export declare const Copy: Icon;
 export declare const Date: Icon;
 export declare const Delete: Icon;
+export declare const Edit: Icon;
 export declare const Escalate: Icon;
 export declare const Error: Icon;
 export declare const FullScreen: Icon;

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

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { IconProps } from './Icons';
+/**
+ * Represents the different types of icon buttons available in the application.
+ *
+ * - `main`: The primary icon button.
+ * - `ghost`: A transparent or less prominent icon button.
+ * - `activated`: An icon button that indicates an active state.
+ * - `coverup`: An icon button used to cover up or mask something.
+ * - `overlay`: An icon button that appears over other content.
+ * @category Modality components
+ */
+export type MessageButtonType = "main" | "activated";
+/**
+ * Props for the MessageButton component
+ * @inline
+ * @hidden
+ */
+export interface MessageButtonProps {
+    /**
+     * Handler function called when the button is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Accessible label for the button
+     */
+    label: string;
+    /**
+     * Additional CSS classes to apply to the button
+     */
+    className?: string;
+    /**
+     * Visual style variant of the button. One of MessageButtonType.
+     */
+    type: MessageButtonType;
+    /**
+     * Icon component to display inside the button
+     */
+    Icon: FC<IconProps>;
+}
+/**
+ * A button showing only an icon (textual label is provided for accessibility)
+ * @example
+ * ```tsx
+ * import { MessageButton, Icons, React } from '@nlx/touchpoint-ui';
+ *
+ * const MyMessageButton = () => (
+ *   <MessageButton
+ *     label="Send message"
+ *     onClick={() => alert('Icon button clicked!')}
+ *     type="main"
+ *     Icon={Icons.ArrowForward}
+ *   />
+ * );
+ * ```
+ * @category Modality components
+ */
+export declare const MessageButton: FC<MessageButtonProps>;

package/lib/feedback.d.ts

@@ -0,0 +1,40 @@
+import { ConversationHandler } from '@nlxai/core';
+interface FeedbackInfo {
+    rating: number | null;
+    commentSubmitted: boolean;
+    commentText: string;
+}
+export interface State {
+    comment: CommentState;
+    items: Record<string, FeedbackInfo>;
+}
+type CommentState = {
+    state: "idle";
+} | {
+    state: "editing";
+    activeFeedbackUrl: string;
+    text: string;
+} | {
+    state: "submitting";
+    activeFeedbackUrl: string;
+    text: string;
+} | {
+    state: "submitted";
+    activeFeedbackUrl: string;
+    text: string;
+} | {
+    state: "error";
+    activeFeedbackUrl: string;
+    text: string;
+};
+export declare const getFeedbackInfo: (state: State, feedbackUrl: string) => FeedbackInfo;
+export interface Actions {
+    clickRating: (feedbackUrl: string, value: number) => void;
+    clickCommentButton: (feedbackUrl: string) => void;
+    clickCommentEdit: () => void;
+    editCommentText: (text: string) => void;
+    submitComment: () => Promise<void>;
+    cancelComment: () => void;
+}
+export declare function useFeedback(handler: ConversationHandler): [State, Actions];
+export {};