Separate components for spright chat message types

[jattasNI]

Pull Request

🤨 Rationale

One of the tasks in #2610 is to create separate components for different message types instead of a single chat message with a message-type attribute. This would have some benefits:

• certain APIs should only be available on certain message types (e.g. slots for footer-actions and end are only available on inbound messages) but are currently present on all
• new message types will soon appear with more unique APIs and visual presentations. Candidates include welcome/login message (HLD updates for new Spright chat capabilities: welcome and disclaimer #2799), error message, tool progress message, context message.

👩‍💻 Implementation

1. Create new components spright-chat-message-inbound, spright-chat-message-outbound, spright-chat-message-system by copying existing message and removing code that was specific to other types.
2. Added framework wrappers
3. Marked existing spright-chat-message as deprecated. We can remove it once clients migrate to the new messages.
4. Updated docs and example apps to only refer to the new components
5. Updated HLD to reflect this plan

🧪 Testing

1. Duplicated unit tests from the original message type to the new ones. Some tests (e.g. Angular directive) could be removed because the message-type attribute no longer exists
2. Duplicated Chromatic tests for messages and for conversation message layout. Updated other conversation-specific tests to only refer to the new message components.
3. Visual inspection of storybook and example apps to ensure styling is correct

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[jattasNI]

Bypassing @rajsite per #2836

[rajsite]

FYI @jattasNI this change introduced the following Angular build warnings:

  @ni-private/angular-workspace:build: ▲ [WARNING] Ignoring this import because "../../node_modules/@ni/fast-foundation/dist/esm/index.js" was marked as having no side effects [ignored-bare-import]
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:     ../spright-components/dist/esm/chat/message/outbound/template.js:2:7:
  @ni-private/angular-workspace:build:       2 │ import '@ni/fast-foundation';
  @ni-private/angular-workspace:build:         ╵        ~~~~~~~~~~~~~~~~~~~~~
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:   "sideEffects" is false in the enclosing "package.json" file:
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:     ../../node_modules/@ni/fast-foundation/package.json:4:2:
  @ni-private/angular-workspace:build:       4 │   "sideEffects": false,
  @ni-private/angular-workspace:build:         ╵   ~~~~~~~~~~~~~
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build: ▲ [WARNING] Ignoring this import because "../../node_modules/@ni/fast-foundation/dist/esm/index.js" was marked as having no side effects [ignored-bare-import]
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:     ../spright-components/dist/esm/chat/message/system/template.js:2:7:
  @ni-private/angular-workspace:build:       2 │ import '@ni/fast-foundation';
  @ni-private/angular-workspace:build:         ╵        ~~~~~~~~~~~~~~~~~~~~~
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:   "sideEffects" is false in the enclosing "package.json" file:
  @ni-private/angular-workspace:build: 
  @ni-private/angular-workspace:build:     ../../node_modules/@ni/fast-foundation/package.json:4:2:
  @ni-private/angular-workspace:build:       4 │   "sideEffects": false,
  @ni-private/angular-workspace:build:         ╵   ~~~~~~~~~~~~~
  @ni-private/angular-workspace:build: 

i.e. the following import which only imports types:

nimble/packages/spright-components/src/chat/message/system/template.ts

Lines 2 to 4 in 82dd225

	import {
	type FoundationElementTemplate
	} from '@ni/fast-foundation';

should change to:

 import type { 
    FoundationElementTemplate 
 } from '@ni/fast-foundation'; 

which will elide the whole import.

As-is, the behavior of verbatimModuleSyntax means the import is preserved in the emitted js which we don't really want and is what Angular is warning about:

mport { html, ViewTemplate } from '@ni/fast-element';
import {} from '@ni/fast-foundation';
export const template = () => html `
    <div class="container">
        <section class="message-content">
            <slot></slot>
        </section>
    </div>
`;
//# sourceMappingURL=template.js.map

Edit: Maybe we should just enable no-import-type-side-effects as described here: #2845 (comment)

[jattasNI]

FYI @jattasNI this change introduced the following Angular build warnings:

@rajsite Good catch, sorry for not noticing! I'll address in #2848.

[rajsite]

FYI @jattasNI this change introduced the following Angular build warnings:

@rajsite Good catch, sorry for not noticing! I'll address in #2848.

No worries and great that the line rule helps out!