flowcloudai-ui 0.1.1 → 0.1.3

package/dist/index.css

@@ -1,13 +1,14 @@
 /* src/components/Button/Button.css */
 .fc-btn {
   --btn-bg: transparent;
-  --btn-bg-hover: var(--fc-color-bg-secondary, #f3f4f6);
+  --btn-bg-hover: var(--fc-color-bg-secondary, #c3c4c6);
   --btn-bg-active: var(--fc-color-bg-tertiary, #e5e7eb);
   --btn-color: var(--fc-color-text, #111827);
   --btn-color-hover: var(--btn-color);
   --btn-color-active: var(--fc-color-text-secondary, #6b7280);
   --btn-border: transparent;
   --btn-border-hover: transparent;
+  --btn-radius: var(--fc-radius-md, 8px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17,7 +18,7 @@
   font-size: var(--fc-font-size-md, 16px);
   font-weight: var(--fc-font-weight-medium, 500);
   line-height: var(--fc-line-height-tight, 1.25);
-  border-radius: var(--fc-radius-md, 8px);
+  border-radius: var(--btn-radius);
   border: 1px solid var(--btn-border);
   cursor: pointer;
   text-decoration: none;
@@ -25,7 +26,7 @@
   user-select: none;
   background-color: var(--btn-bg);
   color: var(--btn-color);
-  transition: all 0.2s ease;
+  transition: all 0.1s ease;
 }
 .fc-btn:hover:not(:disabled):not(.is-disabled) {
   background-color: var(--btn-bg-hover);
@@ -150,27 +151,45 @@
 .fc-btn--xs {
   padding: var(--fc-space-xs, 4px) var(--fc-space-sm, 8px);
   font-size: var(--fc-font-size-xs, 12px);
-  border-radius: var(--fc-radius-sm, 4px);
+  --btn-radius: var(--fc-radius-sm, 4px);
 }
 .fc-btn--sm {
   padding: var(--fc-space-sm, 8px) var(--fc-space-md, 12px);
   font-size: var(--fc-font-size-sm, 14px);
-  border-radius: var(--fc-radius-sm, 4px);
+  --btn-radius: var(--fc-radius-sm, 4px);
 }
 .fc-btn--md {
   padding: var(--fc-space-md, 12px) var(--fc-space-lg, 16px);
   font-size: var(--fc-font-size-md, 16px);
-  border-radius: var(--fc-radius-md, 8px);
+  --btn-radius: var(--fc-radius-md, 8px);
 }
 .fc-btn--lg {
   padding: var(--fc-space-lg, 16px) var(--fc-space-xl, 20px);
   font-size: var(--fc-font-size-lg, 18px);
-  border-radius: var(--fc-radius-lg, 12px);
+  --btn-radius: var(--fc-radius-lg, 12px);
 }
 .fc-btn--xl {
   padding: var(--fc-space-xl, 20px) var(--fc-space-2xl, 24px);
   font-size: var(--fc-font-size-xl, 20px);
-  border-radius: var(--fc-radius-lg, 12px);
+  --btn-radius: var(--fc-radius-lg, 12px);
+}
+.fc-btn--radius-none {
+  --btn-radius: 0px;
+}
+.fc-btn--radius-sm {
+  --btn-radius: var(--fc-radius-sm, 4px);
+}
+.fc-btn--radius-md {
+  --btn-radius: var(--fc-radius-md, 8px);
+}
+.fc-btn--radius-lg {
+  --btn-radius: var(--fc-radius-lg, 12px);
+}
+.fc-btn--radius-xl {
+  --btn-radius: var(--fc-radius-xl, 16px);
+}
+.fc-btn--radius-full {
+  --btn-radius: var(--fc-radius-full, 9999px);
 }
 .fc-btn--square,
 .fc-btn--circle,
@@ -270,7 +289,7 @@
   width: var(--track-w);
   height: var(--track-h);
   background-color: var(--check-track-bg, var(--fc-color-bg-tertiary));
-  border-radius: var(--fc-radius-full);
+  border-radius: var(--check-radius, var(--fc-radius-full));
   transition: background-color var(--fc-transition);
 }
 .fc-check--checked .fc-check__track {
@@ -289,10 +308,28 @@
   align-items: center;
   justify-content: center;
   background-color: var(--check-thumb-bg, var(--fc-color-bg-elevated));
-  border-radius: var(--fc-radius-full);
+  border-radius: var(--check-radius, var(--fc-radius-full));
   box-shadow: var(--fc-shadow-sm);
   transition: transform var(--fc-transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+.fc-check--radius-none {
+  --check-radius: 2px;
+}
+.fc-check--radius-sm {
+  --check-radius: var(--fc-radius-sm, 4px);
+}
+.fc-check--radius-md {
+  --check-radius: var(--fc-radius-md, 8px);
+}
+.fc-check--radius-lg {
+  --check-radius: var(--fc-radius-lg, 12px);
+}
+.fc-check--radius-xl {
+  --check-radius: var(--fc-radius-xl, 16px);
+}
+.fc-check--radius-full {
+  --check-radius: var(--fc-radius-full, 9999px);
+}
 .fc-check--checked .fc-check__thumb {
   transform: translateX(calc(var(--track-w) - var(--track-h)));
 }
@@ -403,7 +440,8 @@
   -ms-overflow-style: none;
 }
 .fc-roll--thumb-hide::-webkit-scrollbar {
-  display: none;
+  width: 0;
+  height: 0;
 }
 .fc-roll--thumb-auto:hover {
   --roll-thumb: var(--roll-thumb-hover);
@@ -465,7 +503,12 @@
 .fc-sidebar__menu {
   flex: 1;
   overflow-y: auto;
+  min-height: 0;
+  padding: var(--fc-space-sm, 8px) 0;
+}
+.fc-sidebar__footer {
   padding: var(--fc-space-sm, 8px) 0;
+  border-top: 1px solid var(--fc-color-border);
 }
 .fc-sidebar__item {
   display: flex;
@@ -553,7 +596,7 @@
   flex: 1;
   background: var(--fc-color-bg);
   border: 1px solid var(--fc-color-border);
-  border-radius: var(--fc-radius-md);
+  border-radius: var(--input-radius, var(--fc-radius-md));
   transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
 }
 .fc-input__field {
@@ -691,13 +734,31 @@
   align-items: center;
 }
 .fc-input__addon--before {
-  border-radius: var(--fc-radius-md) 0 0 var(--fc-radius-md);
+  border-radius: var(--input-radius, var(--fc-radius-md)) 0 0 var(--input-radius, var(--fc-radius-md));
   border-right: none;
 }
 .fc-input__addon--after {
-  border-radius: 0 var(--fc-radius-md) var(--fc-radius-md) 0;
+  border-radius: 0 var(--input-radius, var(--fc-radius-md)) var(--input-radius, var(--fc-radius-md)) 0;
   border-left: none;
 }
+.fc-input--radius-none {
+  --input-radius: 0px;
+}
+.fc-input--radius-sm {
+  --input-radius: var(--fc-radius-sm, 4px);
+}
+.fc-input--radius-md {
+  --input-radius: var(--fc-radius-md, 8px);
+}
+.fc-input--radius-lg {
+  --input-radius: var(--fc-radius-lg, 12px);
+}
+.fc-input--radius-xl {
+  --input-radius: var(--fc-radius-xl, 16px);
+}
+.fc-input--radius-full {
+  --input-radius: var(--fc-radius-full, 9999px);
+}
 .fc-input--addon-before .fc-input__wrapper {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -890,7 +951,7 @@
   padding: var(--fc-space-md) var(--fc-space-lg);
   background: var(--select-trigger-bg);
   border: 1px solid var(--select-trigger-border);
-  border-radius: var(--fc-radius-md);
+  border-radius: var(--select-radius, var(--fc-radius-md));
   cursor: pointer;
   transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
 }
@@ -924,11 +985,29 @@
   margin-top: var(--fc-space-xs);
   background: var(--fc-color-bg-elevated);
   border: 1px solid var(--fc-color-border);
-  border-radius: var(--fc-radius-md);
+  border-radius: var(--select-radius, var(--fc-radius-md));
   box-shadow: var(--fc-shadow-lg);
   z-index: var(--fc-z-dropdown);
   overflow: hidden;
 }
+.fc-select--radius-none {
+  --select-radius: 0px;
+}
+.fc-select--radius-sm {
+  --select-radius: var(--fc-radius-sm, 4px);
+}
+.fc-select--radius-md {
+  --select-radius: var(--fc-radius-md, 8px);
+}
+.fc-select--radius-lg {
+  --select-radius: var(--fc-radius-lg, 12px);
+}
+.fc-select--radius-xl {
+  --select-radius: var(--fc-radius-xl, 16px);
+}
+.fc-select--radius-full {
+  --select-radius: var(--fc-radius-full, 9999px);
+}
 .fc-select__search {
   padding: var(--fc-space-sm);
   border-bottom: 1px solid var(--fc-color-border-light);
@@ -1285,208 +1364,31 @@
 
 /* src/components/Avatar/Avatar.css */
 .ui-avatar {
-  --avatar-bg: var(--fc-color-primary, #6366f1);
-  --avatar-color: var(--fc-color-text-on-primary, #ffffff);
-  --avatar-empty-bg: var(--fc-color-bg-secondary, #f3f4f6);
-  --avatar-empty-color: var(--fc-color-text-tertiary, #9ca3af);
-  --avatar-border: var(--fc-color-bg, #ffffff);
-  --avatar-shadow: var(--fc-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-  --avatar-hover-filter: brightness(0.95);
-  --avatar-active-filter: brightness(0.9);
-  --avatar-focus-ring: 0 0 0 2px var(--fc-color-bg, #fff), 0 0 0 4px var(--fc-color-primary, #6366f1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background-color: var(--avatar-bg);
-  color: var(--avatar-color);
-  font-weight: 600;
-  line-height: 1;
-  user-select: none;
+  background-color: #e5e7eb;
+  color: #6b7280;
   overflow: hidden;
-  position: relative;
-  transition:
-    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .ui-avatar-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ui-avatar-text,
 .ui-avatar-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  text-transform: uppercase;
-}
-.ui-avatar-placeholder svg {
-  color: var(--avatar-empty-color);
-}
-.ui-avatar-xs,
-.ui-avatar-sm,
-.ui-avatar-md,
-.ui-avatar-lg,
-.ui-avatar-xl {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  font-size: var(--avatar-font-size);
-}
-.ui-avatar-xs {
-  --avatar-size: 20px;
-  --avatar-font-size: 10px;
-}
-.ui-avatar-sm {
-  --avatar-size: 28px;
-  --avatar-font-size: 12px;
-}
-.ui-avatar-md {
-  --avatar-size: 40px;
-  --avatar-font-size: 16px;
-}
-.ui-avatar-lg {
-  --avatar-size: 56px;
-  --avatar-font-size: 20px;
-}
-.ui-avatar-xl {
-  --avatar-size: 72px;
-  --avatar-font-size: 28px;
 }
 .ui-avatar-circle {
   border-radius: 50%;
 }
 .ui-avatar-square {
-  border-radius: var(--fc-radius-md, 8px);
-}
-.ui-avatar-square.ui-avatar-xs {
-  border-radius: var(--fc-radius-sm, 4px);
-}
-.ui-avatar-square.ui-avatar-sm,
-.ui-avatar-square.ui-avatar-md {
-  border-radius: var(--fc-radius-md, 6px);
-}
-.ui-avatar-square.ui-avatar-lg,
-.ui-avatar-square.ui-avatar-xl {
-  border-radius: var(--fc-radius-lg, 10px);
-}
-.ui-avatar-bordered {
-  border: 2px solid var(--avatar-border);
-  box-shadow: var(--avatar-shadow);
-}
-.ui-avatar-clickable {
-  cursor: pointer;
-}
-.ui-avatar-clickable:hover:not(:disabled),
-.ui-avatar-clickable:active:not(:disabled) {
-  filter: var(--avatar-hover-filter);
-}
-.ui-avatar-clickable:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: var(--fc-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-}
-.ui-avatar-clickable:active:not(:disabled) {
-  transform: scale(0.95);
-  filter: var(--avatar-active-filter);
-}
-.ui-avatar-clickable:focus-visible {
-  outline: none;
-  box-shadow: var(--avatar-focus-ring);
-}
-.ui-avatar-empty {
-  background-color: var(--avatar-empty-bg);
-  color: var(--avatar-empty-color);
-}
-.ui-avatar-loading {
-  overflow: hidden;
-}
-.ui-avatar-loading::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background:
-    linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.3),
-      transparent);
-  animation: avatar-shimmer 1.5s ease-in-out infinite;
-  will-change: transform;
-}
-@keyframes avatar-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-.ui-avatar--primary,
-.ui-avatar--success,
-.ui-avatar--warning,
-.ui-avatar--danger {
-  --avatar-color: var(--fc-color-text-on-primary, #ffffff);
-}
-.ui-avatar--primary {
-  --avatar-bg: var(--fc-color-primary);
-}
-.ui-avatar--secondary {
-  --avatar-bg: var(--fc-color-bg-secondary);
-  --avatar-color: var(--fc-color-text-secondary);
-}
-.ui-avatar--success {
-  --avatar-bg: var(--fc-color-success);
-}
-.ui-avatar--warning {
-  --avatar-bg: var(--fc-color-warning);
-}
-.ui-avatar--danger {
-  --avatar-bg: var(--fc-color-danger);
-}
-@media (prefers-reduced-motion: reduce) {
-  .ui-avatar {
-    transition: none;
-  }
-  .ui-avatar-loading::after {
-    animation: none;
-    opacity: 0.5;
-  }
-  .ui-avatar-clickable:hover:not(:disabled) {
-    transform: none;
-  }
-  .ui-avatar-clickable:active:not(:disabled) {
-    transform: none;
-  }
-}
-@media (prefers-contrast: more) {
-  .ui-avatar-bordered {
-    border-width: 3px;
-  }
-  .ui-avatar-empty {
-    outline: 1px solid currentColor;
-  }
-  .ui-avatar-clickable:focus-visible {
-    outline: 2px solid currentColor;
-  }
-}
-@media (prefers-contrast: less) {
-  .ui-avatar-bordered {
-    border-color: color-mix(in srgb, var(--avatar-border), transparent 30%);
-  }
-}
-.avatar-group .ui-avatar {
-  transition: none;
-}
-@media (hover: hover) {
-  .ui-avatar-clickable:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
+  border-radius: 8px;
 }
 
 /* src/components/ListGroup/ListGroup.css */
@@ -1986,15 +1888,31 @@
   --tab-bar-radius-tl: var(--fc-radius-full, 9999px);
   --tab-bar-radius-tr: var(--fc-radius-full, 9999px);
 }
+.fc-tab-bar__nav-outer {
+  display: flex;
+  align-items: stretch;
+}
+.fc-tab-bar__nav-outer--scroll {
+  overflow: hidden;
+}
 .fc-tab-bar__nav {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  z-index: 0;
+}
+.fc-tab-bar__nav--scroll {
+  overflow: hidden;
   flex-shrink: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
 }
 .fc-tab-bar__nav-wrap {
   display: flex;
   gap: 0;
   align-items: stretch;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .fc-tab-bar__tab {
   position: relative;
@@ -2012,6 +1930,9 @@
   user-select: none;
   border-radius: var(--tab-item-radius-tl) var(--tab-item-radius-tr) var(--tab-item-radius-br) var(--tab-item-radius-bl);
 }
+.fc-tab-bar__nav--scroll .fc-tab-bar__tab {
+  justify-content: space-between;
+}
 .fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging) {
   color: var(--tab-hover-color);
   background-color: var(--tab-hover-bg);
@@ -2038,7 +1959,7 @@
 .fc-tab-bar--floating {
   border-bottom: none;
 }
-.fc-tab-bar--floating .fc-tab-bar__nav {
+.fc-tab-bar--floating .fc-tab-bar__nav-outer {
   padding: var(--fc-space-xs, 6px) var(--fc-space-sm, 8px);
 }
 .fc-tab-bar--floating .fc-tab-bar__nav-wrap {
@@ -2096,11 +2017,39 @@
   --tab-item-radius-br: var(--fc-radius-full, 9999px);
   --tab-item-radius-bl: var(--fc-radius-full, 9999px);
 }
-.fc-tab-bar__tab--draggable {
-  cursor: grab;
+.fc-tab-bar__tab,
+.fc-tab-bar__tab-close,
+.fc-tab-bar__add-btn {
+  -webkit-app-region: no-drag;
 }
-.fc-tab-bar__tab--draggable:active {
-  cursor: grabbing;
+.fc-tab-bar--shrink .fc-tab-bar__tab {
+  overflow: hidden;
+  min-width: 0;
+}
+.fc-tab-bar--shrink .fc-tab-bar__tab[data-compact=true] {
+  padding-left: var(--fc-space-xs, 6px);
+  padding-right: var(--fc-space-xs, 6px);
+}
+.fc-tab-bar--shrink .fc-tab-bar__tab-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 20px),
+      transparent 100%);
+  mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 20px),
+      transparent 100%);
+}
+.fc-tab-bar__tab--draggable {
+  cursor: default;
 }
 .fc-tab-bar__tab--dragging {
   opacity: 0.4;
@@ -2116,6 +2065,7 @@
   color: var(--fc-color-text-tertiary);
   border-radius: var(--fc-radius-sm, 4px);
   transition: all var(--fc-transition, 150ms ease);
+  flex-shrink: 0;
 }
 .fc-tab-bar__tab-close:hover {
   color: var(--fc-color-text);
@@ -2129,6 +2079,7 @@
   margin: 0 var(--fc-space-sm, 8px);
   font-size: 20px;
   font-weight: bold;
+  user-select: none;
   color: var(--fc-color-text-secondary);
   cursor: pointer;
   transition: all var(--fc-transition, 150ms ease);
@@ -2283,6 +2234,24 @@
   fill: currentColor;
   stroke: currentColor;
 }
+.fc-md-wrap ::selection {
+  background-color: rgba(55, 138, 221, 0.25) !important;
+  color: inherit !important;
+}
+.fc-md-split-btn {
+  border-radius: var(--fc-radius-md, 8px) !important;
+}
+.fc-md-split-btn--active {
+  background: var(--fc-color-primary-bg, rgba(99,102,241,0.15)) !important;
+  color: var(--fc-color-primary, #6366f1) !important;
+}
+.fc-md-split-btn--active:hover {
+  background: var(--fc-color-primary-bg, rgba(99,102,241,0.22)) !important;
+}
+.fc-md-split-icon {
+  font-size: 15px;
+  line-height: 1;
+}
 .fc-md-ai-btn {
   font-size: 11px;
   font-weight: 600;
@@ -2409,196 +2378,149 @@
 }
 
 /* src/components/SmartMessage/SmartMessage.css */
-.smart-message {
+.fc-smart-message {
   display: flex;
-  margin-bottom: 16px;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
   animation: fadeIn 0.3s ease;
 }
-.smart-message-user {
-  justify-content: flex-end;
-}
-.smart-message-user .message-header {
-  justify-content: flex-end;
+.fc-smart-message--user {
+  flex-direction: row-reverse;
+  align-self: flex-end;
 }
-.smart-message-user .smart-message-content {
-  background:
-    linear-gradient(
-      135deg,
-      #667eea 0%,
-      #764ba2 100%);
-  color: #ffffff;
-  border-bottom-right-radius: 4px;
+.fc-smart-message--assistant {
+  flex-direction: row;
+  align-self: flex-start;
 }
-.smart-message-assistant {
-  justify-content: flex-start;
+.fc-smart-message--system {
+  align-self: center;
+  justify-content: center;
+  max-width: 90%;
+  margin: 0 auto;
 }
-.smart-message-assistant .smart-message-content {
-  background: var(--fc-color-bg-tertiary, #f0f0f0);
-  color: var(--fc-color-text, #333);
-  border-bottom-left-radius: 4px;
+.fc-smart-message--tool {
+  align-self: flex-start;
+  max-width: 90%;
 }
-.smart-message-content {
-  max-width: 70%;
-  padding: 10px 14px;
-  border-radius: 12px;
+.fc-smart-message-content-wrapper {
   position: relative;
-  transition: transform 0.2s ease;
+  background: var(--fc-color-bg-secondary, #f0f0f0);
+  border-radius: 12px;
+  padding: 8px 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  width: auto;
+  max-width: 100%;
+  word-wrap: break-word;
 }
-.smart-message-content:hover {
-  transform: translateX(2px);
+.fc-smart-message--user .fc-smart-message-content-wrapper {
+  background: var(--fc-color-primary, #667eea);
+  color: white;
 }
-.message-header {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 6px;
-  font-size: 12px;
-}
-.message-sender {
-  font-weight: 600;
-  font-size: 13px;
+.fc-smart-message--assistant .fc-smart-message-content-wrapper {
+  background: var(--fc-color-bg-secondary, #f0f0f0);
+  color: var(--fc-color-text, #333);
 }
-.message-time {
-  color: var(--fc-color-text-secondary, #999);
-  font-size: 11px;
+.fc-smart-message--system .fc-smart-message-content-wrapper {
+  background: var(--fc-color-bg-tertiary, #f0f0f0);
+  color: var(--fc-color-text-tertiary, #999);
+  text-align: center;
+  font-size: 12px;
+  border-radius: 16px;
+  padding: 6px 16px;
+  display: inline-block;
+  width: auto;
 }
-.message-text {
-  line-height: 1.5;
-  font-size: 14px;
-  word-break: break-word;
-  padding-right: 60px;
+.fc-smart-message--tool .fc-smart-message-content-wrapper {
+  background: var(--fc-color-bg-tertiary, #e8e8e8);
+  color: var(--fc-color-text-secondary, #666);
+  font-family: monospace;
+  font-size: 12px;
 }
-.copy-btn {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  display: inline-flex;
+.fc-smart-message-tool-info {
+  display: flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
-  border: none;
-  border-radius: 6px;
+  margin-bottom: 8px;
   font-size: 12px;
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.05);
-  backdrop-filter: blur(4px);
-  opacity: 0;
-  transition: all 0.2s ease;
-}
-.smart-message-content:hover .copy-btn {
-  opacity: 0.7;
-}
-.smart-message-user .copy-btn {
-  color: rgba(255, 255, 255, 0.9);
-  background: rgba(255, 255, 255, 0.15);
-}
-.smart-message-assistant .copy-btn {
   color: var(--fc-color-text-secondary, #666);
+  border-bottom: 1px solid var(--fc-color-border, #ddd);
+  padding-bottom: 4px;
 }
-.copy-btn:hover {
-  opacity: 1 !important;
-  transform: translateY(-2px);
-  background: rgba(102, 126, 234, 0.2);
-}
-.copy-btn.copied {
-  opacity: 1 !important;
-  background: #52c41a !important;
-  color: #ffffff !important;
+.fc-smart-message-tool-icon {
+  font-size: 12px;
 }
-.message-status {
-  font-size: 11px;
-  margin-left: 8px;
-  display: inline-block;
+.fc-smart-message-tool-name {
+  font-family: monospace;
+  font-weight: 500;
 }
-.message-status.sending {
-  color: #faad14;
+.fc-smart-message-content {
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
 }
-.message-status.error {
-  color: #f5222d;
+.fc-smart-message-text {
+  line-height: 1.5;
 }
-.smart-message-system {
-  justify-content: center;
+.fc-smart-message-system-text {
+  font-style: italic;
+  opacity: 0.7;
 }
-.system-message-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 6px 12px;
+.fc-smart-message-tool-result {
   background: rgba(0, 0, 0, 0.05);
-  border-radius: 20px;
-  color: #999;
+  padding: 8px;
+  border-radius: 6px;
   font-size: 12px;
+  font-family: monospace;
+  overflow-x: auto;
+  margin: 0;
 }
-.system-message-icon {
+.fc-smart-message-footer {
   display: flex;
   align-items: center;
-  color: #999;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 10px;
+  opacity: 0.7;
 }
-.system-message-text {
-  line-height: 1.4;
+.fc-smart-message-time {
+  font-size: 10px;
 }
-.system-message-time {
+.fc-smart-message-status {
   font-size: 10px;
-  color: #bbb;
 }
-.smart-message-tool {
-  justify-content: center;
+.fc-smart-message-status.sending {
+  animation: pulse 1s infinite;
 }
-.tool-message-wrapper {
-  max-width: 80%;
-  background: #f5f5f5;
-  border-left: 3px solid #667eea;
-  border-radius: 8px;
-  overflow: hidden;
-  font-size: 13px;
+.fc-smart-message-status.error {
+  color: #f5222d;
 }
-.tool-message-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: #e8e8e8;
-  border-bottom: 1px solid #ddd;
+.fc-smart-message-status.sent {
+  color: #52c41a;
 }
-.tool-message-icon {
+.fc-smart-message-copy-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  color: var(--fc-color-text-secondary, #666);
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
-  color: #667eea;
-}
-.tool-message-name {
-  font-weight: 600;
-  font-size: 12px;
-  color: #333;
-}
-.tool-message-content {
-  padding: 12px;
-}
-.tool-message-params,
-.tool-message-result {
-  margin-bottom: 8px;
+  justify-content: center;
+  opacity: 0;
 }
-.tool-message-params strong,
-.tool-message-result strong {
-  display: block;
-  font-size: 11px;
-  color: #666;
-  margin-bottom: 4px;
+.fc-smart-message:hover .fc-smart-message-copy-btn {
+  opacity: 0.6;
 }
-.tool-message-params pre,
-.tool-message-result pre {
-  margin: 0;
-  padding: 8px;
-  background: #fff;
-  border-radius: 4px;
-  font-size: 12px;
-  overflow-x: auto;
-  font-family: "Courier New", monospace;
+.fc-smart-message-copy-btn:hover {
+  opacity: 1 !important;
+  background: rgba(0, 0, 0, 0.05);
+  transform: scale(1.05);
 }
-.tool-message-time {
-  padding: 4px 12px 8px;
-  font-size: 10px;
-  color: #999;
-  text-align: right;
+.fc-smart-message-copy-btn:active {
+  transform: scale(0.95);
 }
 @keyframes fadeIn {
   from {
@@ -2610,15 +2532,30 @@
     transform: translateY(0);
   }
 }
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
 @media (max-width: 768px) {
-  .smart-message-content {
-    max-width: 85%;
+  .fc-smart-message {
+    max-width: 100%;
+  }
+  .fc-smart-message--system {
+    max-width: 95%;
   }
-  .tool-message-wrapper {
-    max-width: 90%;
+  .fc-smart-message-content-wrapper {
+    padding: 6px 10px;
+    max-width: 100%;
   }
-  .message-text {
-    padding-right: 50px;
+  .fc-smart-message--system .fc-smart-message-content-wrapper {
+    padding: 4px 12px;
+  }
+  .fc-smart-message-copy-btn {
+    padding: 2px;
   }
 }
 
@@ -2874,7 +2811,11 @@
   gap: 8px;
   padding: 12px 16px;
   margin-bottom: 16px;
-  background: var(--chat-primary-gradient);
+  background:
+    linear-gradient(
+      135deg,
+      #667eea 0%,
+      #764ba2 100%);
   border: none;
   border-radius: 12px;
   font-size: 14px;
@@ -2965,52 +2906,6 @@
   color: #f5222d;
   transform: scale(1.1);
 }
-.delete-confirm {
-  display: flex;
-  gap: 8px;
-  animation: fadeIn 0.2s ease;
-}
-.confirm-delete,
-.cancel-delete {
-  padding: 4px;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.confirm-delete {
-  background:
-    linear-gradient(
-      135deg,
-      #52c41a 0%,
-      #73d13d 100%);
-}
-.confirm-delete:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.4);
-}
-.cancel-delete {
-  background:
-    linear-gradient(
-      135deg,
-      #f5222d 0%,
-      #ff4d4f 100%);
-}
-.cancel-delete:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(245, 34, 45, 0.4);
-}
-.confirm-delete svg,
-.cancel-delete svg {
-  stroke: white;
-  width: 14px;
-  height: 14px;
-}
 .empty-history {
   text-align: center;
   padding: 40px 20px;
@@ -3025,6 +2920,55 @@
   display: inline-flex;
   background: transparent;
 }
+.message-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.message-wrapper--user {
+  align-self: flex-end;
+}
+.message-wrapper--assistant {
+  align-self: flex-start;
+}
+.message-copy-wrapper {
+  display: flex;
+  margin-top: 4px;
+}
+.message-copy-wrapper--assistant {
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+.message-copy-wrapper--user {
+  justify-content: flex-start;
+  padding-left: 8px;
+}
+.message-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--fc-color-text-secondary, #666);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.message-copy-btn svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.message-copy-btn:hover {
+  background: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+  color: var(--fc-color-text, #333);
+}
+.message-copy-btn:active {
+  transform: translateY(0);
+}
 @media (max-width: 768px) {
   .chat-header {
     padding: 12px 16px;
@@ -3047,6 +2991,13 @@
     width: 16px;
     height: 16px;
   }
+  .message-copy-btn {
+    padding: 4px;
+  }
+  .message-copy-btn svg {
+    width: 12px;
+    height: 12px;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   * {
@@ -3054,6 +3005,16 @@
     transition: none !important;
   }
 }
+.system-message-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.tool-message-container {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+}
 
 /* src/style/index.css */
 :root {
@@ -3067,15 +3028,15 @@
   --fc-blue-700: #0C447C;
   --fc-blue-800: #072D54;
   --fc-blue-900: #031A33;
-  --fc-gray-50: #FAFAF9;
-  --fc-gray-100: #F1EFE8;
-  --fc-gray-150: #E0DDD4;
-  --fc-gray-200: #D3D1C7;
-  --fc-gray-400: #B5B2A6;
-  --fc-gray-600: #5F5E5A;
+  --fc-gray-50: #FAFAFA;
+  --fc-gray-100: #F5F5F5;
+  --fc-gray-150: #E0E0E0;
+  --fc-gray-200: #D0D0D0;
+  --fc-gray-400: #B3B3B3;
+  --fc-gray-600: #5F5F5F;
   --fc-gray-700: #3D3D3A;
-  --fc-gray-800: #2C2C2A;
-  --fc-gray-900: #1A1A19;
+  --fc-gray-800: #2C2C2C;
+  --fc-gray-900: #1A1A1A;
   --fc-red-50: #FDEDED;
   --fc-red-100: #FAD0D0;
   --fc-red-500: #E24B4A;
@@ -3105,8 +3066,8 @@
   --fc-color-primary-active: var(--fc-blue-700);
   --fc-color-primary-subtle: var(--fc-blue-50);
   --fc-color-bg: #FFFFFF;
-  --fc-color-bg-secondary: var(--fc-gray-50);
-  --fc-color-bg-tertiary: var(--fc-gray-100);
+  --fc-color-bg-secondary: var(--fc-gray-100);
+  --fc-color-bg-tertiary: var(--fc-gray-200);
   --fc-color-bg-elevated: #FFFFFF;
   --fc-color-bg-overlay: rgba(0, 0, 0, 0.4);
   --fc-color-text: var(--fc-gray-900);
@@ -3246,7 +3207,7 @@ body {
   --fc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
 }
 body {
-  font-family: var(--fc-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-family: var(--fc-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif), serif;
   background-color: var(--fc-color-bg, #FFFFFF);
   color: var(--fc-color-text, #1A1A19);
   margin: 0;
@@ -3288,78 +3249,12 @@ body {
 }
 ::selection {
   background-color: var(--fc-color-primary-subtle, #EBF4FD);
-  color: var(--fc-color-primary, #378ADD);
 }
 [data-theme=dark] ::selection {
   background-color: rgba(55, 138, 221, 0.3);
-  color: var(--fc-color-primary, #5DA4E8);
 }
 :focus-visible {
   outline: 2px solid var(--fc-color-border-focus, #378ADD);
   outline-offset: 2px;
   border-radius: var(--fc-radius-sm, 4px);
 }
-.theme-light {
-  --fc-color-bg: #FFFFFF !important;
-  --fc-color-bg-secondary: var(--fc-gray-50) !important;
-  --fc-color-bg-tertiary: var(--fc-gray-100) !important;
-  --fc-color-text: var(--fc-gray-900) !important;
-  --fc-color-text-secondary: var(--fc-gray-600) !important;
-  --fc-color-border: var(--fc-gray-200) !important;
-  --fc-color-border-light: var(--fc-gray-150) !important;
-}
-.theme-dark {
-  --fc-color-primary: var(--fc-blue-300) !important;
-  --fc-color-primary-hover: var(--fc-blue-200) !important;
-  --fc-color-primary-active: var(--fc-blue-100) !important;
-  --fc-color-primary-subtle: rgba(55, 138, 221, 0.12) !important;
-  --fc-color-bg: #0F0F0F !important;
-  --fc-color-bg-secondary: #1A1A1A !important;
-  --fc-color-bg-tertiary: #222222 !important;
-  --fc-color-bg-elevated: #282828 !important;
-  --fc-color-bg-overlay: rgba(0, 0, 0, 0.6) !important;
-  --fc-color-text: #E8E8E6 !important;
-  --fc-color-text-secondary: #9C9A92 !important;
-  --fc-color-text-tertiary: #636158 !important;
-  --fc-color-text-disabled: #4A4845 !important;
-  --fc-color-text-on-primary: #FFFFFF !important;
-  --fc-color-border: #333330 !important;
-  --fc-color-border-light: #2A2A28 !important;
-  --fc-color-border-hover: #555550 !important;
-  --fc-color-border-focus: var(--fc-blue-400) !important;
-  --fc-color-danger: #F06060 !important;
-  --fc-color-danger-hover: #F58080 !important;
-  --fc-color-danger-bg: rgba(226, 75, 74, 0.12) !important;
-  --fc-color-danger-border: rgba(226, 75, 74, 0.25) !important;
-  --fc-color-success: #7EBB38 !important;
-  --fc-color-success-hover: #9FD058 !important;
-  --fc-color-success-bg: rgba(99, 153, 34, 0.12) !important;
-  --fc-color-success-border: rgba(99, 153, 34, 0.25) !important;
-  --fc-color-warning: #F0A030 !important;
-  --fc-color-warning-hover: #F5BC60 !important;
-  --fc-color-warning-bg: rgba(214, 128, 0, 0.12) !important;
-  --fc-color-warning-border: rgba(214, 128, 0, 0.25) !important;
-  --fc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
-  --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
-  --fc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
-  --fc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4) !important;
-}
-.theme-dark .fc-list-group {
-  background-color: var(--fc-color-bg, #0F0F0F) !important;
-}
-.theme-dark .fc-list-group-item {
-  background-color: var(--fc-color-bg, #0F0F0F) !important;
-  color: var(--fc-color-text, #E8E8E6) !important;
-  border-bottom-color: var(--fc-color-border-light, #2A2A28) !important;
-}
-.theme-dark .fc-list-group--bordered {
-  border-color: var(--fc-color-border, #333330) !important;
-}
-.theme-dark .fc-list-group-item:hover:not(.fc-list-group-item--disabled) {
-  background-color: var(--fc-color-bg-secondary, #1A1A1A) !important;
-}
-.theme-dark .fc-list-group-item--active {
-  background-color: var(--fc-color-primary-subtle, rgba(55, 138, 221, 0.12)) !important;
-  color: var(--fc-color-primary, #5DA4E8) !important;
-  border-left-color: var(--fc-color-primary, #5DA4E8) !important;
-}