@mybricks/plugin-ai 0.0.1 → 0.0.3

package/src/components/messages/index.less

@@ -1,806 +0,0 @@
-.ai-chat-messages {
-  font-size: 12px;
-  overflow: auto;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  scroll-snap-type: y proximity;
-
-  &::-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
-  }
-
-  .ai-chat-messages-skeleton-header {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    gap: 8px;
-    margin-bottom: 8px;
-
-    &.user {
-      flex-direction: row-reverse;
-      justify-content: end;
-
-      .uipaas-skeleton-paragraph {
-        align-items: end
-      }
-    }
-  }
-
-  .ai-chat-messages-skeleton-item {
-    width: 100%
-  }
-
-  .chat-bubble {
-    display: flex;
-    flex-direction: column;
-    color: #333;
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 16px 16px 0;
-
-    &:has(.has-popover),
-    &:hover {
-      .chat-bubble-options {
-        opacity: 1
-      }
-    }
-
-    .chat-message-container:has(.user-message) {
-      padding: 8px 12px
-    }
-
-    .user-message img {
-      display: inline-block;
-      flex-shrink: 0;
-      width: auto;
-      height: 60px;
-      margin: 0;
-      object-fit: cover;
-
-      +& {
-        margin-left: 8px
-      }
-    }
-
-    .user-message p:has(img) {
-      display: flex;
-      align-items: center
-    }
-  }
-
-  .chat-bubble-header {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    gap: 8px;
-    padding-bottom: 8px;
-
-    .chat-bubble-header-avatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      box-sizing: content-box;
-      border: 2px solid #ffffff;
-
-      .copilot-avatar {
-        .user-avatar();
-      }
-
-      .user-avatar {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%
-      }
-    }
-
-    &:has(.user-avatar) {
-      justify-content: end;
-      flex-direction: row-reverse
-    }
-
-    .chat-bubble-header-name {
-      font-size: 12px;
-      color: #999
-    }
-  }
-
-  .chat-message-container {
-    user-select: text;
-    width: 100%;
-    font-size: 12px;
-    border-radius: 12px;
-    padding: 0;
-
-    +& {
-      margin-top: 8px
-    }
-
-    .chat-box-attachment-image {
-      margin-bottom: 0
-    }
-
-    .chat-box-attachment-image-item {
-      max-width: 100px;
-      width: auto;
-      height: auto
-    }
-  }
-
-  .chat-bubble-options {
-    padding: 10px 10px 0;
-    opacity: 0;
-
-    .chat-bubble-option-container {
-      display: flex;
-      align-items: center;
-      justify-content: start
-    }
-  }
-
-  .chat-bubble-option-icon {
-    font-size: 12px;
-    padding: 4px;
-    color: #00000080;
-
-    +& {
-      margin-left: 6px
-    }
-
-    +.chat-bubble-option-more {
-      margin-left: 6px
-    }
-  }
-
-  .welcome-message {
-    .welcome-message-self-introduction {
-      margin-top: 8px;
-      margin-bottom: 16px
-    }
-
-    .shortcuts {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-top: 8px;
-
-      .shortcuts-item {
-        flex-shrink: 0;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        padding: 4px 8px;
-        border: 1px solid #eeeeee;
-        border-radius: 4px;
-        color: #666;
-        background-color: #f3f3f3;
-
-        .shortcuts-item-label {
-          font-size: 12px
-        }
-
-        .shortcuts-item-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 16px;
-          height: 16px;
-          margin-right: 8px;
-          font-size: 12px;
-          background: #666;
-          border-radius: 2px
-        }
-
-        &.shortcuts-theme-blue {
-          color: #0871f0;
-          border-color: #d0e5ff;
-          background-color: #ecf4ff;
-
-          .shortcuts-item-icon {
-            color: #fff;
-            background-color: #2885f6
-          }
-        }
-
-        &.shortcuts-theme-orange {
-          color: #f9a254;
-          border-color: #fae7d5;
-          background-color: #fff4e2;
-
-          .shortcuts-item-icon {
-            background-color: #f9a254
-          }
-        }
-
-        &.shortcuts-theme-green {
-          color: #70bc70;
-          border-color: #d4eed4;
-          background-color: #ecffec;
-
-          .shortcuts-item-icon {
-            background-color: #70bc70
-          }
-        }
-
-        &.shortcuts-theme-gray {
-          border-color: transparent;
-          transition: .3s;
-
-          &:hover {
-            background-color: #f7f7f7
-          }
-        }
-      }
-    }
-  }
-
-  .user-message {
-    width: fit-content;
-    max-width: calc(100% - 16px);
-    align-self: flex-end;
-    align-items: end;
-    background: #ecf4ff;
-    border-radius: 4px;
-    padding: 8px;
-    border-color: transparent;
-
-    .chat-bubble-option-container {
-      justify-content: end
-    }
-  }
-
-  .ai-message {
-    width: 100%;
-
-    &.error-message {
-      background-color: #fff2f2;
-      border-color: #fd9696;
-      color: #f44
-    }
-  }
-}
-
-.ai-chat-markdown {
-  color: #333;
-  white-space: pre-wrap;
-  word-break: break-word;
-
-  p {
-    margin: 8px 0
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    font-weight: 600;
-    line-height: 1.5
-  }
-
-  h1 {
-    font-size: 2em;
-    border-bottom: 1px solid #eaecef;
-    padding-bottom: .3em
-  }
-
-  h2 {
-    font-size: 1.5em;
-    border-bottom: 1px solid #eaecef;
-    padding-bottom: .3em
-  }
-
-  h3 {
-    font-size: 1.25em
-  }
-
-  h4 {
-    font-size: 1em
-  }
-
-  h5 {
-    font-size: .875em
-  }
-
-  h6 {
-    font-size: .85em;
-    color: #6a737d
-  }
-
-  a {
-    color: #0366d6;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline
-    }
-  }
-
-  img,
-  .markdown-image {
-    max-width: 100%;
-    height: auto;
-    margin: 10px 0;
-    border-radius: 4px;
-    display: block
-  }
-
-  .markdown-image-container {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%
-  }
-
-  .markdown-image-clickable {
-    cursor: pointer;
-    max-width: 100%;
-    height: auto
-  }
-
-  .missing-image {
-    color: #666;
-    background-color: #f3f3f3;
-    border: 1px dashed #ccc;
-    border-radius: 4px;
-    padding: 8px 12px;
-    display: inline-block;
-    margin: 10px 0
-  }
-
-  blockquote {
-    padding: 0 1em;
-    color: #6a737d;
-    border-left: .25em solid #dfe2e5;
-    margin: 16px 0;
-
-    >p {
-      margin-top: 0;
-      margin-bottom: 0
-    }
-  }
-
-  table {
-    width: fit-content;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin: 16px 0;
-    overflow-x: auto;
-    display: block;
-    font-size: 12px;
-    border-radius: 4px;
-    background-color: #fff;
-    border: 1px solid #eaeaea
-  }
-
-  table thead td,
-  table th,
-  table td {
-    padding: 10px 16px;
-    border-bottom: 1px solid #eaeaea;
-    border-right: none;
-    text-align: left;
-    word-break: break-word
-  }
-
-  table th:last-child,
-  table td:last-child {
-    border-right: none
-  }
-
-  table tr:last-child td {
-    border-bottom: none
-  }
-
-  table th:first-child {
-    border-top-left-radius: 4px
-  }
-
-  table th:last-child {
-    border-top-right-radius: 4px
-  }
-
-  table tr:last-child td:first-child {
-    border-bottom-left-radius: 4px
-  }
-
-  table tr:last-child td:last-child {
-    border-bottom-right-radius: 4px
-  }
-
-  table th {
-    background-color: #f6f8fa;
-    font-weight: 600;
-    border-bottom: 1px solid #eaeaea;
-    position: sticky;
-    top: 0;
-    z-index: 1
-  }
-
-  table tr {
-    transition: background-color .2s ease
-  }
-
-  table tr:hover {
-    background-color: #f1f8ff !important
-  }
-
-  ol,
-  ul {
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    padding-inline-start: 0;
-    margin: 8px 0;
-    padding-left: 0;
-
-    ol,
-    li {
-      padding-left: 1em
-    }
-  }
-
-  li {
-    position: relative;
-    margin: 4px 0;
-    padding-left: 1rem;
-    list-style-type: none
-  }
-
-  ul li:before {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: .75em;
-    width: 3px;
-    height: 3px;
-    background-color: currentColor;
-    border-radius: 50%
-  }
-
-  ol {
-    counter-reset: item
-  }
-
-  ol li {
-    padding-left: 0;
-    counter-increment: item
-  }
-
-  ol li:before {
-    content: counter(item) ".";
-    margin-right: 4px
-  }
-
-  >*:first-child {
-    margin-top: 0;
-
-    >*:first-child {
-      margin-top: 0
-    }
-  }
-
-  >*:last-child {
-    margin-bottom: 0;
-
-    >*:last-child {
-      margin-bottom: 0
-    }
-  }
-
-  code {
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-    background-color: #1b1f230d;
-    border-radius: 3px;
-    font-size: 85%;
-    padding: .2em .4em;
-    text-wrap: auto;
-  }
-
-  pre {
-    margin: 0;
-    overflow: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-
-    code {
-      padding: 0;
-      background-color: transparent;
-      font-size: 100%;
-      white-space: pre;
-      text-wrap: auto;
-    }
-  }
-
-  hr {
-    border: 0;
-    height: 1px;
-    background-color: #eaecef;
-    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
-  }
-
-  .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: 4px;
-    border: 1px solid #ffd8d2;
-    padding: 8px
-  }
-
-  .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;
-
-    span {
-      white-space: nowrap
-    }
-  }
-
-  .ai-chat-error-code-block-retry:hover {
-    border-radius: 4px
-  }
-
-  .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
-    }
-  }
-
-  .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;
-
-    &:has(.collapsed) {
-      padding: 4px 8px;
-      transform: translateY(-1px)
-    }
-
-    .code-header {
-      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);
-
-      &:has(.collapsed) {
-        padding-bottom: 0
-      }
-
-      .code-title {
-        margin: 0;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: currentColor;
-        font-weight: 400
-      }
-
-      .code-title-status {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        svg {
-          width: 10px;
-          height: 10px;
-        }
-
-        &.pending {
-          transform: translate(-2px);
-        }
-
-        &.success {
-          color: #05aa2d;
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
-
-        &.error {
-          color: #d54941;
-        }
-
-        &.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;
-
-        &:hover {
-          color: #333
-        }
-
-        &.expanded {
-          transform: rotate(0)
-        }
-
-        &.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-inner {
-        padding: 8px 12px
-      }
-    }
-  }
-
-  .indent-2 {
-    margin-left: 1rem
-  }
-
-  .indent-4 {
-    margin-left: 2rem
-  }
-
-  .indent-6 {
-    margin-left: 3rem
-  }
-
-  .indent-8 {
-    margin-left: 4rem
-  }
-
-  li {
-    margin-bottom: .25rem
-  }
-
-  strong {
-    font-weight: 700
-  }
-
-  em {
-    font-style: italic
-  }
-
-  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;
-  }
-
-  .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
-  }
-
-  .think {
-    display: flex;
-    align-items: center;
-
-    svg {
-      width: 10px;
-      height: 10px;
-      margin-left: 4px;
-    }
-  }
-}
-
-.anchor {
-  height: 1px;
-  scroll-snap-align: end;
-}