@nlxai/touchpoint-ui 1.1.1 → 1.1.2

package/index.html

@@ -91,6 +91,48 @@
     <script type="module">
       import { create, html } from "/src/index.tsx";
 
+      const CustomLaunchButton = ({ className, onClick }) => {
+        return html`
+          <div
+            className=${className}
+            style=${{ width: "56px", height: "56px" }}
+          >
+            <Ripple
+              style=${{ color: "rgba(0, 64, 255, 0.2)" }}
+              className="rounded-outer"
+            />
+            <button
+              className="relative rounded-outer p-2 after:content-[''] after:rounded-outer after:absolute after:inset-0 after:pointer-events-none hover:after:bg-primary-10"
+              style=${{ color: "#fff", backgroundColor: "rgba(0, 64, 255, 1)" }}
+              onClick=${onClick}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="100%"
+                height="100%"
+                fill="currentColor"
+              >
+                <path
+                  d="M13.5562 5.34835C12.2796 6.62498 12.4866 8.90179 14.0186 10.4337C14.3377 10.7529 14.5571 11.134 14.6767 11.5383C14.8007 11.9572 14.8177 12.4011 14.7277 12.8268C14.6656 13.1203 14.5526 13.4051 14.3887 13.6672C14.3259 13.7677 14.2557 13.865 14.1778 13.9581C14.1279 14.018 14.0747 14.0761 14.0186 14.1322C13.3341 14.8166 12.3641 15.0421 11.4917 14.8092L11.4728 14.8042C9.38654 14.2543 7.32235 15.2129 6.85652 16.9516C6.5761 17.9979 5.50065 18.6188 4.45431 18.3385C3.40798 18.0581 2.787 16.9826 3.06729 15.9363C3.34209 14.9111 4.38012 14.2942 5.40615 14.5335L5.40666 14.5317C5.42748 14.5378 5.44842 14.5437 5.46962 14.5493C7.21342 15.0166 9.08173 13.699 9.64244 11.6062C9.64857 11.5835 9.65521 11.5608 9.66185 11.5383C9.7815 11.134 10.0009 10.7529 10.32 10.4337L10.332 10.4214C10.339 10.4142 10.346 10.407 10.3533 10.4C11.8549 8.86865 12.0496 6.61566 10.7824 5.34835C10.0163 4.58237 10.0163 3.34047 10.7824 2.57449C11.5483 1.8085 12.7903 1.8085 13.5562 2.57449C14.3066 3.32501 14.3218 4.53237 13.6016 5.30135L13.6029 5.30263C13.5872 5.3177 13.5716 5.33289 13.5562 5.34835Z"
+                />
+                <path
+                  d="M19.327 6.83185C20.0311 6.83185 20.6019 7.40264 20.6019 8.10675C20.6019 8.81087 20.0311 9.38166 19.327 9.38166C18.6229 9.38166 18.0521 8.81087 18.0521 8.10675C18.0521 7.40264 18.6229 6.83185 19.327 6.83185Z"
+                />
+                <path
+                  d="M21.3237 16.4754C21.3237 15.3741 20.4309 14.4813 19.3297 14.4813C18.2284 14.4813 17.3356 15.3741 17.3356 16.4754C17.3356 17.5767 18.2284 18.4695 19.3297 18.4695C20.4309 18.4695 21.3237 17.5767 21.3237 16.4754Z"
+                />
+                <path
+                  d="M12.1025 19.3194C12.8246 19.3194 13.4101 19.9195 13.4101 20.6597C13.4101 21.4 12.8246 22 12.1025 22C11.3804 22 10.7949 21.4 10.7949 20.6597C10.7949 19.9195 11.3804 19.3194 12.1025 19.3194Z"
+                />
+                <path
+                  d="M6.28367 8.13944C6.28367 7.41726 5.68363 6.83185 4.94339 6.83185C4.20314 6.83185 3.6031 7.41726 3.6031 8.13944C3.6031 8.86163 4.20314 9.44704 4.94339 9.44704C5.68363 9.44704 6.28367 8.86163 6.28367 8.13944Z"
+                />
+              </svg>
+            </button>
+          </div>
+        `;
+      };
+
       const touchpoint = await create({
         config: {
           applicationUrl:
@@ -101,7 +143,8 @@
           userId: "1234-5678",
           languageCode: "en-US",
         },
-        input: "voiceMini",
+        input: "voice",
+        launchIcon: CustomLaunchButton,
         initializeConversation: () => {},
       });
     </script>

package/lib/components/Ripple.d.ts

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, CSSProperties } from 'react';
 export declare const Ripple: FC<{
     className?: string;
+    style?: CSSProperties;
 }>;

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

@@ -1,9 +1,13 @@
-import { FC } from 'react';
+import { FC, ComponentType } from 'react';
 export interface LaunchButtonProps {
     label: string;
     className?: string;
     showLabel?: boolean;
     onClick?: () => void;
     iconUrl?: string;
+    Custom?: ComponentType<{
+        className?: string;
+        onClick?: () => void;
+    }>;
 }
 export declare const LaunchButton: FC<LaunchButtonProps>;

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import { ConversationHandler } from '@nlxai/chat-core';
 import { TextButton } from './components/ui/TextButton';
 import { IconButton } from './components/ui/IconButton';
+import { Ripple } from './components/Ripple';
 import { BaseText, SmallText } from './components/ui/Typography';
 import { CustomCard, CustomCardRow, CustomCardImageRow } from './components/ui/CustomCard';
 import { Carousel } from './components/ui/Carousel';
@@ -24,12 +25,12 @@ export { default as React } from 'react';
  */
 export declare const version: string;
 export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
-export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, };
+export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, Ripple, };
 export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/CustomCard';
 export { type DateInputProps } from './components/ui/DateInput';
 export { type IconButtonProps, type IconButtonType, } from './components/ui/IconButton';
 export { type TextButtonProps } from './components/ui/TextButton';
-export { type InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, } from './types';
+export { type InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, type CustomLaunchButton, } from './types';
 /**
  * Instance of a Touchpoint UI component
  */