From 821335b13baba860238e3bbfe886a8e706e53a36 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:12:13 +0200 Subject: [PATCH 01/17] chore: Remove unused Tooltip component --- copilot-widget/lib/components/ToolTip.tsx | 42 ----------------- copilot-widget/package.json | 1 - copilot-widget/pnpm-lock.yaml | 56 ----------------------- 3 files changed, 99 deletions(-) delete mode 100644 copilot-widget/lib/components/ToolTip.tsx diff --git a/copilot-widget/lib/components/ToolTip.tsx b/copilot-widget/lib/components/ToolTip.tsx deleted file mode 100644 index a2da719fd..000000000 --- a/copilot-widget/lib/components/ToolTip.tsx +++ /dev/null @@ -1,42 +0,0 @@ -"use client"; -import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import { forwardRef, ComponentProps } from "react"; -import cn from "../utils/cn"; - -const TooltipTrigger = TooltipPrimitive.Trigger; -const TooltipRoot = TooltipPrimitive.Root; - -const Tooltip = forwardRef( - ({ children, ...rest }: ComponentProps, ref) => { - return ( - - {children} - - ); - } -); - -Tooltip.displayName = "ToolTip"; -const TooltipContent = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - arrowClassName?: string; - } ->(({ className, children, sideOffset = 0, ...props }, ref) => ( - - {children} - -)); -TooltipContent.displayName = TooltipPrimitive.Content.displayName; - -export { Tooltip, TooltipTrigger, TooltipContent }; diff --git a/copilot-widget/package.json b/copilot-widget/package.json index 51c1f7017..2f65fdc6e 100644 --- a/copilot-widget/package.json +++ b/copilot-widget/package.json @@ -20,7 +20,6 @@ "devDependencies": { "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-tooltip": "^1.0.7", "@tailwindcss/typography": "^0.5.10", "@types/node": "^20.11.14", "@types/react": "^18.2.48", diff --git a/copilot-widget/pnpm-lock.yaml b/copilot-widget/pnpm-lock.yaml index 5d48ad173..0ac793be7 100644 --- a/copilot-widget/pnpm-lock.yaml +++ b/copilot-widget/pnpm-lock.yaml @@ -31,9 +31,6 @@ devDependencies: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-tooltip': - specifier: ^1.0.7 - version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) '@tailwindcss/typography': specifier: ^0.5.10 version: 0.5.10(tailwindcss@3.4.1) @@ -1200,38 +1197,6 @@ packages: react: 18.2.0 dev: true - /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.48)(react@18.2.0) - '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.48 - '@types/react-dom': 18.2.18 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.48)(react@18.2.0): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: @@ -1320,27 +1285,6 @@ packages: react: 18.2.0 dev: true - /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.48 - '@types/react-dom': 18.2.18 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@radix-ui/rect@1.0.1: resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} dependencies: From bf5cd706acd14dddbfa04b80f64bae2f1553dda8 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:13:06 +0200 Subject: [PATCH 02/17] refactor: Remove unused Tooltip component and its related code --- copilot-widget/lib/components/Messages.tsx | 12 +------ .../lib/components/VoiceRecorder.tsx | 34 +++++++------------ 2 files changed, 14 insertions(+), 32 deletions(-) diff --git a/copilot-widget/lib/components/Messages.tsx b/copilot-widget/lib/components/Messages.tsx index 5c053c07c..2f6fe03fd 100644 --- a/copilot-widget/lib/components/Messages.tsx +++ b/copilot-widget/lib/components/Messages.tsx @@ -4,7 +4,6 @@ import { formatTimeFromTimestamp } from "../utils/time"; import { getLast, isEmpty } from "@lib/utils/utils"; import { useConfigData } from "@lib/contexts/ConfigData"; import { useChatState } from "@lib/contexts/statefulMessageHandler"; -import { Tooltip, TooltipContent, TooltipTrigger } from "./ToolTip"; export function BotIcon({ error }: { error?: boolean }) { const config = useConfigData(); @@ -48,16 +47,7 @@ function UserAvatar() { function User() { const config = useConfigData(); - return ( - - - - - - - ); + return ; } export function BotMessageWrapper({ diff --git a/copilot-widget/lib/components/VoiceRecorder.tsx b/copilot-widget/lib/components/VoiceRecorder.tsx index 65389cc28..40748486c 100644 --- a/copilot-widget/lib/components/VoiceRecorder.tsx +++ b/copilot-widget/lib/components/VoiceRecorder.tsx @@ -1,5 +1,4 @@ import { MicIcon, Square } from "lucide-react"; -import { Tooltip, TooltipContent, TooltipTrigger } from "./ToolTip"; import { useAxiosInstance } from "@lib/contexts/axiosInstance"; import { now } from "@lib/utils/time"; import { useEffect } from "react"; @@ -53,25 +52,18 @@ export function VoiceRecorder({ } return ( - - - {get("recording")} {recordingTime}s - - - - - + ); } From be4f61e191f0a32d5264aeb8515fde64f41e5392 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:18:16 +0200 Subject: [PATCH 03/17] add debug flag --- copilot-widget/lib/components/ChatHeader.tsx | 47 ++++---------------- 1 file changed, 8 insertions(+), 39 deletions(-) diff --git a/copilot-widget/lib/components/ChatHeader.tsx b/copilot-widget/lib/components/ChatHeader.tsx index 73f75a1cf..d926a79d4 100644 --- a/copilot-widget/lib/components/ChatHeader.tsx +++ b/copilot-widget/lib/components/ChatHeader.tsx @@ -1,5 +1,5 @@ import { useWidgetState } from "../contexts/WidgetState"; -import { AlertTriangle, CircleDashed, X } from "lucide-react"; +import { AlertTriangle, X } from "lucide-react"; import { Dialog, DialogClose, @@ -11,7 +11,6 @@ import { Button } from "./Button"; import { useInitialData } from "@lib/hooks/useInitialData"; import { useLang } from "@lib/contexts/LocalesProvider"; import { useConfigData } from "@lib/contexts/ConfigData.tsx"; -import { useSocket } from "@lib/contexts/SocketProvider"; function WarnBeforeCloseDialog({ onClose }: { onClose: () => void }) { const { get } = useLang(); @@ -42,41 +41,12 @@ function WarnBeforeCloseDialog({ onClose }: { onClose: () => void }) { ); } -function DisconnedtedAlert() { - const { state } = useSocket(); - if (state.state === "disconnected") { - return ( -
- - - The connection to the server has been lost. Please wait while we try - to reconnect. - -
- ); - } - return null; -} - -function ConnectingAlert() { - const { state } = useSocket(); - if (state.state === "retrying") { - return ( -
- - - We are trying to reconnect to the server. Please wait a moment. - -
- ); - } - return null; -} export default function ChatHeader() { const [, , SetState] = useWidgetState(); const { data } = useInitialData(); const config = useConfigData(); + const debug = config.debug ?? false; const onClose = () => { SetState(false); @@ -89,9 +59,12 @@ export default function ChatHeader() { return (
-

- {data?.bot_name || "OpenCopilot"} -

+
+

+ {data?.bot_name || "OpenCopilot"} +

+ {debug && DEBUG} +
{config?.warnBeforeClose === false ? (
-
- - -
); } From 1f213f6274b2d2b78b0b3aa4dcc7ec6deb8af8b3 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:18:28 +0200 Subject: [PATCH 04/17] feat: Add HandoffComponentRenderer to component registry --- copilot-widget/lib/@components/Handoff.component.tsx | 12 ++++++++++++ copilot-widget/lib/contexts/componentRegistery.ts | 9 ++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 copilot-widget/lib/@components/Handoff.component.tsx diff --git a/copilot-widget/lib/@components/Handoff.component.tsx b/copilot-widget/lib/@components/Handoff.component.tsx new file mode 100644 index 000000000..010e92de8 --- /dev/null +++ b/copilot-widget/lib/@components/Handoff.component.tsx @@ -0,0 +1,12 @@ +import { ComponentProps, HandoffPayloadType } from ".."; + +type Props = ComponentProps; + +export function HandoffComponentRenderer(props: Props) { + return ( +
+ {props.data.sentiment} + {props.data.summery} +
+ ); +} diff --git a/copilot-widget/lib/contexts/componentRegistery.ts b/copilot-widget/lib/contexts/componentRegistery.ts index 7abb96f1d..151842707 100644 --- a/copilot-widget/lib/contexts/componentRegistery.ts +++ b/copilot-widget/lib/contexts/componentRegistery.ts @@ -1,9 +1,11 @@ import React from "react"; +import type { BotMessageType } from "./messageHandler"; + import { Fallback } from "@lib/@components/Fallback.component"; import { FormComponent } from "@lib/@components/Form.component"; import { Loading } from "@lib/@components/Loading.component"; import { Text } from "@lib/@components/Text.component"; -import type { BotMessageType } from "./messageHandler"; +import { HandoffComponentRenderer } from "@lib/@components/Handoff.component"; export type ComponentProps = BotMessageType; @@ -15,6 +17,7 @@ export type ComponentType = { type OptionsType = { components?: ComponentType[]; }; + /** * this a singleton class helps me to easily control the components present/available in the widget. * it also manges the various types of components to be added along the way. @@ -37,6 +40,10 @@ export class ComponentRegistery { key: "LOADING", component: Loading, }, + { + key: "HANDOFF", + component: HandoffComponentRenderer, + }, ] as const; constructor(opts: OptionsType) { From a51f55c6dbfa109d7ae18a0787a8f33032803ebf Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:39:16 +0200 Subject: [PATCH 05/17] Add BotMessageWrapper component and export it --- copilot-widget/lib/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/copilot-widget/lib/index.ts b/copilot-widget/lib/index.ts index df7404ff0..4f5477205 100644 --- a/copilot-widget/lib/index.ts +++ b/copilot-widget/lib/index.ts @@ -1,3 +1,4 @@ +export { BotMessageWrapper } from "./components/Messages"; export { default as Root } from "./Root"; export { CopilotWidget } from "./CopilotWidget"; export type { From ee601d9cb4db5c3a733ef213f82990fc417f8d2c Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:39:36 +0200 Subject: [PATCH 06/17] Refactor ChatScreen component to remove unused imports and simplify code structure --- copilot-widget/lib/screens/ChatScreen.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/copilot-widget/lib/screens/ChatScreen.tsx b/copilot-widget/lib/screens/ChatScreen.tsx index 2c1db05f3..7504e3906 100644 --- a/copilot-widget/lib/screens/ChatScreen.tsx +++ b/copilot-widget/lib/screens/ChatScreen.tsx @@ -1,10 +1,6 @@ import ChatHeader from "../components/ChatHeader"; import { ComponentType, useEffect, useRef } from "react"; -import { - BotMessageWrapper, - BotInitialMessage, - UserMessage, -} from "../components/Messages"; +import { BotInitialMessage, UserMessage } from "../components/Messages"; import useScrollToPercentage from "../hooks/useScrollTo"; import ChatInputFooter from "../components/ChatInputFooter"; import { useConfigData } from "../contexts/ConfigData"; @@ -61,13 +57,11 @@ export default function ChatScreen() { }>; return ( - - - + ); } else if (message.from === "user") { return ( From ac835551b435c620b43eb8e794267b4b42360644 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 02:39:46 +0200 Subject: [PATCH 07/17] Refactor Fallback and Text components --- .../lib/@components/Fallback.component.tsx | 10 ++++---- .../lib/@components/Text.component.tsx | 23 +++++++++++-------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/copilot-widget/lib/@components/Fallback.component.tsx b/copilot-widget/lib/@components/Fallback.component.tsx index d8c930a7f..cfd81efc6 100644 --- a/copilot-widget/lib/@components/Fallback.component.tsx +++ b/copilot-widget/lib/@components/Fallback.component.tsx @@ -7,12 +7,10 @@ type Props = ComponentProps; */ export function Fallback(props: Props) { return ( -
-
- - {JSON.stringify(props, null, 1)} - -
+
+ 
+        {JSON.stringify(props, null, 1)}
+
); } diff --git a/copilot-widget/lib/@components/Text.component.tsx b/copilot-widget/lib/@components/Text.component.tsx index be3df0f8e..8d495ceb5 100644 --- a/copilot-widget/lib/@components/Text.component.tsx +++ b/copilot-widget/lib/@components/Text.component.tsx @@ -1,6 +1,7 @@ import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import type { ComponentProps } from "../contexts/componentRegistery"; +import { BotMessageWrapper } from "../components/Messages"; type Props = ComponentProps<{ message: string; @@ -13,17 +14,19 @@ export function Text({ id, data }: Props) { const { message } = data; return ( -
-
-
- - {message} - + +
+
+
+ + {message} + +
-
+ ); } From 34c96e2ec2504ea8e78e7ac00127d343551d4e44 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Fri, 15 Mar 2024 03:44:27 +0200 Subject: [PATCH 08/17] Update copilot widget script URL --- .../app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx b/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx index 6627ddd4a..db92e5eea 100644 --- a/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx +++ b/dashboard/app/(authenticated)/(copilot)/copilot/[copilot_id]/page.tsx @@ -47,7 +47,7 @@ function InstallationSection() {

+