first commit

services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx

@@ -0,0 +1,120 @@
+import ChatFallbackError from '@/features/chat/components/chat-fallback-error'
+import InfiniteScroll from '@/features/chat/components/infinite-scroll'
+import MessageInput from '@/features/chat/components/message-input'
+import { useChatContext } from '@/features/chat/context/chat-context'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+import { FetchError } from '@/infrastructure/fetch-json'
+import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useUserContext } from '@/shared/context/user-context'
+import { lazy, Suspense, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { RailPanelHeader } from '../rail'
+
+const MessageList = lazy(() => import('../../../chat/components/message-list'))
+
+export const ChatIndicator = () => {
+  const { unreadMessageCount } = useChatContext()
+  if (unreadMessageCount === 0) {
+    return null
+  }
+  return <OLBadge bg="info">{unreadMessageCount}</OLBadge>
+}
+
+const Loading = () => <FullSizeLoadingSpinner delay={500} className="pt-4" />
+
+export const ChatPane = () => {
+  const { t } = useTranslation()
+  const user = useUserContext()
+  const {
+    status,
+    messages,
+    initialMessagesLoaded,
+    atEnd,
+    loadInitialMessages,
+    loadMoreMessages,
+    reset,
+    sendMessage,
+    markMessagesAsRead,
+    error,
+  } = useChatContext()
+
+  useEffect(() => {
+    if (!initialMessagesLoaded) {
+      loadInitialMessages()
+    }
+  }, [loadInitialMessages, initialMessagesLoaded])
+
+  const shouldDisplayPlaceholder = status !== 'pending' && messages.length === 0
+
+  const messageContentCount = messages.reduce(
+    (acc, { contents }) => acc + contents.length,
+    0
+  )
+
+  if (error) {
+    // let user try recover from fetch errors
+    if (error instanceof FetchError) {
+      return <ChatFallbackError reconnect={reset} />
+    }
+    throw error
+  }
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <div className="chat-panel">
+      <RailPanelHeader title={t('collaborator_chat')} />
+      <div className="chat-wrapper">
+        <aside className="chat">
+          <InfiniteScroll
+            atEnd={atEnd}
+            className="messages"
+            fetchData={loadMoreMessages}
+            isLoading={status === 'pending'}
+            itemCount={messageContentCount}
+          >
+            <div className={classNames({ 'h-100': shouldDisplayPlaceholder })}>
+              <h2 className="visually-hidden">{t('chat')}</h2>
+              <Suspense fallback={<Loading />}>
+                {status === 'pending' && <Loading />}
+                {shouldDisplayPlaceholder && <Placeholder />}
+                <MessageList
+                  messages={messages}
+                  resetUnreadMessages={markMessagesAsRead}
+                  newDesign
+                />
+              </Suspense>
+            </div>
+          </InfiniteScroll>
+          <MessageInput
+            resetUnreadMessages={markMessagesAsRead}
+            sendMessage={sendMessage}
+          />
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+function Placeholder() {
+  const { t } = useTranslation()
+  return (
+    <div className="chat-empty-state-placeholder">
+      <div>
+        <span className="chat-empty-state-icon">
+          <MaterialIcon type="forum" />
+        </span>
+      </div>
+      <div>
+        <div className="chat-empty-state-title">{t('no_messages_yet')}</div>
+        <div className="chat-empty-state-body">
+          {t('start_the_conversation_by_saying_hello_or_sharing_an_update')}
+        </div>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/chat/message.tsx

@@ -0,0 +1,60 @@
+import { MessageProps } from '@/features/chat/components/message'
+import { User } from '../../../../../../types/user'
+import { getHueForUserId } from '@/shared/utils/colors'
+import MessageContent from '@/features/chat/components/message-content'
+import classNames from 'classnames'
+
+function hue(user?: User) {
+  return user ? getHueForUserId(user.id) : 0
+}
+
+function getAvatarStyle(user?: User) {
+  return {
+    borderColor: `hsl(${hue(user)}, 85%, 40%)`,
+    backgroundColor: `hsl(${hue(user)}, 85%, 40%`,
+  }
+}
+
+function Message({ message, fromSelf }: MessageProps) {
+  return (
+    <div className="chat-message-redesign">
+      <div className="message-row">
+        <div className="message-avatar-placeholder" />
+        {!fromSelf && (
+          <div className="message-author">
+            <span>{message.user.first_name || message.user.email}</span>
+          </div>
+        )}
+      </div>
+      {message.contents.map((content, index) => (
+        <div key={index} className="message-row">
+          <>
+            {!fromSelf && index === message.contents.length - 1 ? (
+              <div className="message-avatar">
+                <div className="avatar" style={getAvatarStyle(message.user)}>
+                  {message.user.first_name?.charAt(0) ||
+                    message.user.email.charAt(0)}
+                </div>
+              </div>
+            ) : (
+              <div className="message-avatar-placeholder" />
+            )}
+            <div
+              className={classNames('message-container', {
+                'message-from-self': fromSelf,
+                'first-row-in-message': index === 0,
+                'last-row-in-message': index === message.contents.length - 1,
+              })}
+            >
+              <div className="message-content">
+                <MessageContent content={content} />
+              </div>
+            </div>
+          </>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Message