@pubuduth-aplicy/chat-ui 2.1.25 → 2.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.25",
+  "version": "2.1.26",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/MessageInput.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { useMessageMutation } from '../../hooks/mutations/useSendMessage';
 import { useChatContext } from '../../providers/ChatProvider';
 import useChatUIStore from '../../stores/Zustant';
+import paperplane from '../../assets/icons8-send-50.png'
 // import { PaperPlaneRight } from '@phosphor-icons/react'; // Assuming you're using icons from Phosphor Icons library
 // import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
 
@@ -28,9 +29,9 @@ const MessageInput = () => {
   };
 
   return (
-    <form className='chatMessageInputDiv' onSubmit={handleSubmit}>
+    <form className='chatMessageInputform'  onSubmit={handleSubmit}>
      
-      <div style={{width:"100%"}}>
+      <div className='chatMessageInputdiv' >
         <input
           type='text'
           className='chatMessageInput'
@@ -39,7 +40,7 @@ const MessageInput = () => {
           onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
         />
         <button type='submit' className='chatMessageInputSubmit'>
-          send
+          <img src={paperplane} alt="send" />
           {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
         </button>
       </div>

package/src/declarations.d.ts

@@ -3,4 +3,14 @@ declare module '*.css' {
     const content: string;
     export default content;
   }
+
+declare module '*.png' {
+    const content: string;
+    export default content;
+  }
+
+declare module '*.svg' {
+    const content: string;
+    export default content;
+  }
   

package/src/style/style.css

@@ -4,7 +4,7 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
     border-radius: 0.5rem;
     background-clip: padding-box;
-    background-color: #9CA3AF;
+    /* background-color: #9CA3AF; */
     --bg-opacity: 0;
     backdrop-blur: blur(16px);
 }
@@ -18,7 +18,7 @@
 
 .messageContainer {
     grid-column: span 4;
-    border: 1px solid;
+    /* border: 1px solid; */
     max-height: 100vh;
     overflow-y: auto;
 }
@@ -73,7 +73,7 @@
 
 .chatSidebarInput {
     outline-style: none;
-    width: 100%;
+    /* width: 100%; */
     padding: 8px 4px;
     font-size: 1rem;
     border-radius: 4px;
@@ -94,7 +94,7 @@
 .chatSidebarConversationMain {
     display: inline-flex;
     padding: 0.5rem;
-    margin-top: 0.875rem; 
+    margin-top: 0.875rem;
     /* padding-top: 0.75rem;
     padding-bottom: 0.75rem; */
     gap: 0.75rem;
@@ -202,7 +202,7 @@
 }
 
 .chatMessageContainerOutterDiv {
-    display: inline-flex;
+    /* display: inline-flex; */
     justify-content: flex-start;
     align-items: center;
     align-self: stretch;
@@ -248,19 +248,21 @@
 
 .chatMessagesBubble_me {
     float: right;
-    background-color: #34D399;
+    background-color: #12bbb5;
+    color: white;
 }
 
 .chatMessagesBubble_Other {
     float: left;
-    background-color: #1D4ED8;
+    background-color: #f3f4f6;
+    color: #374151;
 }
 
 .chatMessage {
     overflow-y: auto;
     padding-left: 2rem;
-    padding-right: 2rem;
-    padding-top: 2rem;
+    /* padding-right: 2rem; */
+    padding-top: 0.5rem;
     flex-grow: 1;
     max-height: 100vh;
     text-align: left;
@@ -274,35 +276,41 @@
 }
 
 .chatMessagesBubble_inner {
-    display: block;
+    max-width: 250px;
+    padding: 10px 15px;
+    border-radius: 15px;
     position: relative;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border-radius: 0.375rem;
-    color: #ffffff;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+    display: inline-block;
+    text-align: left;
     word-break: break-all;
 }
 
+
 .chatMessagesBubble_Time {
-    display: flex;
-    float: right;
-    gap: 0.25rem;
-    align-items: center;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    opacity: 0.5;
+    display: block;
+  text-align: right;
+  font-size: 10px;
+  color: #d1d1d1;
+  margin-top: 5px;
 }
 
-.chatMessageInputDiv {
+.chatMessageInputform {
     position: sticky;
     bottom: 0;
+    background: #dbdbdbc0;
     padding-left: 1rem;
     padding-right: 1rem;
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
 }
+.chatMessageInputdiv {
+    display: flex;
+    align-items: center;
+    border-top: 1px;
+    gap: 8px;
+}
 
 .chatMessageInput {
     display: block;
@@ -312,16 +320,22 @@
     border-style: none;
     outline-style: none;
     width: 100%;
+    max-height: 11.76em;
+    min-height: 1.47em;
+    white-space: pre-wrap;
+    word-break: break-all;
     font-size: 0.875rem;
     line-height: 1.25rem;
 }
 
 .chatMessageInputSubmit {
-    display: flex;
+    /* display: flex;
     position: absolute;
     top: 0;
     bottom: 0;
-    align-items: center;
+    align-items: center; */
+    padding: 8px;
+    background: #12bbb5;
 }
 
 @media (min-width: 640px) {