@vibe-forge/client 0.9.0 → 0.10.1

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

@@ -4,138 +4,8 @@
   background-color: var(--bg-color);
 }
 
-.chat-input-wrapper--permission {
-  .interaction-panel {
-    max-height: none;
-    overflow-y: visible;
-    margin-bottom: 0;
-  }
-}
-
-.interaction-panel {
-  display: flex;
-  flex-direction: column;
-  max-height: 260px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-  gap: 10px;
-  padding: 10px;
-  border: 1px solid rgba(217, 119, 6, .18);
-  border-radius: 12px;
-  background:
-    linear-gradient(180deg, rgba(255, 251, 235, .9), rgba(255, 255, 255, .96));
-
-  &__badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    align-self: flex-start;
-    padding: 4px 10px;
-    border-radius: 999px;
-    background: rgba(245, 158, 11, .12);
-    color: #b45309;
-    font-size: 12px;
-    font-weight: 600;
-
-    .material-symbols-rounded {
-      font-size: 14px;
-    }
-  }
-
-  &__context {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, .72);
-    border: 1px solid rgba(217, 119, 6, .12);
-  }
-
-  &__meta {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 8px;
-  }
-
-  &__meta-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    code {
-      width: fit-content;
-      max-width: 100%;
-      padding: 2px 8px;
-      border-radius: 999px;
-      background: rgba(15, 23, 42, .06);
-      color: var(--text-color);
-      font-size: 12px;
-      overflow-wrap: anywhere;
-    }
-  }
-
-  &__meta-label,
-  &__section-title {
-    color: var(--sub-text-color, #6b7280);
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  &__chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  &__chip {
-    padding: 3px 8px;
-    border-radius: 999px;
-    background: rgba(191, 219, 254, .45);
-    color: #1d4ed8;
-    font-size: 12px;
-  }
-
-  &__reasons {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__reason {
-    color: var(--text-color);
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  &__option.ant-btn {
-    height: auto;
-    text-align: left;
-    display: block;
-    padding: 8px 12px;
-  }
-
-  &__option-label {
-    font-weight: 500;
-  }
-
-  &__option-description {
-    margin-top: 4px;
-    color: var(--placeholder-color, #9ca3af);
-    font-size: 12px;
-  }
-}
-
-.interaction-question {
-  font-weight: 700;
-  color: var(--text-color);
-  line-height: 1.5;
+.chat-input-wrapper--inline-edit {
+  width: 100%;
 }
 
 .chat-input-container {
@@ -145,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 {
@@ -154,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 {
@@ -221,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 {
@@ -757,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;
-}