Feat: bundle images with components

- remove relative paths causing errors
HousewareHQ · Sep 2, 2024 · 9638280 · 9638280
1 parent 451bec8
commit 9638280
Show file tree

Hide file tree

Showing 11 changed files with 20,772 additions and 20,774 deletions.
diff --git a/package-dist/common/HousewareBranding.d.ts b/package-dist/common/HousewareBranding.d.ts
@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const HousewareBranding: React.FC;
diff --git a/package-dist/ui-gallery.es.js b/package-dist/ui-gallery.es.js
diff --git a/package-dist/ui-gallery.umd.js b/package-dist/ui-gallery.umd.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui-gallery",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "files": [
     "package-dist"

diff --git a/src/assets/ai-icon.svg b/src/assets/ai-icon.svg
diff --git a/src/assets/app-logo.png b/src/assets/app-logo.png
diff --git a/src/components/AILoader.tsx b/src/components/AILoader.tsx
@@ -1,13 +1,12 @@
 import { Flex, Image, Skeleton } from 'antd';
+import aiIcon from '../assets/ai-icon.svg';
 
 export default function AILoader() {
-  const logoLink =
-    window?.location?.hostname === 'localhost' ? '' : `${location.href.replace(location.search, '')}`;
   return (
     <Flex style={{ width: '90%' }} align="flex-start" gap={8}>
       <Image
         className="ai-icon-rotate"
-        src={`${logoLink}/ai-icon.svg`}
+        src={aiIcon}
         height={40}
         width={40}
         style={{

diff --git a/src/components/AIMessageComponents.tsx b/src/components/AIMessageComponents.tsx
@@ -10,7 +10,7 @@ import {
   CustomMessageComponentProp,
 } from './chatScreen/ChatScreenPA';
 import MessageActionCard from './MessageActionCard';
-
+import aiIcon from '../assets/ai-icon.svg';
 
 export type AIMessageComponentsProps<T extends BaseMessage> = {
   index: number;
@@ -34,8 +34,6 @@ export function AIMessageComponents<T extends BaseMessage>({
   customMessageComponent,
   customMessageActionCardItem,
 }: AIMessageComponentsProps<T>) {
-  const logoLink =
-    window?.location?.hostname === 'localhost' ? '' : `${location.href.replace(location.search, '')}`;
   const content = messages[index]?.content;
   const isLastMessage = messages?.length - 1 === index;
   const shouldShowActionCardItems = isLastMessage && showMessageActionCard;
@@ -84,7 +82,7 @@ export function AIMessageComponents<T extends BaseMessage>({
       className="ai-message-wrapper"
     >
       <Image
-        src={`${logoLink}/ai-icon.svg`}
+        src={aiIcon}
         height={40}
         width={40}
         style={{

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

diff --git a/src/components/common/HousewareBranding.tsx b/src/components/common/HousewareBranding.tsx
@@ -1,36 +1,29 @@
-import { LinkedinLogo, XLogo, YoutubeLogo } from "@phosphor-icons/react";
-import { Button, Flex, Image, Typography } from "antd";
-import * as React from "react";
+import { LinkedinLogo, XLogo, YoutubeLogo } from '@phosphor-icons/react';
+import { Button, Flex, Image, Typography } from 'antd';
+import * as React from 'react';
+import housewareLogo from '../../assets/app-logo.png';
 
 export const HousewareBranding: React.FC = () => {
-  const logoLink =
-    window?.location?.hostname === "localhost" ? "/" : `${window.location}/`;
-
   return (
     <>
       <Flex
         align="center"
         gap={8}
         style={{
-          position: "absolute",
+          position: 'absolute',
           top: 16,
           left: 16,
-          cursor: "pointer",
+          cursor: 'pointer',
         }}
         onClick={() => {
-          window.open("https://houseware.io", "_blank");
+          window.open('https://houseware.io', '_blank');
         }}
       >
-        <Image
-          src={`${logoLink}app-logo.png`}
-          height={30}
-          width={30}
-          preview={false}
-        />
+        <Image src={housewareLogo} height={30} width={30} preview={false} />
         <Typography.Title
           style={{
-            fontFamily: "Libre Franklin, sans-serif",
-            fontSize: "1rem",
+            fontFamily: 'Libre Franklin, sans-serif',
+            fontSize: '1rem',
             margin: 0,
             fontWeight: 600,
           }}
@@ -42,7 +35,7 @@ export const HousewareBranding: React.FC = () => {
       <Flex
         vertical
         style={{
-          position: "absolute",
+          position: 'absolute',
           bottom: 16,
           right: 16,
           zIndex: 1,
@@ -54,13 +47,13 @@ export const HousewareBranding: React.FC = () => {
           shape="circle"
           type="text"
           onClick={() => {
-            window.open("https://x.com/gethouseware", "_blank");
+            window.open('https://x.com/gethouseware', '_blank');
           }}
           icon={
             <XLogo
-              size={"1.5rem"}
+              size={'1.5rem'}
               weight="duotone"
-              color={"var(--secondary-text)"}
+              color={'var(--secondary-text)'}
             />
           }
         />
@@ -70,15 +63,15 @@ export const HousewareBranding: React.FC = () => {
           type="text"
           onClick={() => {
             window.open(
-              "https://www.linkedin.com/company/gethouseware",
-              "_blank"
+              'https://www.linkedin.com/company/gethouseware',
+              '_blank',
             );
           }}
           icon={
             <LinkedinLogo
-              size={"1.5rem"}
+              size={'1.5rem'}
               weight="duotone"
-              color={"var(--secondary-text)"}
+              color={'var(--secondary-text)'}
             />
           }
         />
@@ -87,13 +80,13 @@ export const HousewareBranding: React.FC = () => {
           shape="circle"
           type="text"
           onClick={() => {
-            window.open("https://www.youtube.com/@getHouseware", "_blank");
+            window.open('https://www.youtube.com/@getHouseware', '_blank');
           }}
           icon={
             <YoutubeLogo
-              size={"1.5rem"}
+              size={'1.5rem'}
               weight="duotone"
-              color={"var(--secondary-text)"}
+              color={'var(--secondary-text)'}
             />
           }
         />

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -2,3 +2,8 @@ declare module "*.css" {
   const content: { [className: string]: string };
   export default content;
 }
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}