@yartsun/chat-widget-types 1.0.12 → 1.0.14

package/src/config.types.ts

@@ -7,12 +7,12 @@ export type Size = 'sm' | 'md' | 'lg'
 export type BorderRadius = '0' | 'sm' | 'md' | 'lg'
 export type BtnType = 'icon' | 'text' | 'both'
 export type LaunchView = 'closed' | 'compact'
-export type ChipStyle = 'filled' | 'outlined' | 'invisible'
 export type Loader = 'dots' | 'dots-pulse' | 'circle-pulse' | 'circle-pulse-1'
-export type BgType = 'plain' | 'bubble'
+export type BgType = 'plain' | 'bubble' | 'gradient'
 export type InputStyle = 'inside' | 'stacked'
 export type ButtonStyle = 'filled' | 'outlined' | 'invisible'
 export type WarningStyle = 'gradient' | 'filled' | 'faded'
+export type BackgroundStyle = 'invisible' | 'filled' | 'gradient'
 
 // Схема конфигурации
 export interface ConfigSchema {
@@ -25,13 +25,25 @@ export interface WidgetSettings {
   bgChat: string
   gapMessageLine: number
   fontFamily: string
-  borderRadius: BorderRadius
+  borderRadius: number
   launchView: LaunchView
   letterSpacing: number
   logo: string
   fontWeight: number
   loader: Loader
   lineHeight: number
+  globalRoundingRadius: boolean
+  theme: 'light' | 'dark'
+  mode: 'collapsed'
+  position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom' | 'left' | 'right'
+  size: {
+    width: number
+    height: number
+  }
+  offset: {
+    x: number
+    y: number
+  }
 }
 
 // Тексты виджета
@@ -45,6 +57,8 @@ export interface WidgetTexts {
   inputPlaceholder: string
   disableInputText: string
   disclaimer: string
+  typingLoader: string
+  sendButton: string
 }
 
 // Базовые типы для элементов
@@ -65,9 +79,34 @@ export interface UIElement {
   bgType?: BgType
 }
 
-export interface InputSendElement extends UIElement {
+export interface UIChatElement {
+  color?: string
+  bgColor?: string
+  borderRadius?: number,
+  size?: Size,
+  fontSize?: number,
+  width?: number,
+  height?: number,
+  sidePadding?: number,
+  margin?: number,
+  verticalPadding?: number,
+  verticalSpacing?: number,
+  showType?: BtnType
+  borderWidth?: number
+  borderColor?: string
+  bgType?: BgType | ButtonStyle
+  icon?: {
+    showIcon: boolean
+    src?: string
+    color?: string
+    size?: number
+  }
+}
+
+export interface InputSendElement extends UIChatElement {
   inputStyle: InputStyle
-  borderStyle: BorderStyle
+  paddingVertical?: number
+  paddingHorizontal?: number
 }
 
 // Типы для Active Snippet
@@ -79,36 +118,36 @@ export interface ActiveSnippetParams {
 
 export interface ActiveSnippetElement {
   params: ActiveSnippetParams
-  color: string
-  bgColor: string
-  headerChip: ColorItems
+  element: UIChatElement
+  headerChip: UIChatElement
   propertyColor: string
   valueColor: string
-  yesButton: ColorItems
-  noButton: ColorItems
+  yesButton: UIChatElement
+  noButton: UIChatElement
 }
 
 // Типы для предупреждений
 export interface WarningParams {
-  warningStyle: WarningStyle
   showIcon: boolean
   icon: string
 }
 
 export interface WarningElement {
-  params: WarningParams
-  iconColor: string
-  bgColor: string
-  headlineColor?: string
-  color: string
-  resetButton?: {
-    color: string
-    bgColor: string
+  warningStyle: WarningStyle
+  content: UIChatElement
+  resetButton?: UIChatElement
+}
+
+export interface LaunchWarningElement extends WarningElement {
+  content: UIChatElement & {
+    headlineColor?: string
+    headlineTextSize: number
+    subTextSize: number
   }
 }
 
 export interface WarningsSection {
-  launchIssue: WarningElement
+  launchIssue: LaunchWarningElement
   connectionIssue: WarningElement
   reconnectIssue: WarningElement
   disableInputIssue: WarningElement
@@ -116,37 +155,34 @@ export interface WarningsSection {
 
 // Типы для лоадера
 export interface LoaderSection {
-  completeStep: {
-    icon: string
-    color: string
-  }
-  activeStep: {
-    icon: string
-    color: string
-  }
+  typingLoader: UIChatElement
+  completeStep: UIChatElement
+  activeStep: UIChatElement
 }
 
 // Типы для секций
 export interface TopSection {
   params: {
     size: Size
-    chipStyle: ChipStyle
-    chipType: BtnType
+    bgColor: string
+    bgStyle: BackgroundStyle
+    chipStyle: ButtonStyle
     buttonStyle: ButtonStyle
-    buttonType: BtnType
+    paddingVertical: number
+    paddingHorizontal: number
   }
-  chipWidgetTitle: ColorItems
-  buttons: ColorItems
+  chipWidgetTitle: UIChatElement
+  buttons: UIChatElement
 }
 
 export interface InsideSection {
   params: {
     size: Size
   }
-  messageUser: UIElement
-  messageBot: UIElement
+  messageUser: UIChatElement
+  messageBot: UIChatElement
   activeSnippet: ActiveSnippetElement
-  welcomeMessage: UIElement
+  welcomeMessage: UIChatElement
 }
 
 export interface BottomSection {
@@ -154,11 +190,21 @@ export interface BottomSection {
     size: Size
     disclaimerShow: boolean
   }
+  disclaimer: UIChatElement
   inputSend: InputSendElement
-  btnSend: UIElement
+  btnSend: UIChatElement
 }
 
+export interface ColapsedSection extends UIChatElement {}
+
 export interface WidgetSections {
+  colapsed: ColapsedSection & {
+    logo: string
+    icon: {
+      showIcon: boolean
+      size: number
+    }
+  }
   warnings: WarningsSection
   loader: LoaderSection
   top: TopSection

package/src/default-config.old.ts

@@ -0,0 +1,183 @@
+// @ts-nocheck
+import type { WidgetConfig } from './config.types'
+
+export const DEFAULT_CONFIG: WidgetConfig = {
+  schema: { // Схема віджета
+    version: '1.0',
+    required: ['settings', 'texts', 'sections'],
+  },
+  settings: { // Настройки
+    bgChat: '#434345', // Фон чата
+    gapMessageLine: 12, // Відстань між повідомленнями
+    fontFamily: 'MacPaw Fixel', // Шрифт
+    borderRadius: 12, // Радіус округлості чату
+    launchView: 'closed', // Початковий стан чату
+    letterSpacing: 0, // Інтервал між літерами
+    logo: '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.22048 12.26L8.71413 11.1293C9.1535 10.1231 9.94426 9.32209 10.9307 8.88424L12.2895 8.28107C12.7215 8.08931 12.7215 7.46082 12.2895 7.26906L10.9731 6.68472C9.9613 6.23561 9.15637 5.40496 8.72453 4.3644L8.22447 3.15941C8.0389 2.71224 7.42105 2.71224 7.23548 3.15941L6.7354 4.36439C6.30357 5.40496 5.49861 6.23561 4.48686 6.68472L3.17045 7.26906C2.73843 7.46082 2.73843 8.08931 3.17045 8.28107L4.5293 8.88424C5.51569 9.32209 6.30646 10.1231 6.7458 11.1293L7.23948 12.26C7.42924 12.6946 8.03069 12.6946 8.22048 12.26ZM13.1632 15.0131L13.302 14.6949C13.5495 14.1275 13.9953 13.6758 14.5515 13.4287L14.9792 13.2386C15.2106 13.1358 15.2106 12.7996 14.9792 12.6969L14.5754 12.5174C14.0049 12.264 13.5511 11.7955 13.3078 11.2089L13.1653 10.865C13.0659 10.6254 12.7346 10.6254 12.6352 10.865L12.4927 11.2089C12.2494 11.7955 11.7957 12.264 11.2251 12.5174L10.8213 12.6969C10.59 12.7996 10.59 13.1358 10.8213 13.2386L11.249 13.4287C11.8053 13.6758 12.251 14.1275 12.4985 14.6949L12.6374 15.0131C12.739 15.246 13.0615 15.246 13.1632 15.0131Z" fill="currentColor"/></svg>',
+    fontWeight: 500, // Товщина шрифту
+    lineHeight: 1.2, // Висота рядка
+    loader: 'dots', // Тип лоадера
+  },
+  texts: { // Тексти
+    welcomeMessage:
+      '🖖 Hi there — I’m your assistant for finding documents, tracking access, and making sense of your files. \n\nHow can I help?', // Привітання
+    widgetTitle: 'HyperShadow', // Заголовок чату
+    launchIssueTitle: 'There was a glitch', // Заголовок помилки запуску
+    launchIssueText: 'Please restart the chat, it should work', // Текст помилки запуску
+    issueText: 'Something went wrong, please restart', // Текст помилки в процесі
+    reconnectText: 'Connection issue, trying to reconnect', // Текст помилки перепідключення
+    inputPlaceholder: 'Type question', // Плейсхолдер для введення тексту
+    disableInputText:
+      'Can’t send a message while processing the previous request', // Текст заблокованого введення
+    disclaimer: 'AI-Copilot makes mistakes, please don’t consider 100% accurate', // Дисклеймер
+  },
+  sections: { // Секції віджета
+    warnings: { // Попередження
+      launchIssue: { // Помилка запуску
+        params: { // Параметри попередження
+          warningStyle: 'faded', // Стиль попередження
+          showIcon: true, // Показувати іконку
+          icon:
+            '<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.76 16.42L15.36 4.9C14.5 3.35 13.31 2.5 12 2.5C10.69 2.5 9.5 3.35 8.64 4.9L2.24 16.42C1.43 17.89 1.34 19.3 1.99 20.41C2.64 21.52 3.92 22.13 5.6 22.13H18.4C20.08 22.13 21.36 21.52 22.01 20.41C22.66 19.3 22.57 17.88 21.76 16.42ZM12.71 18.21C12.66 18.25 12.61 18.29 12.56 18.33C12.5 18.37 12.44 18.4 12.38 18.42C12.32 18.45 12.26 18.47 12.19 18.48C12.13 18.49 12.06 18.5 12 18.5C11.94 18.5 11.87 18.49 11.8 18.48C11.74 18.47 11.68 18.45 11.62 18.42C11.56 18.4 11.5 18.37 11.44 18.33C11.39 18.29 11.34 18.25 11.29 18.21C11.11 18.02 11 17.76 11 17.5C11 17.24 11.11 16.98 11.29 16.79C11.34 16.75 11.39 16.71 11.44 16.67C11.5 16.63 11.56 16.6 11.62 16.58C11.68 16.55 11.74 16.53 11.8 16.52C11.93 16.49 12.07 16.49 12.19 16.52C12.26 16.53 12.32 16.55 12.38 16.58C12.44 16.6 12.5 16.63 12.56 16.67C12.61 16.71 12.66 16.75 12.71 16.79C12.89 16.98 13 17.24 13 17.5C13 17.76 12.89 18.02 12.71 18.21ZM11.25 9.5C11.25 9.09 11.59 8.75 12 8.75C12.41 8.75 12.75 9.09 12.75 9.5V14.5C12.75 14.91 12.41 15.25 12 15.25C11.59 15.25 11.25 14.91 11.25 14.5V9.5Z" fill="currentColor"/></svg>',
+        },
+        iconColor: '#FFCC77', // Колір іконки
+        bgColor: '#8A7045', // Колір фону
+        headlineColor: '#f9c97c', // Колір заголовка
+        color: '#fff', // Колір тексту
+        resetButton: { // Кнопка скидання
+          color: '#2e2e30', // Колір тексту кнопки
+          bgColor: '#e5e1dd', // Колір фону кнопки
+        },
+      },
+      connectionIssue: { // Помилка фатальна в процесі
+        params: { // Параметри попередження
+          warningStyle: 'faded', // Стиль попередження
+          showIcon: true, // Показувати іконку
+          icon:
+            '<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M21.76 16.42L15.36 4.9C14.5 3.35 13.31 2.5 12 2.5C10.69 2.5 9.49998 3.35 8.63998 4.9L2.23998 16.42C1.42998 17.89 1.33998 19.3 1.98998 20.41C2.63998 21.52 3.91998 22.13 5.59998 22.13H18.4C20.08 22.13 21.36 21.52 22.01 20.41C22.66 19.3 22.57 17.88 21.76 16.42ZM11.25 9.5C11.25 9.09 11.59 8.75 12 8.75C12.41 8.75 12.75 9.09 12.75 9.5V14.5C12.75 14.91 12.41 15.25 12 15.25C11.59 15.25 11.25 14.91 11.25 14.5V9.5ZM12.71 18.21C12.66 18.25 12.61 18.29 12.56 18.33C12.5 18.37 12.44 18.4 12.38 18.42C12.32 18.45 12.26 18.47 12.19 18.48C12.13 18.49 12.06 18.5 12 18.5C11.94 18.5 11.87 18.49 11.8 18.48C11.74 18.47 11.68 18.45 11.62 18.42C11.56 18.4 11.5 18.37 11.44 18.33C11.39 18.29 11.34 18.25 11.29 18.21C11.11 18.02 11 17.76 11 17.5C11 17.24 11.11 16.98 11.29 16.79C11.34 16.75 11.39 16.71 11.44 16.67C11.5 16.63 11.56 16.6 11.62 16.58C11.68 16.55 11.74 16.53 11.8 16.52C11.93 16.49 12.07 16.49 12.19 16.52C12.26 16.53 12.32 16.55 12.38 16.58C12.44 16.6 12.5 16.63 12.56 16.67C12.61 16.71 12.66 16.75 12.71 16.79C12.89 16.98 13 17.24 13 17.5C13 17.76 12.89 18.02 12.71 18.21Z" fill="#FFCC77"/>\n</svg>',
+        },
+        iconColor: '#fff', // Колір іконки
+        bgColor: '#8A7045', // Колір фону
+        color: '#fff', // Колір тексту
+        resetButton: { // Кнопка скидання
+          color: '#2F2F31', // Колір тексту кнопки
+          bgColor: '#E5E1DD', // Колір фону кнопки
+        },
+      },
+      reconnectIssue: { // Помилка перепідключення
+        params: { // Параметри попередження
+          warningStyle: 'gradient', // Стиль попередження
+          showIcon: true, // Показувати іконку
+          icon:
+            '<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d=\"M4 4.02667C3.06667 5.08667 2.5 6.48 2.5 8C2.5 11.3133 5.18667 14 8.5 14C11.8133 14 14.5 11.3133 14.5 8C14.5 4.68667 11.8133 2 8.5 2C8.02667 2 7.56667 2.05333 7.12667 2.16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>',
+        },
+        iconColor: '#FFF', // Колір іконки
+        bgColor: '#8A7045', // Колір фону
+        color: '#fff', // Колір тексту
+      },
+      disableInputIssue: { // Блокування введення
+        params: { // Параметри попередження
+          warningStyle: 'gradient', // Стиль попередження
+          showIcon: true, // Показувати іконку
+          icon:
+            '<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d=\"M4 4.02667C3.06667 5.08667 2.5 6.48 2.5 8C2.5 11.3133 5.18667 14 8.5 14C11.8133 14 14.5 11.3133 14.5 8C14.5 4.68667 11.8133 2 8.5 2C8.02667 2 7.56667 2.05333 7.12667 2.16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>',
+        },
+        iconColor: '#fff', // Колір іконки
+        bgColor: '#8A7045', // Колір фону
+        color: '#fff', // Колір тексту
+      },
+    },
+    loader: {
+      completeStep: {
+        icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M7.99967 14.6666C11.6816 14.6666 14.6663 11.6818 14.6663 7.99992C14.6663 4.31802 11.6816 1.33325 7.99967 1.33325C4.31778 1.33325 1.33301 4.31802 1.33301 7.99992C1.33301 11.6818 4.31778 14.6666 7.99967 14.6666Z" fill="currentColor"/><path d="M7.05297 10.3867C6.91964 10.3867 6.79297 10.3334 6.69964 10.2401L4.81297 8.3534C4.61964 8.16007 4.61964 7.84007 4.81297 7.64673C5.0063 7.4534 5.3263 7.4534 5.51964 7.64673L7.05297 9.18007L10.4796 5.7534C10.673 5.56007 10.993 5.56007 11.1863 5.7534C11.3796 5.94673 11.3796 6.26673 11.1863 6.46006L7.4063 10.2401C7.31297 10.3334 7.1863 10.3867 7.05297 10.3867Z" fill="currentColor"/></svg>',
+        color: '#8E8E8F',
+      },
+      activeStep: {
+        icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 4.02667C2.56667 5.08667 2 6.48 2 8C2 11.3133 4.68667 14 8 14C11.3133 14 14 11.3133 14 8C14 4.68667 11.3133 2 8 2C7.52667 2 7.06667 2.05333 6.62667 2.16" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+        color: '#fff',
+      },
+    },
+    top: { // Верхня частина віджета
+      params: { // Параметри верхньої частини
+        size: 'md', // Розмір
+        chipStyle: 'filled', // Стиль чіпа
+        chipType: 'both', // Тип чіпа
+        buttonStyle: 'filled', // Стиль кнопки
+        buttonType: 'both', // Тип кнопки
+      },
+      chipWidgetTitle: { // Заголовок чипа
+        color: '#fff', // Колір тексту
+        bgColor: '#5E4AC6', // Колір фону
+      },
+      buttons: { // Кнопки
+        color: '#BBBBBD', // Колір тексту
+        bgColor: '#2F2F31', // Колір фону
+      },
+    },
+    inside: { // Внутрішня частина віджета
+      params: { // Параметри внутрішньої частини
+        size: 'md', // Розмір
+      },
+      messageUser: { // Повідомлення користувача
+        color: '#F9F8F8', // Колір тексту
+        bgColor: '#F8F8F933', // Колір фону
+        bgType: 'bubble', // Тип фону
+      },
+      messageBot: { // Повідомлення бота
+        color: '#fff', // Колір тексту
+        bgColor: '#5E4AC6', // Колір фону
+        bgType: 'plain', // Тип фону
+      },
+      activeSnippet: { // Сніппет
+        params: { // Параметри сніппета
+          buttonType: 'both', // Тип кнопки
+          buttonStyle: 'filled', // Стиль кнопки
+          size: 'md', // Розмір
+        },
+        color: '#fff', // Колір тексту
+        bgColor: '#373739', // Колір фону
+        headerChip: { // Заголовок чипа
+          color: '#fff', // Колір тексту
+          bgColor: '#69696A', // Колір фону
+        },
+        propertyColor: 'rgba(255, 255, 255, 0.30)', // Колір тексту
+        valueColor: '#fff', // Колір тексту
+        yesButton: { // Кнопка так
+          color: '#fff', // Колір тексту
+          bgColor: '#12A150', // Колір фону
+        },
+        noButton: { // Кнопка ні
+          color: '#fff', // Колір тексту
+          bgColor: '#C20E4D', // Колір фону
+        },
+      },
+      welcomeMessage: { // Привітання
+        color: '#fff', // Колір тексту
+      },
+    },
+    bottom: { // Нижня частина віджета
+      params: { // Параметри нижньої частини
+        size: 'md', // Розмір
+        disclaimerShow: false, // Показувати дисклеймер
+      },
+      inputSend: { // Кнопка відправлення
+        color: '#EEECEC', // Колір тексту
+        bgColor: '#373739', // Колір фону
+        borderStyle: { // Стиль бордера
+          borderColor: '#595959', // Колір бордера
+          borderWidth: 1, // Ширина бордера
+        },
+        inputStyle: 'inside', // Стиль введення
+        bgType: 'plain', // Тип фону
+      },
+      btnSend: { // Кнопка відправлення
+        color: '#1E1E1E', // Колір тексту
+        bgColor: 'rgba(255, 255, 255, 0.50)', // Колір фону
+        type: 'both', // Тип кнопки
+      },
+    },
+  },
+}
+
+
+