@pubuduth-aplicy/chat-ui 2.1.52 → 2.1.53

package/package.json

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

package/src/style/style.css

@@ -50,8 +50,8 @@
   display: flex;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  width: 100%;
   padding-left: 1rem;
-  padding-right: 1rem;
   /* flex-basis: 0px; */
   shrink: 1;
   gap: 1rem;
@@ -453,6 +453,10 @@ font-size: 12px;
 color: blue;
 }
 
+.text-sm{
+font-size: .875rem;
+}
+
 /* @media (min-width: 640px) {
   .grid-container {
       height: 450px;
@@ -476,7 +480,7 @@ color: blue;
 
 @media (min-width: 768px) {
   .grid-container {
-      /* height: 550px; */
+      height: 550px; 
       grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
@@ -744,8 +748,9 @@ align-items: center;
 gap: 12px;
 padding: 12px;
 border-radius: 8px;
+border-bottom: .5px solid lightgray;
 background-color: white;
-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
 cursor: pointer;
 transition: background-color 0.3s ease-in-out;
 }
@@ -842,7 +847,7 @@ background-color: #ccc;
   margin-bottom: 10px;
 }
 
-.file-preview {
+/*.file-preview {
   position: relative;
   width: 120px;
   height: 120px;
@@ -850,8 +855,67 @@ background-color: #ccc;
   overflow: hidden;
   background: #f5f5f5;
   border: 1px solid #eaeaea;
+}*/
+
+.file-preview {
+  position: relative;
+  width: 246px;
+  height: 140px; /* Increased height to accommodate filename */
+  border-radius: 12px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f9f9f9, #e9ecef);
+  border: 1px solid #dcdcdc;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.file-preview:hover {
+  transform: scale(1.03);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
+}
+
+.file-preview img,
+.file-preview video,
+.file-preview .file-icon {
+  width: 100%;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+.file-preview-document span,
+.file-name {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  line-height: 1.2;
+  text-align: center;
+  padding: 0 4px;
 }
 
+/* Filename text styling */
+.file-preview .filename {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
 .file-preview-content {
   width: 100%;
   height: 100%;
@@ -894,11 +958,11 @@ background-color: #ccc;
   white-space: nowrap;
 }
 
-.file-name {
+/*.file-name {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}*/
 
 .file-size {
   color: #777;
@@ -974,3 +1038,198 @@ background-color: #ccc;
 .attachment-options button:hover {
   background: #f5f5f5;
 }
+
+
+.media-grid {
+  display: grid;
+  gap: 0.5rem;
+  /* margin-top: 0.5rem; */
+}
+
+.media-item {
+  background: #f3f4f6;
+  border-radius: 0.375rem; /* reduced from 0.75rem */
+  padding: 0.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  width: 246px;
+}
+
+.media-content{
+  width: 100%;
+  object-fit: cover;
+}
+
+.media-preview {
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: 0.375rem; /* reduced from 0.5rem */
+  object-fit: cover;
+}
+
+.download-button {
+  font-size: 0.75rem;
+  color: #3b82f6;
+  margin-top: 0.25rem;
+  text-decoration: underline;
+}
+
+.file-link {
+  font-weight: bold;
+  color: #1f2937;
+  margin-top: 0.25rem;
+}
+
+.chat-bubble {
+  background-color: #e5e7eb;
+  /* padding: 0.5rem 0.75rem; */
+  border-radius: 0.375rem;
+  margin-top: 0.5rem;
+  max-width: 100%;
+  word-break: break-word;
+}
+
+.download-btn {
+  font-size: 0.75rem;
+  color: #3b82f6;
+  margin-top: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.download-btn:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.document-preview {
+  position: relative;
+  width: 246px;
+  height: 60px; /* Increased height to accommodate filename */
+  border-radius: 12px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f9f9f9, #e9ecef);
+  border: 1px solid #dcdcdc;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  /* justify-content: space-between; */
+  cursor: pointer;
+  padding: 8px;
+}
+
+
+/* Spinner loader */
+.loader {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #3b82f6;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+/* Add these styles to your CSS file */
+.download-progress-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.download-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  background: #2196f3;
+  z-index: 1;
+}
+
+.cancel-download {
+  position: relative;
+  z-index: 2;
+  color: white;
+  font-size: 12px;
+}
+
+/* Existing styles for your chat component */
+.media-item {
+  position: relative;
+}
+
+.download-btn {
+  /* position: absolute; */
+  bottom: 8px;
+  right: 8px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.download-btn:hover {
+  background: rgba(255, 255, 255, 1);
+}
+
+
+
+/* Blurred background preview */
+.media-preview-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+
+/* Circular progress container (updated to be on top of blurred background) */
+.circular-progress-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Error message (on top of blurred background) */
+.upload-error {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #f44336;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Rest of the CSS remains the same as previous implementation */