From db5c69ca763378395be4545881456d9b1fa140d1 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Wed, 25 Mar 2026 01:37:09 +0530 Subject: [PATCH] (chore)react widget: build fix --- extensions/react-widget/custom.d.ts | 9 --- .../react-widget/src/assets/dislike.svg | 4 -- extensions/react-widget/src/assets/like.svg | 4 -- .../src/components/DocsGPTWidget.tsx | 68 +++++++++++-------- extensions/react-widget/src/types/index.ts | 27 ++++++++ extensions/react-widget/tsconfig.json | 11 ++- 6 files changed, 72 insertions(+), 51 deletions(-) delete mode 100644 extensions/react-widget/src/assets/dislike.svg delete mode 100644 extensions/react-widget/src/assets/like.svg diff --git a/extensions/react-widget/custom.d.ts b/extensions/react-widget/custom.d.ts index 4914b1ec..e69de29b 100644 --- a/extensions/react-widget/custom.d.ts +++ b/extensions/react-widget/custom.d.ts @@ -1,9 +0,0 @@ -declare module "*.svg" { - import * as React from "react"; - - const ReactComponent: React.FunctionComponent< - React.SVGProps & { title?: string } - >; - - export default ReactComponent; - } \ No newline at end of file diff --git a/extensions/react-widget/src/assets/dislike.svg b/extensions/react-widget/src/assets/dislike.svg deleted file mode 100644 index ec1d24c2..00000000 --- a/extensions/react-widget/src/assets/dislike.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/extensions/react-widget/src/assets/like.svg b/extensions/react-widget/src/assets/like.svg deleted file mode 100644 index c49604ed..00000000 --- a/extensions/react-widget/src/assets/like.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index e778e5a8..61a2961f 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -6,10 +6,22 @@ import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross2Icon } from import { FEEDBACK, MESSAGE_TYPE, Query, Status, WidgetCoreProps, WidgetProps } from '../types/index'; import { fetchAnswerStreaming, sendFeedback } from '../requests/streamingApi'; import { ThemeProvider } from 'styled-components'; -import Like from '../assets/like.svg'; -import Dislike from '../assets/dislike.svg'; import MarkdownIt from 'markdown-it'; +const LikeIcon = (props: React.SVGProps) => ( + + + + +); + +const DislikeIcon = (props: React.SVGProps) => ( + + + + +); + const themes = { dark: { bg: '#222327', @@ -78,14 +90,14 @@ const openContainer = keyframes` height: 100px; } 100% { - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; border-radius: 12px; }` const closeContainer = keyframes` 0% { - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; border-radius: 12px; } 100% { @@ -96,29 +108,29 @@ const closeContainer = keyframes` const fadeIn = keyframes` from { opacity: 0; - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; transform: scale(0.9); } to { opacity: 1; transform: scale(1); - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; } ` const fadeOut = keyframes` from { opacity: 1; - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; } to { opacity: 0; transform: scale(0.9); - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height}; } ` const scaleAnimation = keyframes` @@ -164,10 +176,10 @@ const WidgetContainer = styled.div<{ $modal?: boolean }>` const StyledContainer = styled.div<{ $isOpen: boolean }>` all: initial; - max-height: ${(props) => props.theme.dimensions.maxHeight}; - max-width: ${(props) => props.theme.dimensions.maxWidth}; - width: ${(props) => props.theme.dimensions.width}; - height: ${(props) => props.theme.dimensions.height} ; + max-height: ${(props) => props.theme.dimensions!.maxHeight}; + max-width: ${(props) => props.theme.dimensions!.maxWidth}; + width: ${(props) => props.theme.dimensions!.width}; + height: ${(props) => props.theme.dimensions!.height} ; position: relative; flex-direction: column; justify-content: space-between; @@ -180,7 +192,7 @@ const StyledContainer = styled.div<{ $isOpen: boolean }>` box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1); padding: 26px 26px 0px 26px; animation: ${({ $isOpen, theme }) => - theme.dimensions.size === 'large' + theme.dimensions!.size === 'large' ? $isOpen ? css`${fadeIn} 150ms ease-in forwards` : css` ${fadeOut} 150ms ease-in forwards` @@ -452,7 +464,7 @@ const Delay = styled(DotAnimation) <{ $delay: number }>` `; const PromptContainer = styled.form` background-color: transparent; - min-height: ${props => props.theme.dimensions.size == 'large' ? '40px' : '23px'}; + min-height: ${props => props.theme.dimensions!.size == 'large' ? '40px' : '23px'}; max-height:150px; display: flex; align-items: end; @@ -462,7 +474,7 @@ const StyledTextarea = styled.textarea` box-sizing: border-box; width: 100%; border: 1px solid #686877; - padding: ${props => props.theme.dimensions.size === 'large' ? '18px 12px 14px 12px' : '8px 12px 4px 12px'}; + padding: ${props => props.theme.dimensions!.size === 'large' ? '18px 12px 14px 12px' : '8px 12px 4px 12px'}; background-color: transparent; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; @@ -475,7 +487,7 @@ const StyledTextarea = styled.textarea` white-space: pre-wrap; line-height: 1.4; text-align: left; - min-height: ${props => props.theme.dimensions.size === 'large' ? '60px' : '40px'}; + min-height: ${props => props.theme.dimensions!.size === 'large' ? '60px' : '40px'}; max-height: 140px; overflow-y: auto; scrollbar-width: thin; @@ -503,8 +515,8 @@ const StyledButton = styled.button` background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D); background-color: rgba(0, 0, 0, 0.3); border-radius: 6px; - min-width: ${props => props.theme.dimensions.size === 'large' ? '60px' : '40px'}; - height: ${props => props.theme.dimensions.size === 'large' ? '60px' : '40px'}; + min-width: ${props => props.theme.dimensions!.size === 'large' ? '60px' : '40px'}; + height: ${props => props.theme.dimensions!.size === 'large' ? '60px' : '40px'}; margin-left:8px; padding: 0px; @@ -1013,13 +1025,13 @@ export const WidgetCore = ({ e.stopPropagation() handleFeedback("LIKE", index)} }> - + /> } diff --git a/extensions/react-widget/src/types/index.ts b/extensions/react-widget/src/types/index.ts index 5c6dada3..7b62387e 100644 --- a/extensions/react-widget/src/types/index.ts +++ b/extensions/react-widget/src/types/index.ts @@ -1,3 +1,30 @@ +import 'styled-components'; + +declare module 'styled-components' { + export interface DefaultTheme { + bg: string; + text: string; + primary: { + text: string; + bg: string; + }; + secondary: { + text: string; + bg: string; + }; + /** Present only in SearchBar theme */ + name?: string; + /** Present only in DocsGPTWidget theme (always provided when these styled components render) */ + dimensions?: { + size: string; + width: string; + height: string; + maxWidth?: string; + maxHeight?: string; + }; + } +} + export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER' | 'ERROR'; export type Status = 'idle' | 'loading' | 'failed'; diff --git a/extensions/react-widget/tsconfig.json b/extensions/react-widget/tsconfig.json index 88e86216..20540869 100644 --- a/extensions/react-widget/tsconfig.json +++ b/extensions/react-widget/tsconfig.json @@ -1,9 +1,5 @@ { "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["src/*", "@/*"] - }, "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], @@ -23,8 +19,11 @@ "noUnusedLocals": false, "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, - /* The "typeRoots" configuration specifies the locations where - TypeScript looks for type definitions (.d.ts files) to + "paths": { + "@/*": ["./src/*"] + }, + /* The "typeRoots" configuration specifies the locations where + TypeScript looks for type definitions (.d.ts files) to include in the compilation process.*/ "typeRoots": ["./dist/index.d.ts", "node_modules/@types"] },