aws / mynah-ui

https://aws.github.io/mynah-ui/
Apache License 2.0
13 stars 11 forks source link

fix: #76 feature: markdown table styles feature: all markdown tags #82

Closed 32teeth closed 1 month ago

32teeth commented 1 month ago

Problem

This resolves #76

Enter text into the mynah chatbox like awdaw/dawdaw/dawda/wdawdaw/dawdawd/awdad/awdawd/awdaw/dawd/, observe that when you enter the message, the text is not wrapped.

From testing on the team, changing word-wrap css to break-word fixes this.

Solution

Code blocks

code {
    color: var(--mynah-color-syntax-code);
    filter: brightness(0.95);
    background-color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-all;
}
Screenshot 2024-07-18 at 4 50 49 PM

Markdown table rendering

table {
  table-layout: fixed;

  thead {
    background: var(--mynah-color-bg);
  }

  tbody {
    tr:nth-child(even) {
      background: var(--mynah-color-bg);
    }
  }
}

table, tr, th, td {
  border: var(--mynah-border-width) solid var(--mynah-color-border-default);
  border-collapse: collapse;
  padding: var(--mynah-sizing-2);
  word-break: auto-phrase;
}

Additionally added two more commands

CARD_WITH_ALL_MARKDOWN_TAGS

This will render all markdown tags

Screenshot 2024-07-18 at 4 55 34 PM

CARD_RENDER_MARKDOWN_TABLE

This now makes markdown tables render as expected with backgrounds and borders

Screenshot 2024-07-18 at 4 51 15 PM

[!TIP] How to test really long strings

You can test locally by editing examples/src/config.ts by adding the below to WelcomeMessage

here is a really long word WITH quotes\`pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis\`

here is a really long word WITHOUT quotes pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis

here is a really lone file path WITH quotes \`C:\\Users\\JohnDoe\\Documents\\Projects\\2024\\Q3\\CustomerEngagement\\Phase2\\FinalReports\\Drafts\\Version3\\Images\\Marketing\\HighRes\\JPEG\\Export\\2024_07_18_Customer_Engagement_Final_Report_Version3_Draft_Marketing_HighRes_Images_JPEG_Export_Backup_Copy_20240718.pdf\`

here is a really lone file path WITHOUT quotes C:\\Users\\JohnDoe\\Documents\\Projects\\2024\\Q3\\CustomerEngagement\\Phase2\\FinalReports\\Drafts\\Version3\\Images\\Marketing\\HighRes\\JPEG\\Export\\2024_07_18_Customer_Engagement_Final_Report_Version3_Draft_Marketing_HighRes_Images_JPEG_Export_Backup_Copy_20240718.pdf

# Project Features Overview

| Feature           | Description                                      | Priority   | Status       |
|:------------------|--------------------------------------------------|:----------:|-------------:|
| User Authentication | Implement secure login and registration         | High       | In Progress  |
| Dashboard         | Create a user dashboard with key metrics         | Medium     | Planned      |
| Reporting         | Generate monthly performance reports             | Low        | Not Started  |
| Notifications     | Add email and push notifications for updates     | Medium     | In Progress  |
| API Integration   | Integrate third-party APIs for data enrichment   | High       | Completed    |
| User Feedback     | Collect and analyze user feedback                | Low        | Not Started  |

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

dogusata commented 1 month ago

@32teeth I guess we need to update the template for PRs as well. But without getting a UX team approval of UI changes are causing previous use cases some issues.

dogusata commented 1 month ago

@32teeth Unfortunately another bug report caused by table styles. It might be better to have a confirmation from UX team and maybe adding them under a optional settings toggle.

https://github.com/aws/aws-toolkit-jetbrains/pull/4754#issuecomment-2261460060