acecoderz-chat-ui 1.0.0

package/styles/chat.css

@@ -0,0 +1,508 @@
+/* Chat UI Styles with CSS Variables for Theming */
+
+.chat-container {
+  /* Colors */
+  --chat-primary-color: #3b82f6;
+  --chat-secondary-color: #64748b;
+  --chat-background-color: #ffffff;
+  --chat-text-color: #1e293b;
+  --chat-user-message-color: #3b82f6;
+  --chat-assistant-message-color: #f1f5f9;
+  --chat-input-background-color: #f8fafc;
+  --chat-input-text-color: #1e293b;
+  --chat-error-background-color: #fee2e2;
+  --chat-error-text-color: #dc2626;
+  --chat-border-color: color-mix(in srgb, var(--chat-secondary-color) 20%, transparent);
+  
+  /* Typography */
+  --chat-font-family: system-ui, -apple-system, sans-serif;
+  --chat-font-size: 1rem;
+  --chat-font-weight: 400;
+  --chat-line-height: 1.5;
+  
+  /* Spacing */
+  --chat-padding: 1rem;
+  --chat-message-gap: 1rem;
+  --chat-input-padding: 1rem;
+  --chat-message-padding: 0.75rem 1rem;
+  
+  /* Borders & Radius */
+  --chat-border-radius: 0.5rem;
+  --chat-message-border-radius: var(--chat-border-radius);
+  --chat-input-border-radius: var(--chat-border-radius);
+  --chat-border-width: 1px;
+  
+  /* Shadows */
+  --chat-box-shadow: none;
+  --chat-message-box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--chat-secondary-color) 10%, transparent);
+  --chat-input-box-shadow: none;
+  
+  /* Sizing */
+  --chat-max-height: 600px;
+  --chat-max-width: 100%;
+  --chat-message-max-width: 70%;
+  --chat-avatar-size: 32px;
+  
+  /* Transitions & Animations */
+  --chat-transition-duration: 0.2s;
+  --chat-animation-duration: 0.3s;
+  
+  /* Scrollbar */
+  --chat-scrollbar-width: 8px;
+  --chat-scrollbar-color: color-mix(in srgb, var(--chat-secondary-color) 40%, transparent);
+  --chat-scrollbar-track-color: color-mix(in srgb, var(--chat-secondary-color) 10%, transparent);
+
+  font-family: var(--chat-font-family);
+  font-size: var(--chat-font-size);
+  font-weight: var(--chat-font-weight);
+  line-height: var(--chat-line-height);
+  background-color: var(--chat-background-color);
+  color: var(--chat-text-color);
+  border-radius: var(--chat-border-radius);
+  border: var(--chat-border-width) solid var(--chat-border-color);
+  box-shadow: var(--chat-box-shadow);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: var(--chat-max-height);
+  max-width: var(--chat-max-width);
+  overflow: hidden;
+}
+
+.chat-messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--chat-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--chat-message-gap);
+  scroll-behavior: smooth;
+  transition: all var(--chat-transition-duration);
+}
+
+.chat-messages-container::-webkit-scrollbar {
+  width: var(--chat-scrollbar-width);
+}
+
+.chat-messages-container::-webkit-scrollbar-track {
+  background: var(--chat-scrollbar-track-color);
+  border-radius: 4px;
+}
+
+.chat-messages-container::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar-color);
+  border-radius: 4px;
+}
+
+.chat-messages-container::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--chat-scrollbar-color) 120%, black);
+}
+
+.chat-empty-state {
+  text-align: center;
+  color: var(--chat-secondary-color);
+  padding: calc(var(--chat-padding) * 2);
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.chat-message {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  animation: fadeIn var(--chat-animation-duration) ease-in;
+  transition: all var(--chat-transition-duration);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Allow custom animations */
+.chat-message[data-custom-animation] {
+  animation: none;
+}
+
+.chat-message-user {
+  flex-direction: row-reverse;
+}
+
+.chat-message-content {
+  max-width: var(--chat-message-max-width);
+  padding: var(--chat-message-padding);
+  border-radius: var(--chat-message-border-radius);
+  word-wrap: break-word;
+  box-shadow: var(--chat-message-box-shadow);
+  transition: all var(--chat-transition-duration);
+}
+
+.chat-message-content-user {
+  background-color: var(--chat-user-message-color);
+  color: #ffffff;
+}
+
+.chat-message-content-assistant {
+  background-color: var(--chat-assistant-message-color);
+  color: var(--chat-text-color);
+}
+
+.chat-message-system {
+  justify-content: center;
+}
+
+.chat-message-content-system {
+  background-color: color-mix(in srgb, var(--chat-secondary-color) 10%, transparent);
+  color: var(--chat-secondary-color);
+  font-style: italic;
+  text-align: center;
+}
+
+.chat-message-text {
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.chat-message-timestamp {
+  font-size: 0.75rem;
+  color: var(--chat-secondary-color);
+  margin-top: 0.25rem;
+  opacity: 0.7;
+}
+
+.chat-message-content-user .chat-message-timestamp {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.chat-avatar {
+  width: var(--chat-avatar-size);
+  height: var(--chat-avatar-size);
+  min-width: var(--chat-avatar-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--chat-secondary-color);
+  color: #ffffff;
+  font-weight: 600;
+  font-size: calc(var(--chat-font-size) * 0.875);
+  flex-shrink: 0;
+  transition: all var(--chat-transition-duration);
+}
+
+.chat-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.chat-error {
+  padding: var(--chat-message-padding);
+  background-color: var(--chat-error-background-color);
+  color: var(--chat-error-text-color);
+  border-radius: var(--chat-border-radius);
+  margin: 0 var(--chat-padding);
+  font-size: calc(var(--chat-font-size) * 0.875);
+  border: var(--chat-border-width) solid color-mix(in srgb, var(--chat-error-text-color) 30%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.chat-error-message {
+  flex: 1;
+}
+
+.chat-retry-button {
+  padding: 0.375rem 0.75rem;
+  background-color: var(--chat-error-text-color);
+  color: #ffffff;
+  border: none;
+  border-radius: calc(var(--chat-border-radius) * 0.75);
+  cursor: pointer;
+  font-size: calc(var(--chat-font-size) * 0.875);
+  font-weight: 500;
+  transition: opacity var(--chat-transition-duration);
+  align-self: flex-start;
+}
+
+.chat-retry-button:hover {
+  opacity: 0.9;
+}
+
+.chat-actions {
+  padding: 0.5rem var(--chat-padding);
+  border-top: var(--chat-border-width) solid var(--chat-border-color);
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--chat-input-background-color);
+}
+
+.chat-clear-button {
+  padding: 0.375rem 0.75rem;
+  background-color: transparent;
+  color: var(--chat-secondary-color);
+  border: var(--chat-border-width) solid var(--chat-border-color);
+  border-radius: calc(var(--chat-border-radius) * 0.75);
+  cursor: pointer;
+  font-size: calc(var(--chat-font-size) * 0.875);
+  font-weight: 500;
+  transition: all var(--chat-transition-duration);
+}
+
+.chat-clear-button:hover {
+  background-color: var(--chat-border-color);
+  color: var(--chat-text-color);
+}
+
+.chat-message-loading {
+  opacity: 0.7;
+}
+
+.chat-message-loading .chat-message-text {
+  position: relative;
+}
+
+.chat-message-loading .chat-message-text::after {
+  content: '...';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% {
+    content: '.';
+  }
+  40% {
+    content: '..';
+  }
+  60%, 100% {
+    content: '...';
+  }
+}
+
+.chat-input-container {
+  padding: var(--chat-input-padding);
+  border-top: var(--chat-border-width) solid var(--chat-border-color);
+  background-color: var(--chat-input-background-color);
+  transition: all var(--chat-transition-duration);
+}
+
+.chat-input-form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.chat-input {
+  flex: 1;
+  padding: var(--chat-message-padding);
+  border-radius: var(--chat-input-border-radius);
+  border: var(--chat-border-width) solid color-mix(in srgb, var(--chat-secondary-color) 30%, transparent);
+  background-color: var(--chat-background-color);
+  color: var(--chat-input-text-color);
+  font-size: var(--chat-font-size);
+  font-family: var(--chat-font-family);
+  font-weight: var(--chat-font-weight);
+  line-height: var(--chat-line-height);
+  outline: none;
+  box-shadow: var(--chat-input-box-shadow);
+  transition: border-color var(--chat-transition-duration), box-shadow var(--chat-transition-duration);
+}
+
+.chat-input:focus {
+  border-color: var(--chat-primary-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-primary-color) 20%, transparent);
+}
+
+.chat-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chat-send-button {
+  padding: 0.625rem 1.25rem;
+  border-radius: var(--chat-input-border-radius);
+  background-color: var(--chat-primary-color);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  font-size: var(--chat-font-size);
+  font-family: var(--chat-font-family);
+  font-weight: 500;
+  transition: background-color var(--chat-transition-duration), transform calc(var(--chat-transition-duration) * 0.5);
+  white-space: nowrap;
+  min-height: 2.5rem;
+}
+
+.chat-send-button:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--chat-primary-color) 90%, black);
+  transform: translateY(-1px);
+}
+
+.chat-send-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.chat-send-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .chat-message-content {
+    max-width: 85%;
+  }
+  
+  .chat-input-form {
+    flex-direction: column;
+  }
+  
+  .chat-send-button {
+    width: 100%;
+  }
+}
+
+/* Markdown styles */
+.chat-markdown {
+  line-height: 1.6;
+}
+
+.chat-markdown p {
+  margin: 0.5em 0;
+}
+
+.chat-markdown p:first-child {
+  margin-top: 0;
+}
+
+.chat-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.chat-markdown h1,
+.chat-markdown h2,
+.chat-markdown h3,
+.chat-markdown h4,
+.chat-markdown h5,
+.chat-markdown h6 {
+  margin: 0.75em 0 0.5em 0;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.chat-markdown h1:first-child,
+.chat-markdown h2:first-child,
+.chat-markdown h3:first-child,
+.chat-markdown h4:first-child,
+.chat-markdown h5:first-child,
+.chat-markdown h6:first-child {
+  margin-top: 0;
+}
+
+.chat-markdown h1 {
+  font-size: 1.5em;
+}
+
+.chat-markdown h2 {
+  font-size: 1.3em;
+}
+
+.chat-markdown h3 {
+  font-size: 1.1em;
+}
+
+.chat-markdown ul,
+.chat-markdown ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.chat-markdown li {
+  margin: 0.25em 0;
+}
+
+.chat-markdown code {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+  padding: 0.125em 0.375em;
+  border-radius: 0.25em;
+  font-size: 0.9em;
+  font-family: 'Courier New', monospace;
+}
+
+.chat-markdown pre {
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  padding: 0.75em;
+  border-radius: 0.5em;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.chat-markdown pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.chat-markdown blockquote {
+  border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
+  padding-left: 1em;
+  margin: 0.75em 0;
+  font-style: italic;
+  color: color-mix(in srgb, currentColor 80%, transparent);
+}
+
+.chat-markdown a {
+  color: var(--chat-primary-color, #007bff);
+  text-decoration: underline;
+}
+
+.chat-markdown a:hover {
+  text-decoration: none;
+}
+
+.chat-markdown strong {
+  font-weight: 600;
+}
+
+.chat-markdown em {
+  font-style: italic;
+}
+
+.chat-markdown hr {
+  border: none;
+  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  margin: 1em 0;
+}
+
+.chat-markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+}
+
+.chat-markdown th,
+.chat-markdown td {
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  padding: 0.5em;
+  text-align: left;
+}
+
+.chat-markdown th {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+  font-weight: 600;
+}
+
+/* Allow complete CSS override via data attributes */
+.chat-container[data-chat-ui] {
+  /* Users can override everything via CSS specificity */
+  /* This selector allows for custom styling via data attributes */
+}
+