[AC-4071] feat: update bot profile style for favicon case (#379)

## Changes
- update bot profile style for favicon case

ticket: [AC-4071]

## Additional Notes
- figma:
https://www.figma.com/design/KgpsIWkbP3qHdPgRgJaRPW/2409_Product-bumper(Onboarding%2FDashboard)_WIP?node-id=905-24921&node-type=frame&m=dev
-
![image](https://github.com/user-attachments/assets/90f4eaef-1f4c-46e1-a241-76107ffc16b8)


## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [x] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [x] **[Required]** Unnecessary comments/debugging code have been
removed.
- [x] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [x] Ensure the ticket has been updated with the sprint, status, and
story points.


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

src/components/BotProfileImage.tsx

@@ -4,9 +4,35 @@ import { useTheme } from 'styled-components';
 import { useChatContext } from './chat/context/ChatProvider';
 import { getColorBasedOnSaturation } from '../colors';
 import { useConstantState } from '../context/ConstantContext';
+import { themedColors } from '../foundation/colors/css';
 import BotProfileIcon from '../icons/bot-profile-image-small.svg';
 
-const Container = styled.span<{ backgroundColor: string; size: number }>`
+function isMaybeFavicon(url: string) {
+  if (url.length < 4) return false;
+  const fileName = url.substring(url.lastIndexOf('/') + 1);
+  return fileName.startsWith('fav_');
+}
+
+const FaviconContainer = styled.div<{ size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${themedColors.bg2};
+`;
+
+const FaviconImage = styled.img<{ size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  box-sizing: border-box;
+  object-fit: contain;
+  padding: 19%;
+`;
+
+const IconContainer = styled.span<{ backgroundColor: string; size: number }>`
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
   background: ${({ backgroundColor }) => backgroundColor};
@@ -24,26 +50,31 @@ const Icon = styled(BotProfileIcon)<{ fill: string }>`
   }
 `;
 
-type Props = {
-  size: number;
-};
-
-function BotProfileImage({ size }: Props) {
+function BotProfileImage({ size }: { size: number }) {
   const theme = useTheme();
 
   const { botStudioEditProps } = useConstantState();
   const { botUser } = useChatContext();
   const { botInfo } = botStudioEditProps ?? {};
+
   const profileUrl = botInfo?.profileUrl ?? botUser?.profileUrl;
 
   if (profileUrl) {
+    if (isMaybeFavicon(profileUrl)) {
+      return (
+        <FaviconContainer size={size}>
+          <FaviconImage size={size} src={profileUrl} alt={'bot profile'} />
+        </FaviconContainer>
+      );
+    }
+
     return <img src={profileUrl} style={{ borderRadius: '50%', width: size, height: size }} alt={'bot profile'} />;
   }
 
   return (
-    <Container size={size} backgroundColor={theme.accentColor}>
+    <IconContainer size={size} backgroundColor={theme.accentColor}>
       <Icon fill={getColorBasedOnSaturation(theme.accentColor)} />
-    </Container>
+    </IconContainer>
   );
 }
 

src/main.tsx

@@ -8,12 +8,24 @@ const WidgetApp = () => {
   const appId = urlParams.get('app_id') ?? import.meta.env.VITE_CHAT_WIDGET_APP_ID;
   const botId = urlParams.get('bot_id') ?? import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
   const locale = urlParams.get('locale') ?? undefined;
+  const region = urlParams.get('region') ?? undefined;
+
+  function getHost(region?: string) {
+    if (region && region.startsWith('no')) {
+      return { apiHost: `https://api-${region}.sendbirdtest.com`, wsHost: `wss://ws-${region}.sendbirdtest.com` };
+    }
+    return {
+      apiHost: region ? `https://api-cf-${region}.sendbird.com` : undefined,
+      wsHost: undefined,
+    };
+  }
 
   if (!appId || !botId) {
     return null;
   }
 
-  return <App applicationId={appId} botId={botId} locale={locale} />;
+  const host = getHost(region);
+  return <App applicationId={appId} botId={botId} locale={locale} apiHost={host.apiHost} wsHost={host.wsHost} />;
 };
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(