Filepaths are not wrapped

[akhamis-amzn]

Problem

I am currently adding a new feature for Amazon Q AWS Toolkit extension, which will return long file paths. Currently this long file paths only display on one line, and do not get wrapped, leading to it being cutoff.

Steps to reproduce the issue

https://aws.github.io/mynah-ui/

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.

Expected behavior

The path should be wrapped such that it all displays to the user.

System details

• OS: MacOS
• Tested enviroment:
  • [Y] Web (Demo app)
  • [Y] VSCode Amazon Q Chat
  • [N] JetBrains IntelliJ Amazon Q Chat
• Enviroment extension version (if applicable):
• [ ] Enviroment is remote

[akhamis-amzn]

[32teeth]

Questions

1. If a file / non breaking word is longer than the allocated space?
2. Should we truncate with ellipsis ...
3. Should we truncate the path to just the file and extension '/volume/path/file.txt'.match(/[^\/\]+$/)?.[0]
4. Should we implement 2 and wrap it in a link in vscode to open the file?
5. Should we implement 2 and wrap it in a span with a title attribute ${'/volume/path/file.txt'.match(/[^\/\]+$/)?.[0]}
6. ...

[!TIP] In a previous life i had built something in C to display just this issue on LCD screens.

Here is is rewritten in JS

const truncator = (path) => {
  const [dir, file = "", ext = "", params = ""] = path.replace(/\\/g, "/").match(/(.*\/)?(\..*?|.*?)(\.[^.]*?)?(#.*$|\?.*$|$)/).slice(1);
  const parts = (dir || "").split('/').filter(Boolean);
  return parts.length > 2
    ? `/${parts[0]}/.../${parts[parts.length - 1]}/${file}${ext}${params}`
    : `${dir}${file}${ext}${params}`;
};

// tests
const paths = [
  '/volume/folder/file.txt',
  '/volume/folder/folder/file.txt',
  '/volume/folder/folder/folder/file.txt',
  '/volume/folder/folder/folder/folder/file.txt',
  '/volume/folder/folder/folder/folder/folder/file.txt'
];

paths.forEach(path => console.log(truncator(path)));

[volodkevych]

Hi @32teeth, I do not think it's a path-specific problem. Overflow can be caused by long namespace, for example. I created CR with the basic fix for text overflow in prompt input or card.

[32teeth]

Thanks.

Yep, you could additionally have long words.

AFAIK, this should be implemented for both the input and output cards (user + q)

[!TIP] Should be trivial to implement

overflow-wrap: anywhere;
word-break: break-all

Do you have a link to your PR?

[volodkevych]

This is the PR: https://github.com/aws/mynah-ui/pull/78

[32teeth]

Added PR #82