myshell-react-lib 0.1.0

package/src/styles/font.css

@@ -0,0 +1,19 @@
+* {
+  /* @apply font-mona-sans; */
+  /* 指定字体的字重为 400, 这会同时作用于 Mona Sans 及可能的 fallback 字体 */
+  font-weight: 400;
+}
+
+/* h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-ppt;
+} */
+
+.monaco-editor * {
+  @apply font-roboto-mono;
+  font-weight: 500;
+}

package/src/styles/global.scss

@@ -0,0 +1,251 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './tokens.scss';
+@import './design-light.scss';
+@import './design-dark.scss';
+
+@import './new-tokens.scss';
+@import './design2-light.scss';
+@import './design2-dark.scss';
+@import './components-light.scss';
+@import './components-dark.scss';
+
+@layer components {
+  .button-hover-underline::after {
+    @apply absolute inset-x-0 bottom-0 border-b border-current pointer-events-none;
+  }
+}
+body {
+  overflow: hidden;
+  background-color: var(--surface-container-default, #f5f7fa);
+  color: var(--text);
+  font-family: system-ui, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif !important;
+}
+.driver-popover * {
+  font-family: system-ui, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif !important;
+}
+body.driver-active .driver-none {
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+body.driver-active .driver-none * {
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  /* 在宽度大于 768px 且小于等于 1024px 的屏幕上应用以下样式 */
+  * {
+    // overflow-y: overlay;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+      border-radius: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--border-hovered);
+      border-radius: 6px;
+    }
+  }
+}
+
+// .cropper-container {
+//   visibility: hidden !important;
+// }
+.bot-avatar-upload,
+.user-avatar-upload {
+  .cropper-container {
+    visibility: hidden !important;
+  }
+  .cropper-hidden {
+    display: block !important;
+  }
+}
+.chakra-checkbox__control {
+  border-radius: 50%;
+}
+.square-checkbox .chakra-checkbox__control {
+  border-radius: 2px;
+}
+
+.chakra-checkbox__control[data-checked] {
+  background: #3e5cfa;
+  border-color: #3e5cfa;
+}
+.chakra-checkbox__control[data-focus-visible] {
+  box-shadow: none;
+}
+
+.chakra-table tr td {
+  height: 56px;
+  padding: 0 20px;
+}
+
+.chakra-table tr:nth-of-type(odd) td {
+  background-color: #fafbfb;
+}
+.py-safe {
+  background-color: #fafbfb;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.arrow {
+  --popper-arrow-default-shadow: 1px 1px 1px 0 var(--shadow-modal-bolder) !important;
+}
+.dark .arrow {
+  --popper-arrow-default-shadow: 1px 1px 1px 0 var(--border-opaque) !important;
+}
+.arrow-left {
+  --popper-arrow-default-shadow: -1px 1px 1px 0 var(--shadow-modal-bolder) !important;
+}
+.dark .arrow-left {
+  --popper-arrow-default-shadow: -1px 1px 1px 0 var(--border-opaque) !important;
+}
+li,
+a,
+button {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.tap-higtlight {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.chat-mask > div {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 20px);
+  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 20px);
+}
+.driver-popover {
+  background-color: var(--Colors-Utility-Lake-Blue-50) !important;
+  color: var(--Colors-Text-Static-White) !important;
+}
+
+.driver-popover .driver-popover-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--Colors-Beta-White-100);
+}
+.driver-popover .driver-popover-description {
+  font-size: 14px;
+  color: var(--Colors-Beta-White-80);
+}
+.driver-popover .driver-popover-progress-text {
+  font-size: 14px;
+  color: var(--Colors-Beta-White-60);
+  opacity: 0.6;
+  font-weight: 500;
+}
+.driver-popover-footer .driver-popover-navigation-btns {
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.driver-popover-footer .driver-popover-skip-btn,
+.driver-popover-footer .driver-popover-skip-btn:hover,
+.driver-popover-footer .driver-popover-skip-btn:focus {
+  border: none;
+  background: transparent !important;
+  font-size: 14px;
+  color: var(--Colors-Beta-White-80);
+  opacity: 0.6;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 4px 12px;
+  text-shadow: none;
+}
+.driver-popover-footer .driver-popover-prev-btn,
+.driver-popover-footer .driver-popover-prev-btn:hover,
+.driver-popover-footer .driver-popover-prev-btn:focus,
+.driver-popover-footer .driver-popover-next-btn,
+.driver-popover-footer .driver-popover-next-btn:hover,
+.driver-popover-footer .driver-popover-next-btn:focus {
+  background: var(--Colors-Foreground-Static-White) !important;
+  color: var(--Colors-Text-Static-Black) !important;
+  font-size: 14px;
+  padding: 4px 16px;
+  border-radius: 6px;
+  height: 28px;
+  text-shadow: none;
+}
+
+.driver-popover .driver-popover-arrow-side-left {
+  border-left-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-right {
+  border-right-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-top {
+  border-top-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-bottom {
+  border-bottom-color: var(--Colors-Utility-Lake-Blue-50);
+}
+.workshop-topbar-guide .driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
+  left: 15px;
+  right: auto;
+}
+.explore-bot-item .chakra-popover__arrow-positioner {
+  display: none;
+}
+.chakra-switch__thumb {
+  background-color: var(--surface-container-default) !important;
+}
+
+.chakra-switch__track {
+  background-color: var(--border) !important;
+}
+.chakra-switch__track[data-checked] {
+  background-color: var(--surface-primary-default) !important;
+}
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.md-viewer code {
+  background-color: white !important;
+  font-size: 14px !important;
+  color: var(--neutral-30);
+}
+.page-view .md-viewer pre {
+  padding: 12px;
+  background-color: #f6f8fa !important;
+  color: var(--text);
+  code {
+    background-color: #f6f8fa !important;
+    color: var(--text);
+  }
+}
+.sbdocs-wrapper {
+  overflow-y: auto;
+  height: 100vh;
+}
+.sbdocs-content {
+  max-width: 70vw !important;
+}
+.disable-touch-action img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  // touch-action: none;
+}

package/src/styles/md-viewer.scss

@@ -0,0 +1,155 @@
+.md-viewer {
+  padding: 0;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+  }
+
+  ul,
+  ol {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0;
+    padding-inline-start: 2em;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  a:-webkit-any-link {
+    color: -webkit-link;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  blockquote {
+    display: block;
+    margin-block-start: 8px;
+    margin-block-end: 8px;
+    font-style: normal;
+    border-inline-start-width: 2px;
+    padding-inline-start: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--text-Colors-Text-Subtle);
+
+    > p {
+      margin-top: 8px !important;
+      margin-bottom: 8px !important;
+      &::before {
+        content: '';
+      }
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+
+  .marked-code-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 12px;
+    // border-radius: 12px 12px 0 0;
+  }
+
+  img {
+    /* 设置默认图片的样式 */
+    min-height: 30px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border-radius: 12px;
+    cursor: pointer;
+  }
+
+  code {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .marked-table-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  pre {
+    background-color: white !important;
+  }
+
+  .katex-display {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+
+  .mermaid {
+    p {
+      margin: 0 !important;
+    }
+  }
+
+  //// 临时设置为 500，因 400 的字体包中似乎不包含斜体字体
+  //em {
+  //  font-weight: 500;
+  //}
+  // .katex-html {
+  //   display: block;
+  //   text-align: center;
+  //   margin-top: 16px;
+  // }
+}
+
+.dark {
+  .md-viewer {
+    pre {
+      background-color: #282c34 !important;
+    }
+  }
+}
+
+.prose :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  font-weight: normal;
+}
+
+.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  margin-top: 0.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+.prose :where(.prose > :last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  margin-bottom: 0 !important;
+}
+
+.prose :where(.prose > :first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  margin-top: 0 !important;
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
+  content: none;
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
+  content: none;
+}
+
+.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.5em !important;
+  margin-bottom: 0.5em !important;
+}

package/src/styles/new-tokens.scss

@@ -0,0 +1,255 @@
+@layer base {
+  :root {
+    // Basic
+    --Basic-White: #ffffff;
+    --Basic-Black: #000000;
+    --Basic-None: #ffffff00;
+
+    // Pure_Mauve
+    --Pure-Mauve-0: #000000;
+    --Pure-Mauve-5: #100f22;
+    --Pure-Mauve-10: #1b192d;
+    --Pure-Mauve-20: #352b4a;
+    --Pure-Mauve-30: #53436f;
+    --Pure-Mauve-40: #655186;
+    --Pure-Mauve-50: #7860a1;
+    --Pure-Mauve-60: #826aaf;
+    --Pure-Mauve-70: #9d8dc5;
+    --Pure-Mauve-80: #b8aed7;
+    --Pure-Mauve-90: #cbc6e6;
+    --Pure-Mauve-95: #dad6f1;
+    --Pure-Mauve-98: #e8e6f7;
+    --Pure-Mauve-99: #f9f7fc;
+    --Pure-Mauve-100: #ffffff;
+
+    // Neutral
+    --Neutral-0: #000000;
+    --Neutral-5: #121110;
+    --Neutral-10: #242220;
+    --Neutral-20: #302e2b;
+    --Neutral-30: #47443f;
+    --Neutral-40: #5c5854;
+    --Neutral-50: #7a7671;
+    --Neutral-60: #948f8b;
+    --Neutral-70: #b2aeaa;
+    --Neutral-80: #c7c3bf;
+    --Neutral-90: #e3e0dc;
+    --Neutral-95: #ebe8e6;
+    --Neutral-98: #f5f4f2;
+    --Neutral-99: #fcfbfa;
+    --Neutral-100: #fffefd;
+
+    // Neutral Variant
+    --Neutral-Variant-0: #000000;
+    --Neutral-Variant-5: #111111;
+    --Neutral-Variant-10: #1c1c1c;
+    --Neutral-Variant-20: #313131;
+    --Neutral-Variant-30: #484848;
+    --Neutral-Variant-40: #606060;
+    --Neutral-Variant-50: #797979;
+    --Neutral-Variant-60: #939393;
+    --Neutral-Variant-70: #a8a8a8;
+    --Neutral-Variant-80: #bfbfbf;
+    --Neutral-Variant-90: #dedede;
+    --Neutral-Variant-95: #e6e6e6;
+    --Neutral-Variant-98: #f2f2f2;
+    --Neutral-Variant-99: #fafafa;
+    --Neutral-Variant-100: #ffffff;
+
+    // Terracotta
+    --Terracotta-0: #000000;
+    --Terracotta-5: #2b0100;
+    --Terracotta-10: #3f0300;
+    --Terracotta-20: #530904;
+    --Terracotta-30: #881f0f;
+    --Terracotta-40: #a93724;
+    --Terracotta-50: #ca4f3a;
+    --Terracotta-60: #ec6750;
+    --Terracotta-70: #ff8a75;
+    --Terracotta-80: #ffb4a6;
+    --Terracotta-90: #ffdad4;
+    --Terracotta-95: #ffede9;
+    --Terracotta-98: #fff8f6;
+    --Terracotta-99: #fffcfb;
+    --Terracotta-100: #ffffff;
+
+    // Ember
+    --Ember-0: #000000;
+    --Ember-5: #230900;
+    --Ember-10: #341100;
+    --Ember-20: #552000;
+    --Ember-30: #793100;
+    --Ember-40: #9f4200;
+    --Ember-50: #c55505;
+    --Ember-60: #e76d24;
+    --Ember-70: #ff8d4e;
+    --Ember-80: #ffb692;
+    --Ember-90: #ffdbcb;
+    --Ember-95: #ffede6;
+    --Ember-98: #fff4f0;
+    --Ember-99: #fffcfb;
+    --Ember-100: #ffffff;
+
+    // Khaki
+    --Khaki-0: #000000;
+    --Khaki-5: #171000;
+    --Khaki-10: #241a00;
+    --Khaki-20: #3d2e00;
+    --Khaki-30: #584400;
+    --Khaki-40: #755b00;
+    --Khaki-50: #917312;
+    --Khaki-60: #ad8d2d;
+    --Khaki-70: #caa745;
+    --Khaki-80: #e8cd84;
+    --Khaki-90: #fae3aa;
+    --Khaki-95: #fff2d9;
+    --Khaki-98: #fff8eb;
+    --Khaki-99: #fffefb;
+    --Khaki-100: #ffffff;
+
+    // Olive
+    --Olive-0: #000000;
+    --Olive-5: #0b1400;
+    --Olive-10: #131f00;
+    --Olive-20: #243600;
+    --Olive-30: #374e0b;
+    --Olive-40: #4e6622;
+    --Olive-50: #667f39;
+    --Olive-60: #7f9a50;
+    --Olive-70: #99b567;
+    --Olive-80: #b4d180;
+    --Olive-90: #d0ed99;
+    --Olive-95: #def2b8;
+    --Olive-98: #f1ffd2;
+    --Olive-99: #f9ffe6;
+    --Olive-100: #ffffff;
+
+    // Teal
+    --Teal-0: #000000;
+    --Teal-5: #00150f;
+    --Teal-10: #002018;
+    --Teal-20: #00382c;
+    --Teal-30: #005140;
+    --Teal-40: #006b56;
+    --Teal-50: #00876d;
+    --Teal-60: #30a286;
+    --Teal-70: #51bda0;
+    --Teal-80: #6fd9bb;
+    --Teal-90: #98f4d7;
+    --Teal-95: #b9ffe7;
+    --Teal-98: #e6fff4;
+    --Teal-99: #f3fff9;
+    --Teal-100: #ffffff;
+
+    // Cobalt
+    --Cobalt-0: #000000;
+    --Cobalt-5: #000449;
+    --Cobalt-10: #000767;
+    --Cobalt-20: #182282;
+    --Cobalt-30: #323c99;
+    --Cobalt-40: #323c99;
+    --Cobalt-50: #646ece;
+    --Cobalt-60: #7e88ea;
+    --Cobalt-70: #9ba4ff;
+    --Cobalt-80: #bdc2ff;
+    --Cobalt-90: #dfe0ff;
+    --Cobalt-95: #f1efff;
+    --Cobalt-98: #fbf8ff;
+    --Cobalt-99: #fffbff;
+    --Cobalt-100: #ffffff;
+
+    // Berry_Pink
+    --Berry-Pink-0: #000000;
+    --Berry-Pink-5: #2b0010;
+    --Berry-Pink-10: #3f001a;
+    --Berry-Pink-20: #610c2e;
+    --Berry-Pink-30: #7e2544;
+    --Berry-Pink-40: #9d3d5c;
+    --Berry-Pink-50: #bb5574;
+    --Berry-Pink-60: #db6e8e;
+    --Berry-Pink-70: #fa88a8;
+    --Berry-Pink-80: #ffb1c4;
+    --Berry-Pink-90: #ffd9e0;
+    --Berry-Pink-95: #ffecef;
+    --Berry-Pink-98: #fff8f8;
+    --Berry-Pink-99: #fffbff;
+    --Berry-Pink-100: #ffffff;
+
+    // Lake_Blue
+    --Lake-Blue-0: #000000;
+    --Lake-Blue-5: #001224;
+    --Lake-Blue-10: #001d35;
+    --Lake-Blue-20: #003256;
+    --Lake-Blue-30: #00497a;
+    --Lake-Blue-40: #266296;
+    --Lake-Blue-50: #447bb0;
+    --Lake-Blue-60: #5f95cc;
+    --Lake-Blue-70: #7aafe8;
+    --Lake-Blue-80: #9ccaff;
+    --Lake-Blue-90: #d0e4ff;
+    --Lake-Blue-95: #e9f1ff;
+    --Lake-Blue-98: #f8f9ff;
+    --Lake-Blue-99: #fdfcff;
+    --Lake-Blue-100: #ffffff;
+
+    // Plum_Purple
+    --Plum-Purple-0: #000000;
+    --Plum-Purple-5: #2b001c;
+    --Plum-Purple-10: #3f0029;
+    --Plum-Purple-20: #610c43;
+    --Plum-Purple-30: #7e255f;
+    --Plum-Purple-40: #9d3d7b;
+    --Plum-Purple-50: #bb5597;
+    --Plum-Purple-60: #db6eb5;
+    --Plum-Purple-70: #fa88d2;
+    --Plum-Purple-80: #ffb1e4;
+    --Plum-Purple-90: #ffd9f2;
+    --Plum-Purple-95: #ffecf8;
+    --Plum-Purple-98: #fff8fd;
+    --Plum-Purple-99: #fffbfe;
+    --Plum-Purple-100: #ffffff;
+
+    // Opacity
+    // On Surface
+    --Opacity-On-Surface-10: #dbd9d729;
+    --Opacity-On-Surface-20: #bdbcbb33;
+    --Opacity-On-Surface-30: #a8a7a533;
+    --Opacity-On-Surface-40: #94928f33;
+
+    // White
+    --Opacity-White-1: #ffffff03;
+    --Opacity-White-3: #ffffff08;
+    --Opacity-White-5: #ffffff0d;
+    --Opacity-White-8: #ffffff14;
+    --Opacity-White-12: #ffffff1f;
+    --Opacity-White-16: #ffffff29;
+    --Opacity-White-20: #ffffff33;
+    --Opacity-White-30: #ffffff4d;
+    --Opacity-White-40: #ffffff66;
+    --Opacity-White-50: #ffffff80;
+    --Opacity-White-60: #ffffff99;
+    --Opacity-White-70: #ffffffb2;
+    --Opacity-White-80: #ffffffcc;
+    --Opacity-White-90: #ffffffe5;
+    --Opacity-White-95: #fffffff2;
+    --Opacity-White-100: #ffffff;
+
+    // Black
+    --Opacity-Black-1: #00000003;
+    --Opacity-Black-3: #00000008;
+    --Opacity-Black-5: #0000000d;
+    --Opacity-Black-8: #00000014;
+    --Opacity-Black-12: #0000001f;
+    --Opacity-Black-16: #00000029;
+    --Opacity-Black-20: #00000033;
+    --Opacity-Black-30: #0000004d;
+    --Opacity-Black-40: #00000066;
+    --Opacity-Black-50: #00000080;
+    --Opacity-Black-60: #00000099;
+    --Opacity-Black-70: #000000b2;
+    --Opacity-Black-80: #000000cc;
+    --Opacity-Black-90: #000000e5;
+    --Opacity-Black-95: #000000f2;
+    --Opacity-Black-100: #000000;
+  }
+}