@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/components/messages/index.less

@@ -1,25 +1,32 @@
+@import url(../index.less);
+
 .ai-chat-messages {
   font-size: 12px;
-  overflow: auto;
+  overflow: hidden auto;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  scroll-snap-type: y proximity;
 
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 0;
-    background-color: transparent
+  > .chat-bubble-container:nth-last-child(2) {
+    display: table;
   }
 
-  &::-webkit-scrollbar-track {
-    background-color: transparent
-  }
+  .scroll-bar();
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #c5c5c5;
-    border-radius: 6px
-  }
+  // &::-webkit-scrollbar {
+  //   width: 6px;
+  //   height: 0;
+  //   background-color: transparent
+  // }
+
+  // &::-webkit-scrollbar-track {
+  //   background-color: transparent
+  // }
+
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: #c5c5c5;
+  //   border-radius: 6px
+  // }
 
   &:has(.ai-chat-messages-skeleton) {
     padding: 16px
@@ -46,13 +53,18 @@
     width: 100%
   }
 
+  .chat-bubble-container {
+    width: 100%;
+  }
+
   .chat-bubble {
     display: flex;
     flex-direction: column;
     color: #333;
-    border-radius: 8px;
+    border-radius: 6px;
     border: 1px solid transparent;
-    padding: 16px 16px 0;
+    // padding: 16px 16px 0;
+    padding: 8px 13px 0;
 
     &:has(.has-popover),
     &:hover {
@@ -62,25 +74,53 @@
     }
 
     .chat-message-container:has(.user-message) {
-      padding: 8px 12px
+      padding: 8px 13px
     }
 
-    .user-message img {
-      display: inline-block;
-      flex-shrink: 0;
-      width: auto;
-      height: 60px;
-      margin: 0;
-      object-fit: cover;
+    // .user-message img {
+    //   display: inline-block;
+    //   flex-shrink: 0;
+    //   width: auto;
+    //   height: 60px;
+    //   margin: 0;
+    //   object-fit: cover;
 
-      +& {
-        margin-left: 8px
-      }
+    //   +& {
+    //     margin-left: 8px
+    //   }
+    // }
+
+    // .user-message p:has(img) {
+    //   display: flex;
+    //   align-items: center
+    // }
+  }
+
+  .chat-bubble-action {
+    display: flex;
+    flex-direction: column;
+    color: #AAA;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    padding: 0 13px;
+
+    svg {
+      width: 14px;
+      height: 14px;
     }
 
-    .user-message p:has(img) {
-      display: flex;
-      align-items: center
+    .chat-bubble-action-chat {
+      cursor: pointer;
+      width: 14px;
+      height: 14px;
+
+      &.focus {
+        color: var(--mybricks-color-primary, #FA6400);
+      }
+
+      &:hover {
+        color: var(--mybricks-color-primary, #FA6400);
+      }
     }
   }
 
@@ -99,7 +139,8 @@
       width: 20px;
       height: 20px;
       box-sizing: content-box;
-      border: 2px solid #ffffff;
+      // border: 2px solid #ffffff;
+      border: 2px solid transparent;
 
       .copilot-avatar {
         .user-avatar();
@@ -127,7 +168,7 @@
     user-select: text;
     width: 100%;
     font-size: 12px;
-    border-radius: 12px;
+    border-radius: 6px;
     padding: 0;
 
     +& {
@@ -189,7 +230,7 @@
         align-items: center;
         padding: 4px 8px;
         border: 1px solid #eeeeee;
-        border-radius: 4px;
+        border-radius: 6px;
         color: #666;
         background-color: #f3f3f3;
 
@@ -206,7 +247,7 @@
           margin-right: 8px;
           font-size: 12px;
           background: #666;
-          border-radius: 2px
+          border-radius: 6px
         }
 
         &.shortcuts-theme-blue {
@@ -242,7 +283,7 @@
 
         &.shortcuts-theme-gray {
           border-color: transparent;
-          transition: .3s;
+          // transition: .3s;
 
           &:hover {
             background-color: #f7f7f7
@@ -257,14 +298,42 @@
     max-width: calc(100% - 16px);
     align-self: flex-end;
     align-items: end;
-    background: #ecf4ff;
-    border-radius: 4px;
+    // background: #ecf4ff;
+    background: #fff;
+    border-radius: 6px;
     padding: 8px;
     border-color: transparent;
 
     .chat-bubble-option-container {
       justify-content: end
     }
+
+    .mentions-container {
+      display: inline-flex;
+    }
+
+    span {
+      font-size: 12px;
+      line-height: 20px;
+      white-space: pre-wrap;
+    }
+
+    &:has(.mentions-container) {
+      span {
+        margin-left: 4px;
+      }
+    }
+
+    .attachments-list {
+      padding-top: 8px;
+      justify-content: flex-end;
+    }
+  }
+
+  .mention {
+    > :first-child {
+      margin-right: 4px;
+    }
   }
 
   .ai-message {
@@ -342,7 +411,7 @@
     max-width: 100%;
     height: auto;
     margin: 10px 0;
-    border-radius: 4px;
+    border-radius: 6px;
     display: block
   }
 
@@ -363,7 +432,7 @@
     color: #666;
     background-color: #f3f3f3;
     border: 1px dashed #ccc;
-    border-radius: 4px;
+    border-radius: 6px;
     padding: 8px 12px;
     display: inline-block;
     margin: 10px 0
@@ -389,7 +458,7 @@
     overflow-x: auto;
     display: block;
     font-size: 12px;
-    border-radius: 4px;
+    border-radius: 6px;
     background-color: #fff;
     border: 1px solid #eaeaea
   }
@@ -439,7 +508,7 @@
   }
 
   table tr {
-    transition: background-color .2s ease
+    // transition: background-color .2s ease
   }
 
   table tr:hover {
@@ -513,7 +582,7 @@
   code {
     font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
     background-color: #1b1f230d;
-    border-radius: 3px;
+    border-radius: 6px;
     font-size: 85%;
     padding: .2em .4em;
     text-wrap: auto;
@@ -521,7 +590,7 @@
 
   pre {
     margin: 0;
-    overflow: auto;
+    overflow: hidden auto;
     white-space: pre-wrap;
     word-break: break-word;
 
@@ -541,266 +610,404 @@
     margin: 16px 0
   }
 
-  .ai-chat-request-resource {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #0366d6;
-    background-color: #e3f2fd85;
-    border-radius: 4px;
-    padding: 4px 8px;
-    font-size: 12px
+  .indent-2 {
+    margin-left: 1rem
   }
 
-  .ai-chat-request-resource-message {
-    display: flex;
-    align-items: center;
-    gap: 4px
+  .indent-4 {
+    margin-left: 2rem
   }
 
-  .ai-chat-request-resource-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    cursor: pointer
+  .indent-6 {
+    margin-left: 3rem
   }
 
-  .ai-chat-request-resource-icon-success {
-    font-size: 12px;
-    color: #05aa2d
+  .indent-8 {
+    margin-left: 4rem
   }
 
-  .ai-chat-request-resource-icon-failed {
-    font-size: 12px;
-    color: #d54941
+  li {
+    margin-bottom: .25rem
   }
 
-  .ai-chat-error-code-block {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #d54941;
-    background-color: #fff0ed;
-    border-radius: 4px;
-    border: 1px solid #ffd8d2;
-    padding: 8px
+  strong {
+    font-weight: 700
   }
 
-  .ai-chat-error-code-block-retry {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    width: 70px;
-    min-width: 62px;
-    color: #d54941;
-    background: #fff;
-    cursor: pointer;
-    font-size: 12px;
-    padding: 0 8px;
-    border: 1px solid #ffd8d2;
-    border-radius: 4px;
+  em {
+    font-style: italic
+  }
 
-    span {
-      white-space: nowrap
-    }
+  code {
+    background-color: #0000000d;
+    border-radius: 6px;
+    padding: .2em .4em;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    font-size: 85%;
+    text-wrap: auto;
   }
 
-  .ai-chat-error-code-block-retry:hover {
-    border-radius: 4px
+  .loading-shimmer {
+    -webkit-text-fill-color: transparent;
+    animation-delay: .5s;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-name: loading-shimmer;
+    background: #adadad linear-gradient(to right, #adadad 0, #1a1a1abf 40%, #1a1a1abf 60%, #adadad 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-repeat: no-repeat;
+    background-size: 50% 200%;
+    display: inline-block
   }
 
-  .ai-chat-error-code-block-message {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font-size: 12px;
+
+}
+
+.ai-chat-request-resource {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0366d6;
+  background-color: #e3f2fd85;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 12px
+}
+
+.ai-chat-request-resource-message {
+  display: flex;
+  align-items: center;
+  gap: 4px
+}
+
+.ai-chat-request-resource-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer
+}
+
+.ai-chat-request-resource-icon-success {
+  font-size: 12px;
+  color: #05aa2d
+}
+
+.ai-chat-request-resource-icon-failed {
+  font-size: 12px;
+  color: #d54941
+}
+
+.ai-chat-error-code-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #d54941;
+  background-color: #fff0ed;
+  border-radius: 6px;
+  border: 1px solid #ffd8d2;
+  // padding: 8px;
+  padding: 4px 8px;
+  gap: 8px;
+}
+
+.ai-chat-error-code-block-retry {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  // width: 70px;
+  // min-width: 62px;
+  min-width: fit-content;
+  color: #d54941;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0 8px;
+  border: 1px solid #ffd8d2;
+  border-radius: 6px;
+
+  span {
+    white-space: nowrap
+  }
+}
+
+.ai-chat-error-code-block-retry:hover {
+  border-radius: 6px
+}
+
+.ai-chat-error-code-block-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 12px;
+  overflow: hidden;
+
+  span {
+    // line-height: 1.25;
+    text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
+  }
+}
 
-    span {
-      line-height: 1.25;
-      text-overflow: ellipsis;
-      overflow: hidden
-    }
+.ai-chat-collapsible-code-block {
+  cursor: pointer;
+  background-color: #f3f3f3;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  padding: 6px;
+  // transition: all .4s cubic-bezier(.25, .8, .25, 1);
+  will-change: padding, height, transform;
+  transform-origin: top;
+
+  &:has(.collapsed) {
+    padding: 4px 8px;
+    transform: translateY(-1px)
   }
 
-  .ai-chat-collapsible-code-block {
-    background-color: #f3f3f3;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    padding: 6px;
-    transition: all .4s cubic-bezier(.25, .8, .25, 1);
-    will-change: padding, height, transform;
-    transform-origin: top;
+  .code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+    border-radius: 6px;
+    min-height: 22px;
+    padding-bottom: 8px;
+    box-sizing: content-box;
+    // transition: padding .4s cubic-bezier(.25, .8, .25, 1);
 
     &:has(.collapsed) {
-      padding: 4px 8px;
-      transform: translateY(-1px)
+      padding-bottom: 0
     }
 
-    .code-header {
+    .code-title {
+      margin: 0;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      user-select: none;
-      border-radius: 4px;
-      min-height: 22px;
-      padding-bottom: 8px;
-      box-sizing: content-box;
-      transition: padding .4s cubic-bezier(.25, .8, .25, 1);
+      gap: 8px;
+      color: currentColor;
+      font-weight: 400
+    }
+
+    .code-title-status {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
 
-      &:has(.collapsed) {
-        padding-bottom: 0
+      svg {
+        width: 10px;
+        height: 10px;
       }
 
-      .code-title {
-        margin: 0;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: currentColor;
-        font-weight: 400
+      &.pending {
+        transform: translate(-2px);
       }
 
-      .code-title-status {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+      &.success {
+        color: #05aa2d;
 
         svg {
-          width: 10px;
-          height: 10px;
-        }
-
-        &.pending {
-          transform: translate(-2px);
+          width: 14px;
+          height: 14px;
         }
+      }
 
-        &.success {
-          color: #05aa2d;
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
+      &.error {
+        color: #d54941;
 
-        &.error {
-          color: #d54941;
+        svg {
+          transform: translate(-2px, 0px);
         }
+      }
 
-        &.aborted {
-          color: #faad14;
-        }
+      &.aborted {
+        color: #faad14;
       }
+    }
 
-      .code-toggle-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-        border: none;
-        color: #666;
-        background-color: transparent;
-        border-radius: 4px;
-        transition: transform .4s cubic-bezier(.25, .8, .25, 1), color .2s ease;
+    .code-toggle-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      border: none;
+      color: #666;
+      background-color: transparent;
+      border-radius: 6px;
+      // transition: transform .4s cubic-bezier(.25, .8, .25, 1), color .2s ease;
 
-        &:hover {
-          color: #333
-        }
+      &:hover {
+        color: #333
+      }
 
-        &.expanded {
-          transform: rotate(0)
-        }
+      &.expanded {
+        transform: rotate(0)
+      }
 
-        &.collapsed {
-          transform: rotate(-90deg)
-        }
+      &.collapsed {
+        transform: rotate(-90deg)
       }
     }
+  }
 
-    .code-content {
-      background-color: #fff;
-      border-radius: 4px;
-      width: 100%;
-      transition: height .4s cubic-bezier(.25, .8, .25, 1), opacity .3s ease, transform .4s cubic-bezier(.25, .8, .25, 1);
-      overflow: hidden;
-      transform-origin: top;
+  .code-content {
+    background-color: #fff;
+    border-radius: 6px;
+    width: 100%;
+    // transition: height .4s cubic-bezier(.25, .8, .25, 1), opacity .3s ease, transform .4s cubic-bezier(.25, .8, .25, 1);
+    overflow: hidden;
+    transform-origin: top;
 
-      .code-content-inner {
-        padding: 8px 12px
-      }
+    .code-content-inner {
+      padding: 8px 12px
     }
   }
+}
 
-  .indent-2 {
-    margin-left: 1rem
-  }
+.ai-chat-collapsible-response {
+  margin-bottom: 8px;
+}
 
-  .indent-4 {
-    margin-left: 2rem
-  }
+.think {
+  display: flex;
+  align-items: center;
 
-  .indent-6 {
-    margin-left: 3rem
+  svg {
+    width: 10px;
+    height: 10px;
+    margin-left: 4px;
   }
+}
 
-  .indent-8 {
-    margin-left: 4rem
-  }
+.markdown-body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #24292e;
+  // background-color: #fff;
+  word-wrap: break-word;
 
-  li {
-    margin-bottom: .25rem
-  }
+  >*:first-child {
+    margin-top: 0;
 
-  strong {
-    font-weight: 700
+    >*:first-child {
+      margin-top: 0
+    }
   }
 
-  em {
-    font-style: italic
-  }
+  >*:last-child {
+    margin-bottom: 0;
 
-  code {
-    background-color: #0000000d;
-    border-radius: 3px;
-    padding: .2em .4em;
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-    font-size: 85%;
-    text-wrap: auto;
+    >*:last-child {
+      margin-bottom: 0
+    }
   }
+}
 
-  .loading-shimmer {
-    -webkit-text-fill-color: transparent;
-    animation-delay: .5s;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-    animation-name: loading-shimmer;
-    background: #adadad linear-gradient(to right, #adadad 0, #1a1a1abf 40%, #1a1a1abf 60%, #adadad 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    background-repeat: no-repeat;
-    background-size: 50% 200%;
-    display: inline-block
-  }
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+  line-height: 1;
+}
 
-  .think {
-    display: flex;
-    align-items: center;
+.markdown-body h1 {
+  // font-size: 2em;
+  // border-bottom: 1px solid #eaecef;
+  // padding-bottom: 0.3em;
+  font-size: 14px;
+}
 
-    svg {
-      width: 10px;
-      height: 10px;
-      margin-left: 4px;
+.markdown-body h2 {
+  // font-size: 1.5em;
+  // border-bottom: 1px solid #eaecef;
+  // padding-bottom: 0.3em;
+  font-size: 13px;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 8px;
+  white-space: pre-wrap;
+}
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 12px;
+  // background-color: rgba(27,31,35,0.05);
+  border-radius: 6px;
+  text-wrap: auto;
+}
+
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+  margin: 0 0 16px 0;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+  background-color: #f6f8fa;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 16px;
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+  list-style: outside;
+  >*:first-child {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    >*:first-child {
+      margin-top: 0
     }
   }
-}
 
-.anchor {
-  height: 1px;
-  scroll-snap-align: end;
+  >*:last-child {
+    margin-bottom: 0;
+
+    >*:last-child {
+      margin-bottom: 0
+    }
+  }
 }