@pubuduth-aplicy/chat-ui 2.1.50 → 2.1.52

package/src/style/style.css

@@ -1,8 +1,9 @@
 .grid-container {
   display: grid;
   overflow: hidden;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
   border-radius: 0.5rem;
+  width: '100%';
   background-clip: padding-box;
   /* background-color: #9CA3AF; */
   --bg-opacity: 0;
@@ -10,14 +11,14 @@
 }
 
 .sidebarContainer {
-  grid-column: span 3;
-  overflow-y: auto;
+  /* grid-column: span 3; */
+  /* overflow-y: auto; */
   border: 1px solid #ddd;
   max-height: 100vh;
 }
 
 .messageContainer {
-  grid-column: span 4;
+  /* grid-column: span 4; */
   /* border: 1px solid; */
   max-height: 100vh;
   overflow-y: auto;
@@ -51,7 +52,7 @@
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  flex-basis: 0px;
+  /* flex-basis: 0px; */
   shrink: 1;
   gap: 1rem;
   justify-content: flex-start;
@@ -80,8 +81,8 @@ line-height: 1.5rem;
 font-weight: 400;
 border: 1px solid #ccc;
 width: 100%;              /* Ensure full width */
-min-width: 400px;         /* Set minimum horizontal length */
-max-width: 600px;         /* Optional: Set maximum width if needed */
+/* min-width: 400px;       */
+max-width: 600px;         
 }
 
 .chatSidebarInput:focus {
@@ -452,7 +453,7 @@ font-size: 12px;
 color: blue;
 }
 
-@media (min-width: 640px) {
+/* @media (min-width: 640px) {
   .grid-container {
       height: 450px;
   }
@@ -471,22 +472,22 @@ color: blue;
       padding-right: 1.5rem;
   }
 
-}
+} */
 
 @media (min-width: 768px) {
   .grid-container {
-      height: 550px;
+      /* height: 550px; */
       grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .sidebarContainer {
-      display: grid;
-      grid-column: span 3 / span 3;
+      /* display: grid; */
+      grid-column: span 4 ;
   }
 
   .messageContainer {
       display: grid;
-      grid-column: span 4 / span 4;
+      grid-column: span 5;
   }
 
   .chatMessageContainerInnerDiv_button {
@@ -819,3 +820,157 @@ background-color: #ccc;
     opacity: 1;
   }
 }
+
+
+/*          chat input medial          */
+
+
+
+.message-input-container {
+  width: 100%;
+  padding: 10px;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.attachments-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.file-preview {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f5f5;
+  border: 1px solid #eaeaea;
+}
+
+.file-preview-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-preview-image {
+  width: 100%;
+  height: 80px;
+  object-fit: cover;
+}
+
+.file-preview-video {
+  width: 100%;
+  height: 80px;
+  background: #000;
+}
+
+.file-preview-document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  padding: 10px;
+}
+
+.file-preview-document svg {
+  width: 40px;
+  height: 40px;
+  color: #555;
+}
+
+.file-info {
+  padding: 5px;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-size {
+  color: #777;
+}
+
+.remove-file {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.remove-file:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.upload-progress {
+  width: 100%;
+  height: 4px;
+  background: #eaeaea;
+  position: absolute;
+  bottom: 0;
+}
+
+.progress-bar {
+  height: 100%;
+  background: #4CAF50;
+  transition: width 0.3s;
+}
+
+.upload-error {
+  color: #f44336;
+  font-size: 12px;
+  padding: 5px;
+  text-align: center;
+}
+
+.attachment-options {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  padding: 8px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.attachment-options button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.attachment-options button:hover {
+  background: #f5f5f5;
+}

package/src/types/type.ts

@@ -69,4 +69,4 @@ export interface ConversationProps {
   lastIdx: boolean;
 }
 
-export type MessageStatus = 'sent' | 'delivered' | 'read';
+export type MessageStatus = 'sent' | 'delivered' | 'read' | 'sending' | 'failed';