discourse/plugins/chat/assets/stylesheets/common/chat-thread.scss

.chat-thread {
  display: flex;
  flex-direction: column;
  position: relative;
  @include chat-height(var(--chat-header-expanded-offset, 0px));

  &__body {
    overflow-y: scroll;
    @include chat-scrollbar();
    box-sizing: border-box;
    flex-grow: 1;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column-reverse;
    transition: padding-top 0.2s ease-in-out;
  }
}
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel 2023-02-14 11:38:41 +10:00			`.chat-thread {`
			`display: flex;`
			`flex-direction: column;`
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi 2023-04-25 10:23:03 +02:00			`position: relative;`
FIX: Make long thread titles readable (#25456) When reaching the top of a thread, the full thread title will be displayed if it was too long to fit. It works in mobile, drawer mode, and fullscreen. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-30 10:18:00 -03:00			`@include chat-height(var(--chat-header-expanded-offset, 0px));`
FIX: various fixes following channel height changes (#21553) - apply height on threads list - apply height on thread - correctly applies env(safe-area-inset-bottom) 2023-05-15 14:39:11 +02:00
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2023-04-06 23:19:52 +10:00			`&__body {`
			`overflow-y: scroll;`
			`@include chat-scrollbar();`
			`box-sizing: border-box;`
			`flex-grow: 1;`
			`overscroll-behavior: contain;`
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel 2023-02-14 11:38:41 +10:00			`display: flex;`
FEATURE: thread pagination (#22624) Prior to this commit we were loading a large number of thread messages without any pagination. This commit attempts to fix this and also improves the following points: - code sharing between channels and threads: Attempts to reuse/share the code use in channels for threads. To make it possible part of this code has been extracted in dedicated helpers or has been improved to reduce the duplication needed. Examples of extracted helpers: - `stackingContextFix`: the ios hack for rendering bug when momentum scrolling is interrupted - `scrollListToMessage`, `scrollListToTop`, `scrollListToBottom`: a series of helper to correctly scroll to a specific position in the list of messages - better general performance of listing messages: One of the main changes which has been made is to remove the computation of visible message during scroll, it will only happen when needed (update last read for example). This constant recomputation of `message.visible` on intersection observer event while scrolling was consuming a lot of CPU time. 2023-07-27 09:57:03 +02:00			`flex-direction: column-reverse;`
FIX: Make long thread titles readable (#25456) When reaching the top of a thread, the full thread title will be displayed if it was too long to fit. It works in mobile, drawer mode, and fullscreen. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-30 10:18:00 -03:00			`transition: padding-top 0.2s ease-in-out;`
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel 2023-02-14 11:38:41 +10:00			`}`
			`}`