funda-ui 4.5.888 → 4.5.899

package/Chatbox/index.css

@@ -29,8 +29,8 @@
     background-position: 250% 0, 250% 0;
   }
 }
-/*=================== Chatbox (Core) =================*/
-.custom-chatbox-circle {
+/*===================  Chatbox (Core) =================*/
+.app-chatbox-circle {
   --custom-chatbox-circle-color: #5A5EB9;
   --custom-chatbox-circle-text: #fff;
   position: fixed;
@@ -48,26 +48,26 @@
   vertical-align: middle;
   transition: 0.1s ease-in-out;
 }
-.custom-chatbox-circle > span {
+.app-chatbox-circle > span {
   display: inline-block;
   margin-top: 25%;
 }
-.custom-chatbox-circle:hover {
+.app-chatbox-circle:hover {
   transform: scale(1.2);
 }
-.custom-chatbox-circle svg {
+.app-chatbox-circle svg {
   width: 30px;
   height: 30px;
 }
-.custom-chatbox-circle svg path {
+.app-chatbox-circle svg path {
   stroke: #fff;
 }
 
-.custom-chatbox-close {
+.app-chatbox-close {
   --custom-chatbox-close-color: #333;
   padding: 20px;
   position: fixed;
-  bottom: calc(100vh - 55px);
+  bottom: calc(100vh - 2.625rem - 55px);
   z-index: 1032;
   right: -15px;
   cursor: pointer;
@@ -76,19 +76,19 @@
   background: none;
   transition-delay: 0.05s; /* Prevent real-time update of store displacement */
 }
-.custom-chatbox-close path {
+.app-chatbox-close path {
   fill: var(--custom-chatbox-close-color);
 }
-.custom-chatbox-close:hover {
+.app-chatbox-close:hover {
   transform: scale(1.2);
 }
-.custom-chatbox-close:hover path {
+.app-chatbox-close:hover path {
   fill: #f00;
 }
 
-.custom-chatbox-container {
+.app-chatbox-container {
   --custom-chatbox-w: 600px;
-  --custom-chatbox-h: 100vh;
+  --custom-chatbox-h: calc(100vh - 2.625rem);
   --custom-chatbox-bg: #fff;
   --custom-chatbox-input-bg: #fff;
   --custom-chatbox-default-txt-color: #333;
@@ -109,6 +109,10 @@
   --custom-chatbox-toolkit-btn-active-color: #c2dfff;
   --custom-chatbox-newchat-btn-color: #f8f9fa;
   --custom-chatbox-newchat-btn-border-color: #e9ecef;
+  --custom-chatbox-toolkit-opt-color: #f8f9fa;
+  --custom-chatbox-toolkit-opt-border-color: #e9ecef;
+  --custom-chatbox-toolkit-opt-active-color: #c2dfff;
+  --custom-chatbox-toolkit-btn-radius: 20px;
   min-width: var(--custom-chatbox-w);
   max-width: var(--custom-chatbox-w);
   margin: auto;
@@ -127,66 +131,67 @@
   /* loading */
   /* new chat button */
   /* toolkit buttons */
+  /* toolkit options */
 }
-.custom-chatbox-container details {
+.app-chatbox-container details {
   font-style: italic;
   margin: 0;
   padding: 0;
   font-size: 0.75rem;
   margin-bottom: 0.5rem;
 }
-.custom-chatbox-container summary {
+.app-chatbox-container summary {
   cursor: pointer;
   font-weight: bold;
   color: var(--custom-chatbox-primary-color);
   outline: none;
 }
-.custom-chatbox-container details[open] summary {
+.app-chatbox-container details[open] summary {
   color: var(--custom-chatbox-primary-text);
 }
-.custom-chatbox-container h1 {
+.app-chatbox-container h1 {
   font-size: 1.35rem;
 }
-.custom-chatbox-container h2 {
+.app-chatbox-container h2 {
   font-size: 1.25rem;
 }
-.custom-chatbox-container h3 {
+.app-chatbox-container h3 {
   font-size: 1.125rem;
 }
-.custom-chatbox-container h4 {
+.app-chatbox-container h4 {
   font-size: 1rem;
 }
-.custom-chatbox-container h5 {
+.app-chatbox-container h5 {
   font-size: 0.875rem;
 }
-.custom-chatbox-container h6 {
+.app-chatbox-container h6 {
   font-size: 0.75rem;
 }
-.custom-chatbox-container .messages {
+.app-chatbox-container .messages {
   height: calc(100% - 80px);
   overflow-y: auto;
   margin-bottom: 10px;
   font-size: 13px;
   margin-right: 0;
 }
-.custom-chatbox-container .messages img, .custom-chatbox-container .messages svg, .custom-chatbox-container .messages video, .custom-chatbox-container .messages canvas, .custom-chatbox-container .messages audio, .custom-chatbox-container .messages iframe, .custom-chatbox-container .messages embed, .custom-chatbox-container .messages object {
+.app-chatbox-container .messages img, .app-chatbox-container .messages svg, .app-chatbox-container .messages video, .app-chatbox-container .messages canvas, .app-chatbox-container .messages audio, .app-chatbox-container .messages iframe, .app-chatbox-container .messages embed, .app-chatbox-container .messages object {
   display: inline;
 }
-.custom-chatbox-container .messages::-webkit-scrollbar {
+.app-chatbox-container .messages::-webkit-scrollbar {
   width: 3px;
 }
-.custom-chatbox-container .messages::-webkit-scrollbar-thumb {
+.app-chatbox-container .messages::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
 }
-.custom-chatbox-container .messages > div {
+.app-chatbox-container .messages > div {
   margin: 5px 0;
   padding: 3px 5px;
   border-radius: 0.35rem;
 }
-.custom-chatbox-container .messages p {
+.app-chatbox-container .messages p {
   margin: 3px 0;
 }
-.custom-chatbox-container .messages .qa-timestamp {
+.app-chatbox-container .messages .qa-timestamp {
   font-size: 0.75rem;
   color: var(--custom-chatbox-time-color);
   font-style: italic;
@@ -194,14 +199,14 @@
   display: block;
   text-align: right;
 }
-.custom-chatbox-container .messages .qa-name {
+.app-chatbox-container .messages .qa-name {
   font-weight: bold;
   color: var(--custom-chatbox-primary-color);
 }
-.custom-chatbox-container .messages .qa-name svg, .custom-chatbox-container .messages .qa-name img {
+.app-chatbox-container .messages .qa-name svg, .app-chatbox-container .messages .qa-name img {
   max-height: 15px;
 }
-.custom-chatbox-container .messages .qa-content {
+.app-chatbox-container .messages .qa-content {
   background: var(--custom-chatbox-msg-bg);
   padding: 0.5rem;
   border-radius: 0.35rem;
@@ -209,23 +214,23 @@
   display: inline-block;
   text-align: start;
 }
-.custom-chatbox-container .messages .request {
+.app-chatbox-container .messages .request {
   text-align: end;
 }
-.custom-chatbox-container .messages .request .qa-content {
+.app-chatbox-container .messages .request .qa-content {
   max-width: var(--custom-chatbox-content-w);
   background: var(--custom-chatbox-msg-bg2);
 }
-.custom-chatbox-container .messages .reply {
+.app-chatbox-container .messages .reply {
   text-align: start;
 }
-.custom-chatbox-container .messages .reply .qa-name {
+.app-chatbox-container .messages .reply .qa-name {
   display: flex;
 }
-.custom-chatbox-container .messages .reply .qa-content {
+.app-chatbox-container .messages .reply .qa-content {
   width: var(--custom-chatbox-content-w);
 }
-.custom-chatbox-container .msg-dotted-loader-container {
+.app-chatbox-container .msg-dotted-loader-container {
   font-weight: normal;
   transform: translateY(-5px);
   display: flex;
@@ -234,10 +239,10 @@
   margin-left: 0.3rem;
   color: var(--custom-chatbox-gray-color);
 }
-.custom-chatbox-container .msg-dotted-loader-text {
+.app-chatbox-container .msg-dotted-loader-text {
   transform: translateY(-10%);
 }
-.custom-chatbox-container .msg-dotted-loader {
+.app-chatbox-container .msg-dotted-loader {
   position: relative;
   text-align: center;
   display: inline-block;
@@ -245,8 +250,8 @@
   height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
   margin-right: 0.1rem;
 }
-.custom-chatbox-container .msg-dotted-loader::after,
-.custom-chatbox-container .msg-dotted-loader::before {
+.app-chatbox-container .msg-dotted-loader::after,
+.app-chatbox-container .msg-dotted-loader::before {
   content: "";
   position: absolute;
   top: 0;
@@ -258,7 +263,7 @@
   border-style: dotted solid dotted solid;
   animation: turn-left 1.5s linear infinite;
 }
-.custom-chatbox-container .msg-dotted-loader::before {
+.app-chatbox-container .msg-dotted-loader::before {
   left: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
   top: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
   width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
@@ -282,17 +287,17 @@
     transform: rotate(-360deg);
   }
 }
-.custom-chatbox-container .msgcontrol {
+.app-chatbox-container .msgcontrol {
   display: flex;
   position: absolute;
   bottom: 10px;
   z-index: 1;
   width: calc(100% - 40px);
 }
-.custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
+.app-chatbox-container .msgcontrol img, .app-chatbox-container .msgcontrol svg, .app-chatbox-container .msgcontrol video, .app-chatbox-container .msgcontrol canvas, .app-chatbox-container .msgcontrol audio, .app-chatbox-container .msgcontrol iframe, .app-chatbox-container .msgcontrol embed, .app-chatbox-container .msgcontrol object {
   display: inline;
 }
-.custom-chatbox-container .msgcontrol .messageInput {
+.app-chatbox-container .msgcontrol .messageInput {
   width: 100%;
   border: 1px solid var(--custom-chatbox-msg-border);
   border-radius: 4px;
@@ -300,10 +305,10 @@
   border: none;
   outline: none;
 }
-.custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
+.app-chatbox-container .msgcontrol .messageInput:focus, .app-chatbox-container .msgcontrol .messageInput:focus-visible {
   outline: none;
 }
-.custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
+.app-chatbox-container .msgcontrol .messageInput .messageInput-control {
   background: var(--custom-chatbox-input-bg);
   padding: 0.5rem;
   border-radius: 0.35rem;
@@ -313,17 +318,17 @@
   max-height: 50vh;
   border: 1px solid var(--custom-chatbox-gray-color);
 }
-.custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
+.app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
   width: 3px;
 }
-.custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
+.app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
 }
-.custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
+.app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
   border-color: transparent;
   outline: 1px solid var(--custom-chatbox-primary-color);
 }
-.custom-chatbox-container .msgcontrol button {
+.app-chatbox-container .msgcontrol button {
   padding: 6px;
   border: none;
   position: absolute;
@@ -342,20 +347,20 @@
   height: 40px;
   padding: 0;
 }
-.custom-chatbox-container .msgcontrol button path {
+.app-chatbox-container .msgcontrol button path {
   fill: var(--custom-chatbox-default-btn-color);
 }
-.custom-chatbox-container .msgcontrol button:hover {
+.app-chatbox-container .msgcontrol button:hover {
   transform: scale(1.1);
 }
-.custom-chatbox-container .msgcontrol button:disabled {
+.app-chatbox-container .msgcontrol button:disabled {
   opacity: 0.7;
 }
-.custom-chatbox-container .msgcontrol button.is-suspended {
+.app-chatbox-container .msgcontrol button.is-suspended {
   background-color: var(--custom-chatbox-stop-color);
   border-color: var(--custom-chatbox-stop-color);
 }
-.custom-chatbox-container .loading {
+.app-chatbox-container .loading {
   margin-top: 0;
   height: 5px;
   position: absolute;
@@ -363,10 +368,10 @@
   width: calc(100% - 40px);
   z-index: 1;
 }
-.custom-chatbox-container .newchat-btn {
+.app-chatbox-container .newchat-btn {
   text-align: center;
 }
-.custom-chatbox-container .newchat-btn > button {
+.app-chatbox-container .newchat-btn > button {
   padding: 3px 6px;
   background-color: var(--custom-chatbox-newchat-btn-color);
   border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
@@ -376,13 +381,13 @@
   font-size: 0.8125rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
-.custom-chatbox-container .newchat-btn > button img, .custom-chatbox-container .newchat-btn > button svg, .custom-chatbox-container .newchat-btn > button video, .custom-chatbox-container .newchat-btn > button canvas, .custom-chatbox-container .newchat-btn > button audio, .custom-chatbox-container .newchat-btn > button iframe, .custom-chatbox-container .newchat-btn > button embed, .custom-chatbox-container .newchat-btn > button object {
+.app-chatbox-container .newchat-btn > button img, .app-chatbox-container .newchat-btn > button svg, .app-chatbox-container .newchat-btn > button video, .app-chatbox-container .newchat-btn > button canvas, .app-chatbox-container .newchat-btn > button audio, .app-chatbox-container .newchat-btn > button iframe, .app-chatbox-container .newchat-btn > button embed, .app-chatbox-container .newchat-btn > button object {
   display: inline;
 }
-.custom-chatbox-container .newchat-btn > button:hover {
+.app-chatbox-container .newchat-btn > button:hover {
   transform: translateY(-2px);
 }
-.custom-chatbox-container .toolkit-btns {
+.app-chatbox-container .toolkit-btns {
   display: flex;
   position: absolute;
   bottom: 20px;
@@ -392,22 +397,95 @@
   gap: 8px;
   justify-content: center;
 }
-.custom-chatbox-container .toolkit-btns > button {
+.app-chatbox-container .toolkit-btns button {
   padding: 3px 6px;
   background-color: var(--custom-chatbox-toolkit-btn-color);
   border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
-  border-radius: 20px;
+  border-radius: var(--custom-chatbox-toolkit-btn-radius);
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.75rem;
 }
-.custom-chatbox-container .toolkit-btns > button img, .custom-chatbox-container .toolkit-btns > button svg, .custom-chatbox-container .toolkit-btns > button video, .custom-chatbox-container .toolkit-btns > button canvas, .custom-chatbox-container .toolkit-btns > button audio, .custom-chatbox-container .toolkit-btns > button iframe, .custom-chatbox-container .toolkit-btns > button embed, .custom-chatbox-container .toolkit-btns > button object {
+.app-chatbox-container .toolkit-btns button img, .app-chatbox-container .toolkit-btns button svg, .app-chatbox-container .toolkit-btns button video, .app-chatbox-container .toolkit-btns button canvas, .app-chatbox-container .toolkit-btns button audio, .app-chatbox-container .toolkit-btns button iframe, .app-chatbox-container .toolkit-btns button embed, .app-chatbox-container .toolkit-btns button object {
   display: inline;
 }
-.custom-chatbox-container .toolkit-btns > button:hover {
+.app-chatbox-container .toolkit-btns button:hover {
   background-color: var(--custom-chatbox-toolkit-btn-border-color);
   transform: translateY(-2px);
 }
-.custom-chatbox-container .toolkit-btns > button.active {
+.app-chatbox-container .toolkit-btns button.opt-active, .app-chatbox-container .toolkit-btns button.active {
   background-color: var(--custom-chatbox-toolkit-btn-active-color);
 }
+@keyframes dropupAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.app-chatbox-container .toolkit-select-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #ddd;
+  border-radius: var(--custom-chatbox-toolkit-btn-radius);
+  cursor: pointer;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
+  margin-left: 8px;
+  font-size: 10px;
+  transition: transform 0.2s ease;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
+  transform: rotate(180deg);
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
+  z-index: 1000;
+  width: 100%;
+  min-width: 120px;
+  transform: translateY(-100%);
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
+  background-color: var(--custom-chatbox-toolkit-opt-color);
+  border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
+  border-radius: 4px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 10px;
+  max-height: 300px;
+  overflow-y: auto;
+  animation: dropupAnimation 0.2s ease;
+  position: absolute;
+  bottom: 1rem;
+  left: 0;
+  right: 0;
+  display: none;
+  z-index: 1000;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
+  display: block;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
+  width: 3px;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
+  padding: 3px 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-size: 0.75rem;
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
+  color: var(--custom-chatbox-gray-color);
+}
+.app-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
+  background-color: var(--custom-chatbox-toolkit-opt-active-color);
+}

package/Chatbox/index.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+export interface CustomMethod {
+    name: string;
+    func: (...args: any[]) => any;
+}
 export declare type MessageDetail = {
     sender: string;
     timestamp: string;
@@ -9,22 +13,29 @@ export interface FloatingButton {
     label: string;
     value: string;
     onClick: string;
+    isSelect?: boolean;
+    [key: string]: any;
+}
+export interface FloatingButtonSelectOption {
+    label: string;
+    value: string;
+    onClick: string;
 }
 export interface RequestConfig {
     apiUrl: string;
     requestBody: string;
     responseExtractor: string;
 }
-declare type CustomRequestConfig = {
+export declare type CustomRequestConfig = {
     requestBody: any;
     apiUrl: string;
     headers: any;
 };
-declare type CustomRequestResponse = {
+export declare type CustomRequestResponse = {
     content: string | Response | null;
     isStream: boolean;
 };
-declare type CustomRequestFunction = (message: string, config: CustomRequestConfig) => Promise<CustomRequestResponse>;
+export declare type CustomRequestFunction = (message: string, config: CustomRequestConfig) => Promise<CustomRequestResponse>;
 export declare type ChatboxProps = {
     debug?: boolean;
     prefix?: string;
@@ -53,11 +64,13 @@ export declare type ChatboxProps = {
     contextData?: Record<string, any>;
     toolkitButtons?: FloatingButton[];
     newChatButton?: FloatingButton;
+    customMethods?: CustomMethod[];
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
     nameFormatter?: (input: string) => string;
     onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
+    onInputCallback?: (input: string) => Promise<string>;
     onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
     onComplete?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
 };