@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/sender/Sender.scss

@@ -4,6 +4,10 @@
   background-color: var(--bg-color);
 }
 
+.chat-input-wrapper--inline-edit {
+  width: 100%;
+}
+
 .chat-input-container {
   position: relative;
   display: flex;
@@ -11,7 +15,7 @@
   background-color: var(--input-bg, #f9fafb);
   border: 1px solid var(--border-color);
   border-radius: 12px;
-  padding: 8px 12px;
+  padding: 12px;
   transition: all .2s;
 
   &:focus-within {
@@ -20,12 +24,8 @@
     box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
   }
 
-  textarea {
+  .chat-input-monaco {
     color: var(--text-color);
-    background: transparent;
-    &::placeholder {
-      color: var(--sub-text-color, #9ca3af);
-    }
   }
 
   .model-unavailable {
@@ -87,534 +87,8 @@
   }
 }
 
-.file-input-hidden {
-  display: none;
-}
-
-.pending-images {
-  display: flex;
-  gap: 8px;
-  padding: 6px 0;
-  flex-wrap: wrap;
-}
-
-.pending-image {
-  position: relative;
-  width: 56px;
-  height: 56px;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-}
-
-.pending-image-remove {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background-color: rgba(0, 0, 0, .55);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  .material-symbols-rounded {
-    font-size: 14px;
-    line-height: 1;
-  }
-}
-
-.chat-input-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-  padding-top: 4px;
-
-  .toolbar-left {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .session-info-toolbar {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-left: 6px;
-      padding-left: 10px;
-      border-left: 1px solid var(--border-color);
-      border-radius: 1px;
-      position: relative;
-      height: auto;
-      align-self: center;
-
-      .ant-cascader {
-        display: block;
-      }
-
-      .info-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-height: 28px;
-        font-size: 12px;
-        color: var(--sub-text-color, #9ca3af);
-        background: linear-gradient(
-          180deg,
-          var(--bg-color),
-          var(--tag-hover-bg, #f3f4f6)
-        );
-        border: 1px solid var(--border-color);
-        padding: 0 6px 0 8px;
-        border-radius: 10px;
-        white-space: nowrap;
-        max-width: 170px;
-        cursor: pointer;
-        transition: all .2s ease;
-
-        .info-item-leading {
-          width: 18px;
-          height: 18px;
-          border-radius: 6px;
-          background: rgba(99, 102, 241, .12);
-          color: var(--primary-color, #6366f1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-
-          .material-symbols-rounded {
-            font-size: 14px;
-          }
-        }
-
-        .material-symbols-rounded {
-          font-size: 18px;
-        }
-
-        .info-text {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-weight: 600;
-          color: var(--text-color);
-        }
-
-        .arrow-icon {
-          font-size: 18px;
-          color: var(--sub-text-color, #9ca3af);
-          background: var(--tag-hover-bg, #f3f4f6);
-          border-radius: 999px;
-          transition: transform .2s;
-        }
-
-        &:hover, &.active {
-          color: var(--primary-color, #6366f1);
-          border-color: rgba(99, 102, 241, .3);
-          box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
-          .arrow-icon {
-            color: var(--primary-color, #6366f1);
-          }
-        }
-
-        &.active .arrow-icon {
-          transform: rotate(180deg);
-        }
-      }
-
-      .asset-warning-item {
-        cursor: default;
-
-        .info-item-leading {
-          background: rgba(245, 158, 11, .14);
-          color: #d97706;
-        }
-
-        &:hover {
-          color: #b45309;
-          border-color: rgba(245, 158, 11, .28);
-
-          .info-text {
-            color: #92400e;
-          }
-        }
-      }
-    }
-  }
-
-  .toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .toolbar-btn {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    cursor: pointer;
-    color: var(--sub-text-color, #9ca3af);
-    transition: all .2s;
-
-    &:hover {
-      background-color: transparent;
-      color: #3b82f6;
-    }
-
-    .material-symbols-rounded {
-      font-size: 20px;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.model-switcher {
-      width: auto;
-      height: 28px;
-      padding: 0 8px;
-      gap: 4px;
-      background-color: var(--tag-hover-bg, #f3f4f6);
-      border: 1px solid var(--border-color);
-      color: var(--sub-text-color, #6b7280);
-
-      .model-name {
-        font-size: 12px;
-        font-weight: 500;
-      }
-
-      .arrow {
-        font-size: 14px;
-      }
-
-      &:hover {
-        border-color: #3b82f6;
-        background-color: var(--bg-color);
-        color: #3b82f6;
-      }
-    }
-  }
-}
-
-.asset-warning-tooltip {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 420px;
-
-  &__title {
-    font-weight: 600;
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    line-height: 1.4;
-
-    code {
-      font-size: 12px;
-      color: rgba(255, 255, 255, .9);
-    }
-  }
-
-  &__more {
-    opacity: .8;
-    font-size: 12px;
-  }
-}
-
-.sender-tools-cascader-popup {
-  .ant-cascader-menus {
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: 14px;
-    overflow: hidden;
-    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
-  }
-
-  .ant-cascader-menu {
-    min-width: 240px;
-    max-height: 320px;
-    padding: 8px;
-    background: var(--bg-color);
-    border-inline-end: 1px solid var(--border-color);
-  }
-
-  .ant-cascader-menu:first-child {
-    background: var(--sub-bg-color);
-  }
-
-  .ant-cascader-menu:last-child {
-    border-inline-end: none;
-  }
-
-  .ant-cascader-menu-item {
-    min-height: 40px;
-    padding: 8px 10px;
-    border-radius: 10px;
-    color: var(--text-color);
-    font-size: 13px;
-    transition: all .18s ease;
-  }
-
-  .ant-cascader-menu-item-content {
-    min-width: 0;
-  }
-
-  .ant-cascader-menu-item-expand-icon {
-    color: var(--sub-text-color);
-  }
-
-  .ant-cascader-menu-item:hover,
-  .ant-cascader-menu-item-active,
-  .ant-cascader-menu-item-expand {
-    background-color: var(--tag-hover-bg, #f3f4f6);
-  }
-
-  .sender-tool-group-option,
-  .sender-tool-option {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-    width: 100%;
-  }
-
-  .sender-tool-group-option__icon {
-    width: 20px;
-    height: 20px;
-    border-radius: 7px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(99, 102, 241, .12);
-    color: var(--primary-color, #6366f1);
-    font-size: 14px;
-    flex-shrink: 0;
-  }
-
-  .sender-tool-group-option__text {
-    flex: 1;
-    min-width: 0;
-    font-weight: 600;
-    color: var(--text-color);
-  }
-
-  .sender-tool-group-option__count {
-    flex-shrink: 0;
-    min-width: 22px;
-    padding: 1px 6px;
-    border-radius: 999px;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    color: var(--sub-text-color);
-    font-size: 11px;
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  .sender-tool-option__dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 999px;
-    background: var(--primary-color, #6366f1);
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
-    flex-shrink: 0;
-    margin-left: 2px;
-  }
-
-  .sender-tool-option__text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 12px;
-    font-family:
-      ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
-    letter-spacing: .01em;
-  }
-}
-
-.adapter-select,
-.model-select,
-.effort-select,
-.permission-mode-select {
-  .ant-select-selector {
-    height: 28px !important;
-    border-radius: 8px !important;
-    border: 1px solid var(--border-color) !important;
-    background-color: var(--tag-hover-bg, #f3f4f6) !important;
-    padding: 0 8px !important;
-    display: flex;
-    align-items: center;
-  }
-
-  .ant-select-selection-item,
-  .ant-select-selection-placeholder {
-    font-size: 12px;
-    color: var(--text-color);
-    line-height: 1;
-  }
-
-  &.ant-select-disabled .ant-select-selector {
-    background-color: var(--tag-bg, #f9fafb) !important;
-    color: var(--sub-text-color, #9ca3af);
-  }
-}
-
-.adapter-select {
-  min-width: 100px;
-
-  .ant-select-selector {
-    padding-right: 24px !important;
-  }
-
-  .ant-select-selection-wrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .ant-select-selection-item,
-  .ant-select-selection-placeholder {
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-  }
-}
-
-.model-select {
-  min-width: 160px;
-}
-
-.effort-select {
-  min-width: 72px;
-}
-
-.permission-mode-select {
-  min-width: 120px;
-}
-
-.effort-select-popup,
-.permission-mode-select-popup {
-  .ant-select-item-option-content {
-    font-size: 12px;
-  }
-}
-
-.adapter-select-popup {
-  .ant-select-item-option {
-    display: flex;
-    align-items: center;
-  }
-
-  .ant-select-item-option-content {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-height: 20px;
-    font-size: 12px;
-  }
-
-  .adapter-option {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: 100%;
-  }
-
-  .adapter-option__icon {
-    width: 14px;
-    height: 14px;
-    object-fit: contain;
-    flex-shrink: 0;
-  }
-
-  .adapter-option__text {
-    display: flex;
-    align-items: center;
-    min-height: 14px;
-    line-height: 1;
-  }
-}
-
-.adapter-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.adapter-option__icon {
-  width: 14px;
-  height: 14px;
-  display: block;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.adapter-option__text {
-  display: inline-block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-select-popup {
-  .ant-select-item-group {
-    padding: 8px 8px 4px;
-    color: var(--text-color);
-    font-weight: 600;
-    font-size: 12px;
-  }
-
-  .model-group-label {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .model-group-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--placeholder-color);
-  }
-
-  .model-group-desc {
-    font-size: 11px;
-    color: var(--placeholder-color);
-  }
-
-  .model-option {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .model-option-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text-color);
-  }
-
-  .model-option-desc {
-    font-size: 12px;
-    color: var(--sub-text-color, #9ca3af);
-  }
+.chat-input-container--inline-edit {
+  width: 100%;
 }
 
 html.dark {
@@ -623,74 +97,3 @@ html.dark {
     --input-focus-bg: #141414;
   }
 }
-
-.chat-input-textarea {
-  background: transparent !important;
-  padding: 4px 0 !important;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #111827;
-
-  &::placeholder {
-    color: #9ca3af;
-  }
-}
-
-.chat-send-btn {
-  width: 32px;
-  height: 32px;
-  margin-bottom: 1px;
-  border-radius: 8px;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all .2s;
-  color: #9ca3af;
-  flex-shrink: 0;
-
-  .material-symbols-rounded {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    font-size: 20px;
-  }
-
-  &:hover {
-    color: #3b82f6;
-  }
-
-  &.active {
-    color: #3b82f6;
-
-    &:hover {
-      color: #2563eb;
-    }
-  }
-
-  &.thinking {
-    color: #ef4444;
-
-    &:hover {
-      color: #dc2626;
-    }
-  }
-
-  &.disabled {
-    color: #9ca3af;
-    cursor: not-allowed;
-
-    &:hover {
-      color: #9ca3af;
-    }
-  }
-}
-
-.chat-input-hint {
-  margin-top: 4px;
-  text-align: center;
-  font-size: 12px;
-  color: #9ca3af;
-}