@chainai/react 1.0.0

package/styles/widget.css

@@ -0,0 +1,531 @@
+/**
+ * Chain AI Widget Styles
+ *
+ * CSS Variables for theming:
+ * --chain-ai-primary: Primary brand color
+ * --chain-ai-primary-text: Text on primary color
+ * --chain-ai-bg: Background color
+ * --chain-ai-text: Main text color
+ * --chain-ai-border: Border color
+ * --chain-ai-user-bg: User message background
+ * --chain-ai-user-text: User message text
+ * --chain-ai-assistant-bg: Assistant message background
+ * --chain-ai-assistant-text: Assistant message text
+ * --chain-ai-font: Font family
+ *
+ * CSS Variables for dimensions:
+ * --chain-ai-fab-size: FAB button size (default: 56px)
+ * --chain-ai-fab-radius: FAB border radius (default: 50%)
+ * --chain-ai-window-width: Chat window width (default: 380px)
+ * --chain-ai-window-height: Chat window height (default: 520px)
+ * --chain-ai-window-radius: Chat window border radius (default: 16px)
+ * --chain-ai-avatar-gradient: Avatar gradient background
+ */
+
+/* Reset and base */
+.chain-ai-widget,
+.chain-ai-widget * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.chain-ai-widget {
+  position: fixed;
+  font-family: var(--chain-ai-font, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Floating Action Button */
+.chain-ai-widget-fab {
+  width: var(--chain-ai-fab-size, 56px);
+  height: var(--chain-ai-fab-size, 56px);
+  border-radius: var(--chain-ai-fab-radius, 50%);
+  border: none;
+  background: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary-text, #ffffff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.chain-ai-widget-fab:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.chain-ai-widget-fab:active {
+  transform: scale(0.95);
+}
+
+.chain-ai-widget-fab-open {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  color: var(--chain-ai-text, #1f2937);
+}
+
+/* Chat Window */
+.chain-ai-widget-window {
+  position: absolute;
+  bottom: calc(var(--chain-ai-fab-size, 56px) + 14px);
+  right: 0;
+  width: var(--chain-ai-window-width, 380px);
+  max-width: calc(100vw - 40px);
+  height: var(--chain-ai-window-height, 520px);
+  max-height: calc(100vh - 100px);
+  background: var(--chain-ai-bg, #ffffff);
+  border-radius: var(--chain-ai-window-radius, 16px);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: chain-ai-slide-up 0.2s ease;
+}
+
+@keyframes chain-ai-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Header */
+.chain-ai-widget-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: var(--chain-ai-bg, #ffffff);
+  border-bottom: 1px solid var(--chain-ai-border, #e5e7eb);
+}
+
+.chain-ai-widget-header-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chain-ai-widget-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--chain-ai-primary, #3b82f6), #8b5cf6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+}
+
+.chain-ai-widget-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--chain-ai-text, #1f2937);
+}
+
+.chain-ai-widget-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--chain-ai-text, #6b7280);
+  transition: background 0.15s;
+}
+
+.chain-ai-widget-close:hover {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+}
+
+/* Messages Area */
+.chain-ai-widget-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  scroll-behavior: smooth;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar-thumb {
+  background: var(--chain-ai-border, #e5e7eb);
+  border-radius: 3px;
+}
+
+/* Welcome Screen */
+.chain-ai-widget-welcome {
+  text-align: center;
+  padding: 32px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.chain-ai-widget-welcome .chain-ai-widget-avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.chain-ai-widget-welcome h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--chain-ai-text, #1f2937);
+  margin: 0;
+}
+
+.chain-ai-widget-welcome p {
+  color: #6b7280;
+  font-size: 14px;
+  max-width: 280px;
+  margin: 0;
+}
+
+/* Message Bubbles */
+.chain-ai-widget-message {
+  display: flex;
+  gap: 8px;
+  max-width: 90%;
+}
+
+.chain-ai-widget-message-user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chain-ai-widget-message-assistant {
+  align-self: flex-start;
+}
+
+.chain-ai-widget-message-assistant .chain-ai-widget-avatar {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+
+.chain-ai-widget-message-bubble {
+  flex: 1;
+}
+
+.chain-ai-widget-message-bubble .chain-ai-message {
+  max-width: 100%;
+  border-radius: 16px;
+  padding: 10px 14px;
+}
+
+.chain-ai-widget-message-user .chain-ai-message {
+  background: var(--chain-ai-user-bg, #3b82f6);
+  color: var(--chain-ai-user-text, #ffffff);
+  border-bottom-right-radius: 4px;
+}
+
+.chain-ai-widget-message-assistant .chain-ai-message {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  color: var(--chain-ai-assistant-text, #1f2937);
+  border-bottom-left-radius: 4px;
+}
+
+.chain-ai-widget-message-bubble .chain-ai-message-timestamp {
+  display: none;
+}
+
+/* Typing Indicator */
+.chain-ai-widget-typing {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+}
+
+.chain-ai-widget-typing span {
+  width: 8px;
+  height: 8px;
+  background: #9ca3af;
+  border-radius: 50%;
+  animation: chain-ai-bounce 1.4s infinite ease-in-out both;
+}
+
+.chain-ai-widget-typing span:nth-child(1) { animation-delay: -0.32s; }
+.chain-ai-widget-typing span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes chain-ai-bounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Input Area */
+.chain-ai-widget-input-area {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--chain-ai-bg, #ffffff);
+  border-top: 1px solid var(--chain-ai-border, #e5e7eb);
+}
+
+.chain-ai-widget-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 24px;
+  font-size: 14px;
+  background: var(--chain-ai-bg, #ffffff);
+  color: var(--chain-ai-text, #1f2937);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.chain-ai-widget-input:focus {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.chain-ai-widget-input::placeholder {
+  color: #9ca3af;
+}
+
+.chain-ai-widget-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chain-ai-widget-send {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary-text, #ffffff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.chain-ai-widget-send:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.chain-ai-widget-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Action Prompt */
+.chain-ai-action-prompt {
+  background: var(--chain-ai-bg, #ffffff);
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 8px;
+}
+
+.chain-ai-action-prompt-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.chain-ai-action-prompt-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(59, 130, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-action-prompt-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.chain-ai-action-prompt-action {
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: var(--chain-ai-primary, #3b82f6);
+}
+
+.chain-ai-action-prompt-label {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.chain-ai-action-prompt-message {
+  font-size: 14px;
+  color: var(--chain-ai-text, #1f2937);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.chain-ai-action-prompt-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chain-ai-action-prompt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chain-ai-action-prompt-field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.chain-ai-action-prompt-quick-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.chain-ai-action-prompt-quick-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 16px;
+  background: transparent;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.chain-ai-action-prompt-quick-btn:hover {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary, #3b82f6);
+}
+
+.chain-ai-action-prompt-input {
+  padding: 10px 12px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 14px;
+  background: var(--chain-ai-bg, #ffffff);
+  color: var(--chain-ai-text, #1f2937);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.chain-ai-action-prompt-input:focus {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.chain-ai-action-prompt-input::placeholder {
+  color: #9ca3af;
+}
+
+.chain-ai-action-prompt-submit {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-top: 4px;
+}
+
+.chain-ai-action-prompt-submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.chain-ai-action-prompt-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Dark mode support via data attribute or class */
+.chain-ai-widget[data-theme="dark"],
+.chain-ai-widget.dark {
+  --chain-ai-bg: #1f2937;
+  --chain-ai-text: #f9fafb;
+  --chain-ai-border: #374151;
+  --chain-ai-assistant-bg: #374151;
+  --chain-ai-assistant-text: #f9fafb;
+}
+
+/* Mobile responsive */
+@media (max-width: 480px) {
+  .chain-ai-widget-window {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 100px);
+    bottom: calc(var(--chain-ai-fab-size, 56px) + 14px);
+    right: -10px;
+    border-radius: var(--chain-ai-window-radius, 12px);
+  }
+}
+
+/* Logo in header */
+.chain-ai-widget-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-widget-logo img {
+  max-height: 28px;
+  width: auto;
+}
+
+/* Powered by badge */
+.chain-ai-widget-powered-by {
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 11px;
+  color: #9ca3af;
+  border-top: 1px solid var(--chain-ai-border, #e5e7eb);
+  background: var(--chain-ai-bg, #ffffff);
+}
+
+.chain-ai-widget-powered-by a {
+  color: var(--chain-ai-primary, #3b82f6);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.chain-ai-widget-powered-by a:hover {
+  text-decoration: underline;
+}
+
+/* Custom header support */
+.chain-ai-widget-header-custom {
+  padding: 12px 16px;
+}
+
+/* Custom welcome support */
+.chain-ai-widget-welcome-custom {
+  padding: 16px;
+}