Fix: assets not showing after deployment

- all window url to asset path

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-gallery",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "type": "module",
   "files": [
     "package-dist"

src/components/AILoader.tsx

@@ -1,16 +1,18 @@
-import { Flex, Image, Skeleton } from "antd";
+import { Flex, Image, Skeleton } from 'antd';
 
 export default function AILoader() {
+  const logoLink =
+    window?.location?.hostname === 'localhost' ? '/' : `${window.location}`;
   return (
-    <Flex style={{ width: "90%" }} align="flex-start" gap={8}>
+    <Flex style={{ width: '90%' }} align="flex-start" gap={8}>
       <Image
         className="ai-icon-rotate"
-        src="/ai-icon.svg"
+        src={`${logoLink}/ai-icon.svg`}
         height={40}
         width={40}
         style={{
-          height: "2rem",
-          width: "2rem",
+          height: '2rem',
+          width: '2rem',
         }}
       />
       <Skeleton active></Skeleton>

src/components/AIMessageComponents.tsx

@@ -31,6 +31,8 @@ export function AIMessageComponents<T extends BaseMessage>({
     regenerateResponse?: boolean,
   ) => void;
 }) {
+  const logoLink =
+    window?.location?.hostname === 'localhost' ? '/' : `${window.location}`;
   const content = messages[index]?.content;
   const isLastMessage = messages?.length - 1 === index;
   const shouldShowActionCardItems = isLastMessage && showMessageActionCard;
@@ -79,7 +81,7 @@ export function AIMessageComponents<T extends BaseMessage>({
       className="ai-message-wrapper"
     >
       <Image
-        src="/ai-icon.svg"
+        src={`${logoLink}/ai-icon.svg`}
         height={40}
         width={40}
         style={{

src/components/AiMessageTable.tsx

@@ -74,6 +74,8 @@ export default function AiMessageTable({
   rowData,
   columnDefs,
 }: AiMessageTableProps) {
+  const logoLink =
+    window?.location?.hostname === 'localhost' ? '/' : `${window.location}`;
   const [ellipsis] = useState(true);
   const [showSqlModal, setShowSqlModal] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
@@ -94,7 +96,7 @@ export default function AiMessageTable({
       renderItem={(item) => (
         <List.Item>
           <List.Item.Meta
-            avatar={<Image preview={false} width={26} src={item.img} />}
+            avatar={<Image preview={false} width={26} src={`${logoLink}/${item.img}`} />}
             title={<a href="https://ant.design">{item.text}</a>}
           />
         </List.Item>