blocked by #52

Displays the file upload icon, if clicked, it displays a file picker, where the user can pick files with accepted types. File upload can be disabled.

Replace the copy-pasted stylesheets and use the ones in the package - stream-chat-styles? Not sure about the name. Depends on CRS-716.

Blocked by #54

The current implementation is correct, with few exceptions.

1. When I scroll up and post a message, the list does not scroll to the bottom (Notion spec).

We miss the new messages / scroll to bottom button - see bottom right corner.

You can also add a badge of how many new messages are there - see design.

Upon PR open and merge, Github should run our test suite. We should run:

• linting (use eslint-typescript)
• unit tests
• e2e tests

Blocked by #16

Add reactions handling capabilities to the message component:

• Add a new input: areReactionsEnabled
• If reactions are enabled the user can toggle the reactions panel with a button

The reactions are handled by a standalone component called MessageReactions:
Inputs:

• isSelectorOpen

Behavior (ReactionList and ReactionSelector React SDK components):

• Show emoji selector if opened
• Show reactions of message
• Delete message reactions

Configure the npm semantic-release plugin to publish only the dist folder

Create the basic message input based on MessageInputFlat where the user can type and send the message with enter key

File upload + file upload preview

• User goes offline
• Attachment can't be sent

Chat client and channel services are really important to users who want to create custom components. Improve the documentation with the following:

• add type information for the method/property descriptions
• add an example for custom event handlers

If we need to import a library module into another library module, it can be imported from 3 places:

• stream-chat-angular, see tsconfig -> only the sample app uses this import alias, it shouldn't be available in the lib folder
• from dist folder (if exists) -> this is the build output of the library, the sample-app aliases this folder as stream-chat-angular
• from the lib folder -> the correct import path

the last one is the correct import path, however, VSCode uses all three paths for auto import, which can lead to build errors, later on, what can be done:

• move the stream-chat-angular import alias to the tsconfig of the sample-app
• try to tell VSCode to put the lib folder as the first import path option (I don't know if such a setting is possible)

If a message is deleted, only display a placeholder text

• https://getstream.io/chat/docs/sdk/reactnative/guides/customize-channel-list/#customizing-event-handlers watch for these events in the channel and chat services
• Add tests for these services
• Refactor any kind of code that was part of the PoC, but not production quality

Flag messages action

• Add the necessary CSS class based on the current theme
• Add a service to toggle the current theme

Generate documentation for services using typedoc

Requirements for generation

• Do not generate data for constructors and private members
• Page title should be the service name (no "Class: " prefix)
• File names should stay the same (or update file references in docs)
• Update CI config to deploy generated docs

Requirements for docs

• Add description for class
• Add description for public members and methods
• Convert existing service docs into doc comments

Nice to have

• Create eslint rule to check if services have the necessary comments

https://docs.google.com/document/d/1KnEvyP5jtwYQMN-pSwQIoEuWcwifPyV_nbj9A9VFVfY/edit

Capabilities currently used by the SDK and applicable to the Angular library:

• upload-file
• send-reaction
• flag-message
• delete-any-message
• delete-own-message
• update-any-message
• update-own-message

Image display works with attachments that are generated by the Stream data generator, but there is a problem with displaying messages received from the React SDK:

Correct display from React:

Angular:

Differences:

• Empty bubble in Angular
• Image is bigger in Angular
• img_url is used instead of image_url

Inputs:

• imageUrl (optional)
• name
• size

Behavior:

Displays the image, if not provided or an error occurred during image load, it displays the initials instead.

We should have the library and the sample app in different folders. The sample app should pick changes in the library automatically for easier development workflow.

• Add pagination to channel list, use a load more button to load more channels
• Add loading and error indicators as well
• Add empty state indicator
• Add custom channel preview template

blocked by #43

https://getstream.io/chat/docs/sdk/reactnative/guides/customize-channel-list/#customizing-event-handlers based on this, add customization hooks to channel list

Add SDK header to the js client, so that we can track usage

Add a component that can display error or success notifications, add a service that can be used by components to add/hide notifications

Blocked by #16

Display image attachment

Out of scope

• image modal

Use conventional commits format, and have semantic release publish an artifact with each PR merge. We don't need to do the actual publishing, we can use --dry-run flag to test the setup.

Blocked by #53

Add upload preview (preview delete, add and send will be handled in a separate issue). Only image preview is supported

• Automatically hide the channel list on a give device width (based on React SDK implementation)
• Add hamburger icon the toggle channel list (based on React SDK implementation)

Currently a generic file icon is displayed for every mime type, React has different file icons for some popular mime types

• use the outlined symbols rather than emoji by default
• support customization (guide) that will allow the developer to inject their own set of images or emoji
• This is not an immediate requirement (and React does not conform to it as well) but I wonder if we can make it convenient for people to avoid that huge dependency (maybe through some sort of a DI). As a reference, this adds 90KB
• React is not consistent with our mobile SDKs reaction types (and they have to fix it eventually). You should rather pick the ones from the current design in mobile

We might need to add a few more configs

https://stream-io.atlassian.net/browse/CFE-3 + attachment-standardization Slack channel

Question: is the expected behaviour documented?

Inputs:

• message to be displayed

Behavior:

• Display the avatar (blocked by avatar #15)
• Display message "bubble"
• Display delivery/sent date (MessageTimestamp component in React SDK)
• Display message status (sent, error etc.) (MessageStatus component in React SDK)

Out of scope

• Message group styles (e.g. only show the avatar and date for the last message in a group)
• Retry sending unsent messages on click
• Delete message
• Edit message
• Quoted message
• Emoji
• HTML messages
• Markdown parsing
• Translation

stream-chat-angular uses ngx-translate for translation. It is possible that the host application uses this library as well. In that case the host app and the SDK has to share the TranslateService, which means:

• StreamChatAngular module should have a flag that should determine how to import the TranslateModule (with or without providers)
• The host app and the SDK translations should be merged:

// Wait for loading JSON file, to avoid override issues, see https://github.com/ngx-translate/http-loader/issues/6#issuecomment-372118792
this.translateService.getTranslation('en').subscribe((t) => {
  this.streamI18nService.init('en'); // We don't need this, if we want to use custom translation keys
});
// Test that host application can use ngx-translate without any problems
this.translateService
  .get('nested.test')
  .subscribe((res) => console.log(res));

• We have to make sure that the SDK translation keys do not clash with the host app translation keys, ngx-translate supports nested objects for translations, so we could wrap the translation object with an object like streamChat for proper isolation however I was not able to make this work with the SDK + host app setup
• Write a guide about this in the documentation

• Copy the channel preview code from React SDK
• Update last message if new messages are received

• Add a configuration option to the message list where the user can provide custom message template
• Create a custom message template in the sample app
• Use the custom message template

Blocked by #16

Add action handling capabilities to the message component:

Add a new input: enabled actions: a list of actions that are enabled (possible options: edit, delete, mute, pin, flag, qoute)
If there is at least one action enabled, the user can toggle the action list with a button

The actions are handled by a standalone component called MessageActions:
Inputs:

• isSelectorOpen
• enabled actions

Behavior (MessageActions React SDK component):

• Display the enabled actions
• The actions won't have handlers yet

Organize icons, document them
Create reusable mocks