[AC-2704] feat: widget modularization - phase 1 (#305)

ticket: [AC-2704]

[AC-2704]:
https://sendbird.atlassian.net/browse/AC-2704?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bang9

package.json

@@ -34,13 +34,18 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
+    "@linaria/atomic": "^6.2.0",
+    "@linaria/core": "^6.2.0",
+    "@linaria/react": "^6.2.1",
     "@types/dompurify": "^3.0.5",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "@wyw-in-js/babel-preset": "^0.5.3",
+    "@wyw-in-js/vite": "^0.5.3",
     "date-fns": "^3.6.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",

packages/self-service/scripts/generateIndex.js

@@ -6,7 +6,7 @@ export function generateIndexFile(version) {
     process.exit(1);
   }
 
-  const content = `import(\`/${version}/output.js\`).then(() => console.log("AI chatbot module has been successfully loaded"));`;
+  const content = `import('./${version}/output.js').then(() => console.log("AI chatbot module has been successfully loaded"));`;
 
   fs.writeFileSync('dist/index.js', content);
   fs.cpSync('playground', 'dist/playground', { recursive: true });

packages/self-service/vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
       output: {
         manualChunks: undefined,
         entryFileNames: `output.js`,
-        chunkFileNames: `[name].js`,
+        chunkFileNames: `[hash].js`,
         assetFileNames: `[name].[ext]`,
       },
     },

packages/uikit

@@ -1,23 +1,22 @@
-import { Feedback, FeedbackRating } from '@sendbird/chat/message';
+import { BaseMessage, Feedback, FeedbackRating } from '@sendbird/chat/message';
 import { useReducer } from 'react';
 
 import FeedbackIconButton from '@uikit/ui/FeedbackIconButton';
-import Icon, { IconTypes } from '@uikit/ui/Icon';
 import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
 import MessageFeedbackModal from '@uikit/ui/MessageFeedbackModal';
 import MobileFeedbackMenu from '@uikit/ui/MobileFeedbackMenu';
-import { CoreMessageType } from '@uikit/utils';
 
 import { elementIds } from '../const';
 import { useConstantState } from '../context/ConstantContext';
+import { Icon } from '../foundation/components/Icon';
 
 type State = Partial<{
   errorText: string;
   modalVisible: boolean;
   menuVisible: boolean;
 }>;
 
-function BotMessageFeedback({ message }: { message: CoreMessageType }) {
+function BotMessageFeedback({ message }: { message: BaseMessage }) {
   const { stringSet } = useConstantState();
   const [state, setState] = useReducer((p: State, a: State) => ({ ...p, ...a }), {
     errorText: '',
@@ -50,7 +49,7 @@ function BotMessageFeedback({ message }: { message: CoreMessageType }) {
           }}
           disabled={!!message.myFeedback && message.myFeedback.rating !== FeedbackRating.GOOD}
         >
-          <Icon type={IconTypes.FEEDBACK_LIKE} width="24px" height="24px" />
+          <Icon type={'feedback-like'} size={24} />
         </FeedbackIconButton>
         <FeedbackIconButton
           aria-label="Dislike the bot answer"
@@ -70,7 +69,7 @@ function BotMessageFeedback({ message }: { message: CoreMessageType }) {
           }}
           disabled={!!message.myFeedback && message.myFeedback.rating !== FeedbackRating.BAD}
         >
-          <Icon type={IconTypes.FEEDBACK_DISLIKE} width="24px" height="24px" />
+          <Icon type={'feedback-dislike'} size={24} />
         </FeedbackIconButton>
       </div>
       {
@@ -104,7 +103,7 @@ function BotMessageFeedback({ message }: { message: CoreMessageType }) {
             isMobile
             rootElementId={elementIds.widgetWindow}
             selectedFeedback={message.myFeedback.rating}
-            message={message}
+            message={message as any}
             onUpdate={async (selectedFeedback, comment) => {
               if (message.myFeedback) {
                 try {

src/components/BotMessageFeedback.tsx

@@ -1,20 +1,17 @@
-import { User } from '@sendbird/chat';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
-import Avatar from '@uikit/ui/Avatar';
-import Label, { LabelColors, LabelTypography } from '@uikit/ui/Label';
-
 import BotProfileImage from './BotProfileImage';
+import { useChatContext } from './chat/context/ChatProvider';
 import { DefaultSentTime, FullBodyContainer, WideSentTime } from './MessageComponent';
 import { useConstantState } from '../context/ConstantContext';
+import { Label } from '../foundation/components/Label';
 import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
 
 const Root = styled.span`
   display: flex;
   flex-direction: row;
   align-items: flex-end;
-  margin-bottom: 6px;
   gap: 8px;
   position: relative;
 `;
@@ -40,14 +37,11 @@ const EmptyImageContainer = styled.div`
 `;
 
 type Props = {
-  botUser?: User;
   createdAt?: number;
   messageData?: string;
   bodyComponent: ReactNode;
   chainTop?: boolean;
   chainBottom?: boolean;
-  messageCount?: number;
-  zIndex?: number;
   messageFeedback?: ReactNode;
   wideContainer?: boolean;
 };
@@ -59,46 +53,33 @@ const HEIGHTS = {
 };
 
 export default function BotMessageWithBodyInput(props: Props) {
+  const { botUser } = useChatContext();
   const { botStudioEditProps, dateLocale } = useConstantState();
 
-  const {
-    botUser,
-    createdAt,
-    bodyComponent,
-    messageCount,
-    zIndex,
-    chainTop,
-    chainBottom,
-    messageFeedback,
-    wideContainer = false,
-  } = props;
+  const { createdAt, bodyComponent, chainTop, chainBottom, messageFeedback, wideContainer = false } = props;
 
   const profilePaddingBottom = (messageFeedback ? HEIGHTS.FEEDBACK : 0) + (wideContainer ? HEIGHTS.TIMESTAMP : 0);
 
   const nonChainedMessage = chainTop == null && chainBottom == null;
-  const displayProfileImage = nonChainedMessage || chainBottom;
   const displaySender = nonChainedMessage || chainTop;
+  const displayProfileImage = nonChainedMessage || chainBottom;
   const { profileUrl, nickname } = botStudioEditProps?.botInfo ?? {};
   const botProfileUrl = profileUrl ?? botUser?.profileUrl;
   const botNickname = nickname ?? botUser?.nickname;
 
   return (
-    <Root style={{ zIndex: messageCount === 1 && zIndex ? zIndex : 0 }}>
+    <Root>
       {displayProfileImage ? (
         <div style={{ paddingBottom: profilePaddingBottom }}>
-          {botProfileUrl != null && botProfileUrl != '' ? (
-            <Avatar src={botProfileUrl} alt="botProfileImage" height="28px" width="28px" />
-          ) : (
-            <BotProfileImage width={28} height={28} iconWidth={16} iconHeight={16} />
-          )}
+          <BotProfileImage size={28} profileUrl={botProfileUrl} />
         </div>
       ) : (
         <EmptyImageContainer />
       )}
       <FullBodyContainer>
         {displaySender && (
           <Sender>
-            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
+            <Label type={'caption2'} color={'onbackground2'}>
               {botNickname}
             </Label>
           </Sender>

src/components/BotMessageWithBodyInput.tsx

@@ -1,39 +1,43 @@
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
+import { useTheme } from 'styled-components';
 
 import { getColorBasedOnSaturation } from '../colors';
-import Icon from '../icons/bot-profile-image-small.svg';
+import BotProfileIcon from '../icons/bot-profile-image-small.svg';
 
-interface ImageProps {
-  width: number;
-  height: number;
-  iconWidth: number;
-  iconHeight: number;
-}
-const StyledBotImage = styled.span<ImageProps>`
-  width: ${({ width }) => `${width}px`};
-  height: ${({ height }) => `${height}px`};
-  background: ${({ theme }) => theme.accentColor};
+const Container = styled.span<{ backgroundColor: string; size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  background: ${({ backgroundColor }) => backgroundColor};
+  box-sizing: border-box;
+  padding: 6px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }`;
 
-const ChatBotIcon = styled(Icon)`
+const Icon = styled(BotProfileIcon)<{ fill: string }>`
   path {
-    fill: ${({ theme }) => getColorBasedOnSaturation(theme.accentColor)};
+    fill: ${({ fill }) => fill};
   }
 `;
-const StyledBotIcon = styled(ChatBotIcon).attrs(({ width, height }) => ({
-  width,
-  height,
-}))``;
 
-function BotProfileImage(props: ImageProps) {
+type Props = {
+  profileUrl?: string;
+  size: number;
+};
+
+function BotProfileImage({ size, profileUrl }: Props) {
+  const theme = useTheme();
+
+  if (profileUrl) {
+    return <img src={profileUrl} style={{ borderRadius: '50%', width: size, height: size }} alt={'bot profile'} />;
+  }
+
   return (
-    <StyledBotImage {...props}>
-      <StyledBotIcon width={props.iconWidth} height={props.iconHeight} />
-    </StyledBotImage>
+    <Container size={size} backgroundColor={theme.accentColor}>
+      <Icon fill={getColorBasedOnSaturation(theme.accentColor)} />
+    </Container>
   );
 }
 

src/components/BotProfileImage.tsx

@@ -9,9 +9,7 @@ const Root = styled.div<{ enableEmojiFeedback: boolean }>`
   display: flex;
   justify-content: flex-end;
   align-items: end;
-  margin-bottom: 6px;
   gap: 4px;
-  margin-top: ${({ enableEmojiFeedback }) => (enableEmojiFeedback ? '16px' : '0')};
 `;
 
 type Props = {