@antv/dumi-theme-antv/dist/components/AI/HomeDialog/PromptTextarea/index.module.less

AntV website theme based on dumi2.

.container {
  position: relative;
  margin: 0 auto;
  width: 760px;
  height: 144px;
  font-size: 0;
  padding: 16px;
  gap: 16px;
  transition: all 0.2s;
  border: 1px solid rgba(134, 144, 156, 20%);
  border-radius: 16px;
  background: #fff9;
  box-shadow: 8px 8px 20px 0 #0000000a, inset 1px -1px 0 0 #ffffffe3;
  z-index: 10;
  display: flex;
  flex-direction: column;

  &.withDatasource {
    height: 184px;
  }

  .header {
    > div {
      max-width: 300px;
    }
  }

  .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 32px;

    .dataActions {
      display: flex;
      gap: 8px;

      :global {
        button {
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          height: 32px;
          padding: 0 12px;
          border-radius: 8px;
          outline: none;
          max-width: 240px;
          background: #3f4b660a;
          font-size: 14px;
          color: #1d2129;
          border-color: transparent;

          &.btn-error {
            color: #ff4d4f;
            box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 89%),
              0 0 12px 0 rgba(250, 16, 16, 23%);
          }

          .btn-icon,
          img {
            display: block;
            width: 20px;
            height: 20px;
            margin-right: 4px;
          }

          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  &.active {
    background: #fff9;
    border: 1px solid #1677ff;
    box-shadow: 0 8px 20px 0 #1677ff29, inset 1px -1px 0 0 #ffffffe3;

    .promptTextarea::placeholder {
      color: transparent;
    }
  }

  &.compact {
    margin-bottom: 0;
    padding: 8px 12px;
    gap: 6px;
    width: 100%;
    height: 124px;

    &.withDatasource {
      height: 160px;
    }

    .promptTextarea {
      font-size: 14px;
    }
  }

  @media only screen and (max-width: 767.99px) {
    width: 100%;
    height: auto;
    min-height: 120px;

    &.withDatasource {
      height: auto;
      min-height: 160px;
    }

    .header {
      > div {
        max-width: 100%;
      }
    }
  }
}

.datasourceBtn {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 10px;
  height: 10px;
  background-color: red;
}

.promptTextarea {
  flex: 1 1;
  display: block;
  font-size: 16px;
  color: #1d2129;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;

  &::placeholder {
    color: rgba(122, 132, 153, 85%);
  }
}