From a5e2f82da047b6230de5022c1c448c5509239bf6 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Thu, 24 Oct 2024 15:57:47 +0900
Subject: [PATCH 1/2] feat: update bot profile style for favicon case

---
 src/components/BotProfileImage.tsx | 47 +++++++++++++++++++++++++-----
 src/main.tsx                       | 14 ++++++++-
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/components/BotProfileImage.tsx b/src/components/BotProfileImage.tsx
index 8eb53ca42..cfe2f1411 100644
--- a/src/components/BotProfileImage.tsx
+++ b/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 /fav_|favicon|\.ico/.test(fileName);
+}
+
+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>
   );
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index 22a1ea80b..5c0d73ced 100644
--- a/src/main.tsx
+++ b/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(

From 7b818b577d8058f4c18895598199333bc6160485 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Thu, 24 Oct 2024 20:16:31 +0900
Subject: [PATCH 2/2] chore: remove fallback case for testing

---
 src/components/BotProfileImage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BotProfileImage.tsx b/src/components/BotProfileImage.tsx
index cfe2f1411..a99f570d3 100644
--- a/src/components/BotProfileImage.tsx
+++ b/src/components/BotProfileImage.tsx
@@ -10,7 +10,7 @@ import BotProfileIcon from '../icons/bot-profile-image-small.svg';
 function isMaybeFavicon(url: string) {
   if (url.length < 4) return false;
   const fileName = url.substring(url.lastIndexOf('/') + 1);
-  return /fav_|favicon|\.ico/.test(fileName);
+  return fileName.startsWith('fav_');
 }
 
 const FaviconContainer = styled.div<{ size: number }>`