chore: remove unused and update icon names (#387)

## Changes
- Remove/Update unused files
- Update icon names

ticket: []

## Additional Notes
- 

## 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.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.

package.json

@@ -17,7 +17,6 @@
   "scripts": {
     "install:deps": "git submodule update --init --recursive && yarn install",
     "dev": "vite",
-    "build:types": "rm -rf dist; rm -rf icons; rm -rf icons; tsc; cp -R src/icons icons; cp -R src/icons dist/icons ; cp -R src/css css; cp -R src/css dist/css",
     "prebuild": "rm -rf ./dist && mv .env .env_temp || true",
     "postbuild": "mv .env_temp .env || true",
     "build": "yarn prebuild && tsc-silent -p './tsconfig.json' --suppress @ && vite build && yarn postbuild",
@@ -66,7 +65,7 @@
     "ts-pattern": "^5.1.1",
     "tsc-silent": "^1.2.2",
     "typescript": "5.0.2",
-    "vite": "5.2.10",
+    "vite": "5.2.14",
     "vite-plugin-dts": "^3.7.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.6.0"

src/components/BotProfileImage.tsx

@@ -5,7 +5,7 @@ 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';
+import BotFilledIcon from '../icons/ic-bot-filled.svg';
 
 function isMaybeFavicon(url: string) {
   if (url.length < 4) return false;
@@ -44,7 +44,7 @@ const IconContainer = styled.span<{ backgroundColor: string; size: number }>`
   align-items: center;
 }`;
 
-const Icon = styled(BotProfileIcon)<{ fill: string }>`
+const Icon = styled(BotFilledIcon)<{ fill: string }>`
   path {
     fill: ${({ fill }) => fill};
   }

src/components/ErrorContainer.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Label } from '../foundation/components/Label';
-import Icon from '../icons/icon-error.svg';
+import ErrorIcon from '../icons/ic-error.svg';
 
 const Container = styled.div`
   width: 100%;
@@ -14,7 +14,7 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.bgColor.loadingScreen};
 `;
 
-const ErrorIcon = styled(Icon)`
+const Error = styled(ErrorIcon)`
   path {
     fill: ${({ theme }) => theme.textColor.errorMessage};
   }
@@ -29,7 +29,7 @@ const ErrorMessage = styled(Label)`
 export default function ErrorContainer({ errorMessage }: { errorMessage: string }) {
   return (
     <Container>
-      <ErrorIcon />
+      <Error />
       <ErrorMessage className="sendbird-input-label" type={'body1'} color={'onbackground2'}>
         {errorMessage || 'Something went wrong'}
       </ErrorMessage>

src/components/LoadingScreen.tsx

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 
-import SpinIcon from '../icons/spin-icon.svg';
+import SpinnerIcon from '../icons/ic-spinner.svg';
 
 const spinner = keyframes`
   0% {
@@ -39,7 +39,7 @@ export default function LoadingScreen() {
   return (
     <Container>
       <IconContainer>
-        <SpinIcon width="50px" height="50px" />
+        <SpinnerIcon width="50px" height="50px" />
       </IconContainer>
     </Container>
   );

src/components/MessageDataContent.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 import { useConstantState } from '../context/ConstantContext';
-import ChevronRightIcon from '../icons/chevron-right.svg';
-import EllipsisIcon from '../icons/icon-ellipsis.svg';
-import MessageBubbleIcon from '../icons/icon-message-bubble.svg';
+import ChevronRightIcon from '../icons/ic-chevron-right.svg';
+import EllipsisIcon from '../icons/ic-ellipsis.svg';
+import MessageIcon from '../icons/ic-message.svg';
 import { FunctionCallData } from '../types';
 import { noop } from '../utils';
 
@@ -121,7 +121,7 @@ const AdditionalInfo = styled.div`
   margin-top: 5px;
 `;
 
-const Icon = styled.div`
+const IconContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -239,9 +239,9 @@ export default function MessageDataContent({ messageData }: MessageDataContentPr
       <DataContainer>
         {workflow && (
           <DataRow>
-            <Icon>
-              <MessageBubbleIcon id="aichatbot-widget-ellipsis-icon" />
-            </Icon>
+            <IconContainer>
+              <MessageIcon />
+            </IconContainer>
             <Text>{workflow.name}</Text>
             <LineHeightWrapper>
               <WorkFlowType>{workflow.type}</WorkFlowType>
@@ -250,17 +250,17 @@ export default function MessageDataContent({ messageData }: MessageDataContentPr
         )}
         {functionCalls.map((renderData, index) => (
           <DataRow key={index}>
-            <Icon>
-              <EllipsisIcon id="aichatbot-widget-message-bubble-icon" />
-            </Icon>
+            <IconContainer>
+              <EllipsisIcon />
+            </IconContainer>
             <Text>{renderData.name}</Text>
             <ViewDetails onClick={renderData.onClick}>
-              <TextButton>View details</TextButton>
-              <ChevronRightIcon id="aichatbot-widget-chevron-right-icon" />
+              <TextButton>{'View details'}</TextButton>
+              <ChevronRightIcon />
             </ViewDetails>
           </DataRow>
         ))}
-        <AdditionalInfo>Only visible in the dashboard widget</AdditionalInfo>
+        <AdditionalInfo>{'Only visible in the dashboard widget'}</AdditionalInfo>
       </DataContainer>
     </Root>
   );

src/components/SourceContainer.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import OpenLinkIcon from '../icons/open-link-icon.svg';
+import OpenIcon from '../icons/ic-open.svg';
 
 const Root = styled.div`
   display: flex;
@@ -37,7 +37,7 @@ const SourceItem = styled.div`
   gap: 16px;
 `;
 
-const IconLink = styled.a`
+const IconContainer = styled.a`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -72,13 +72,13 @@ export default function SourceContainer(props: Props) {
       <RootTitle>Source</RootTitle>
       <SourceItem>
         <div>
-          <SourceTitle href={source.source} id="openLinkText" target="_blank">
+          <SourceTitle href={source.source} target="_blank">
             {source.title}
           </SourceTitle>
         </div>
-        <IconLink href={source.source} id="openLinkIcon" target="_blank" aria-label="Source link">
-          <OpenLinkIcon width={'15px'} height={'15px'} />
-        </IconLink>
+        <IconContainer href={source.source} target="_blank" aria-label="Source link">
+          <OpenIcon width={'15px'} height={'15px'} />
+        </IconContainer>
       </SourceItem>
     </Root>
   );

src/components/chat/ui/ChatHeader.tsx

@@ -8,8 +8,8 @@ import { useWidgetState } from '../../../context/WidgetStateContext';
 import { themedColors } from '../../../foundation/colors/css';
 import { Label } from '../../../foundation/components/Label';
 import CloseIcon from '../../../icons/ic-close.svg';
+import CollapseIcon from '../../../icons/ic-collapse.svg';
 import ExpandIcon from '../../../icons/ic-expand.svg';
-import CollapsedIcon from '../../../icons/icon-collapse.svg';
 import BotProfileImage from '../../BotProfileImage';
 import BetaLogo from '../../ui/BetaLogo';
 import { useChatContext } from '../context/ChatProvider';
@@ -87,7 +87,7 @@ const RefreshButton = ({ size, onClick }: ButtonProps) => {
 
 const ExpandButton = ({ size }: ButtonProps) => {
   const { isExpanded, setIsExpanded } = useWidgetState();
-  const Icon = isExpanded ? CollapsedIcon : ExpandIcon;
+  const Icon = isExpanded ? CollapseIcon : ExpandIcon;
 
   return (
     <IconButton id={elementIds.expandIcon} aria-label={'expand'} onClick={() => setIsExpanded(!isExpanded)}>

src/components/messages/CarouselMessage.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import styled, { useTheme } from 'styled-components';
 
 import { useConstantState } from '../../context/ConstantContext';
-import ChevronLeft from '../../icons/chevron-left.svg';
-import ChevronRight from '../../icons/chevron-right.svg';
+import ChevronLeft from '../../icons/ic-chevron-left.svg';
+import ChevronRight from '../../icons/ic-chevron-right.svg';
 import { WidgetCarouselItem } from '../../types';
 import { openURL } from '../../utils';
 import { SnapCarousel } from '../ui/SnapCarousel';

src/components/ui/WidgetButton.tsx

@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 
 import { getColorBasedOnSaturation } from '../../colors';
 import { elementIds } from '../../const';
-import BotOutlinedIcon from '../../icons/bot-outlined.svg';
-import ChevronDownIcon from '../../icons/chevron-down.svg';
+import BotOutlinedIcon from '../../icons/ic-bot-outlined.svg';
+import ChevronDownIcon from '../../icons/ic-chevron-down.svg';
 
 const buttonEffect = css`
   &:hover {

src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-declare const APP_VERSION: string;

yarn.lock

@@ -3307,7 +3307,7 @@ __metadata:
     ts-pattern: "npm:^5.1.1"
     tsc-silent: "npm:^1.2.2"
     typescript: "npm:5.0.2"
-    vite: "npm:5.2.10"
+    vite: "npm:5.2.14"
     vite-plugin-dts: "npm:^3.7.0"
     vite-plugin-svgr: "npm:^4.2.0"
     vitest: "npm:^1.6.0"
@@ -18233,9 +18233,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:5.2.10":
-  version: 5.2.10
-  resolution: "vite@npm:5.2.10"
+"vite@npm:5.2.14":
+  version: 5.2.14
+  resolution: "vite@npm:5.2.14"
   dependencies:
     esbuild: "npm:^0.20.1"
     fsevents: "npm:~2.3.3"
@@ -18269,7 +18269,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/d50630ac8de807a6185cd9b5763b3969b2950a454cf6a4482f3780f183865e8d6f7e3aa57dd70ede1c493aaa861efb25b43562287efbcf8b471b7f3b88857a33
+  checksum: 10c0/0ed7a8f8274d14bbd01be2ca5c7c539f915e75d884a97f6051cdf494997832bc02c7db9fc9c5ba8f057d5fece28a3bf215761815e6014e843abe2c38a9424fb7
   languageName: node
   linkType: hard