[AI] Create design spec for AI Code-snippet

[aagonzales]

Create a design spec for an AI flavor of code snippet (inline, single line and multi-line), incorporating the slug and aura gradient where appropriate. Design a solution for both light and dark themes.

Tasks

• Create a design spec for Carbon devs based off the design in Carbon for AI file.

Features AI Chat needs

• [code snippet] add line number modifier #6519
• Highlight syntax (Highlight JS)
• Rounder corners
• Full screen “pop out” icon/ feature
• Is “show more” optional if there is internal scrolling
• Streaming text

See: https://labs-canary.carbondesignsystem.com/?path=/story/components-chat-code--showcase

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[RichKummer]

Figma design specs

[RichKummer]

I also looked at how AI generated code could be previewed inside a code editor. Sharing some quick sketches here, along with feedback from Taylor:

Hey! I'll give you my 2c. Feasibility of this will depend on the tech powering the code editor. It is typically possible though to bold, italic, etc within these. vscode does this through themes as part of their support for syntax highlighting.
Determining what gets italicized can differ between themes. I'm sure there's a default set of things in vscode, but I'm not sure what they are.
Overall I think italicizing as the only marker of AI generated code may not be enough. It would need a background highlight or something like a slug imo. (edited)

Slack message