Feat/post message on parent for message

.changeset/angry-donkeys-share.md

@@ -0,0 +1,5 @@
+---
+'@openassistantgpt/ui': patch
+---
+
+Add feature to remove all icons from chat

README.md

@@ -115,6 +115,9 @@ export default function ChatPage() {
     displayFooterText: true,
     footerLink: 'https://www.openassistantgpt.io',
     footerTextName: 'OpenAssistantGPT',
+
+    messageSourceText: '',
+    withChatMessageIcon: true,
   };
 
   return (

examples/next-website/app/page.tsx

@@ -45,6 +45,7 @@ export default function ChatPage() {
     fontSize: '14px',
 
     messageSourceText: '',
+    withChatMessageIcon: true,
   };
 
   useEffect(() => {

examples/website-chatbot-window/app/window/page.tsx

@@ -41,6 +41,7 @@ export default function ChatPage() {
     footerTextName: 'OpenAssistantGPT',
 
     messageSourceText: 'Chatbot source:',
+    withChatMessageIcon: false,
   };
 
   return (

examples/website-custom-api/app/window/page.tsx

@@ -39,6 +39,7 @@ export default function ChatPage() {
     fontSize: '15px',
 
     messageSourceText: '',
+    withChatMessageIcon: true,
   };
 
   return (

packages/ui/components/chat-message.tsx

@@ -31,6 +31,7 @@
   isFirst?: boolean;
   fontSize: string; // Keep as string for pixel values
   references: Reference[];
+  withChatMessageIcon: boolean;
 }
 
 const getDirection = (isRTL: boolean) => (isRTL ? 'rtl' : 'ltr');
@@ -44,6 +45,7 @@
   attachments,
   references,
   fontSize = '16px', // Default font size in pixels
+  withChatMessageIcon = true,
   ...props
 }: ChatMessageProps) {
   return (
@@ -59,52 +61,58 @@
               background: chatbot.userReplyBackgroundColor,
               fontSize, // Apply font size in pixels here
             }}
-            className="p-2 rounded-lg mr-4 whitespace-pre-wrap"
+            className="p-2 rounded-lg mr-3 whitespace-pre-wrap"
             dir={getDirection(chatbot.rightToLeftLanguage)} // Set text direction
           >
             <svg
               fill={chatbot.userReplyBackgroundColor}
-              className="absolute bottom-[0px] right-11"
+              className={`absolute bottom-[0px] ${
+                chatbot.withChatMessageIcon ? 'right-14' : 'right-2'
+              }`}
               height="14"
               width="13"
             >
               <path d="M6 .246c-.175 5.992-1.539 8.89-5.5 13.5 6.117.073 9.128-.306 12.5-3L6 .246Z"></path>
             </svg>
             {message.content}
           </p>
-          <div
-            className={cn(
-              'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
-              'bg-background',
-            )}
-          >
-            <Icons.user />
-          </div>
-        </div>
-      ) : (
-        <div
-          className={cn('pr-10 group relative mb-4 flex items-start ')}
-          {...props}
-        >
-          {chatbot.chatbotLogoURL ? (
-            <div className="size-8" style={{ width: '30px', height: '30px' }}>
-              <img
-                src={chatbot.chatbotLogoURL}
-                alt="chatbot logo"
-                width={50}
-                height={50}
-              />
-            </div>
-          ) : (
+
+          {withChatMessageIcon && (
             <div
               className={cn(
-                'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
-                'bg-primary text-primary-foreground',
+                'flex size-8 shrink-0 mr-4 select-none items-center justify-center rounded-md border shadow',
+                'bg-background',
               )}
             >
-              <Icons.bot />
+              <Icons.user />
             </div>
           )}
+        </div>
+      ) : (
+        <div
+          className={cn('pr-10 group relative mb-4 flex items-start ')}
+          {...props}
+        >
+          {withChatMessageIcon &&
+            (chatbot.chatbotLogoURL ? (
+              <div className="size-8" style={{ width: '30px', height: '30px' }}>
+                <img
+                  src={chatbot.chatbotLogoURL}
+                  alt="chatbot logo"
+                  width={50}
+                  height={50}
+                />
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
+                  'bg-primary text-primary-foreground',
+                )}
+              >
+                <Icons.bot />
+              </div>
+            ))}
           <div className="flex-1 px-1 ml-4">
             {message.content == 'loading' ? (
               <Icons.loading className="animate-spin" />

packages/ui/components/chat.tsx

@@ -111,19 +111,19 @@
         variant: 'destructive',
       });
     }
   }, [error]);
 
   useEffect(() => {
     if (onThreadIdChange) {
       onThreadIdChange(threadId);
     }
   }, [threadId]);
 
   useEffect(() => {
     if (onMessagesChange) {
       onMessagesChange(messages);
     }
   }, [messages]);
 
   useEffect(() => {
     if (defaultMessage !== '') {
@@ -132,7 +132,7 @@
           target: { value: defaultMessage },
         } as React.ChangeEvent<HTMLInputElement>);
     }
   }, [defaultMessage]);
 
   function closeChat() {
     window.parent.postMessage('closeChat', '*');
@@ -224,7 +224,7 @@
         setUploadQueue([]);
       }
     },
     [setAttachments],
   );
 
   return (
@@ -249,13 +249,14 @@
           <div
             ref={messagesContainerRef}
             className={cn(
-              'pb-[200px] overflow-auto max-h-max pl-6 sm:pl-20 pr-6 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
+              'pb-[200px] overflow-auto max-h-max pl-6 sm:pl-20 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
               className,
             )}
           >
             <ChatMessage
               isFirst={true}
               chatbot={chatbot}
+              withChatMessageIcon={chatbot.withChatMessageIcon}
               message={{
                 id: '0',
                 role: 'assistant',
@@ -276,6 +277,7 @@
                     key={index}
                     message={message}
                     fontSize={chatbot.fontSize}
+                    withChatMessageIcon={chatbot.withChatMessageIcon}
                     references={
                       annotationsArray
                         .map(a => {
@@ -306,6 +308,7 @@
               <div className="mt-4" id="waiting">
                 <ChatMessage
                   chatbot={chatbot}
+                  withChatMessageIcon={chatbot.withChatMessageIcon}
                   message={{
                     id: 'waiting',
                     role: 'assistant',

packages/ui/src/chatbot.ts

@@ -33,4 +33,6 @@ export type ChatbotConfig = {
   footerLink: string;
 
   messageSourceText: string;
+
+  withChatMessageIcon: boolean;
 };