Merge pull request #103 from openchatai/falta/widget-enhancments

Falta/widget enhancments

.github/workflows/build-widget.yml

@@ -15,10 +15,10 @@ jobs:
           node-version: 18
 
       - name: Install dependencies
-        run: cd copilot-widget/ && npm install
+        run: cd copilot-widget/ && pnpm install
 
       - name: Build copilot-widget
-        run: cd copilot-widget/ && npm run build
+        run: cd copilot-widget/ && pnpm build:embed
 
       - name: Upload embed as artifact.
         uses: actions/upload-artifact@v3

copilot-widget/.release-it.json

@@ -0,0 +1,12 @@
+{
+    "github": {
+        "requireBranch": "main",
+        "release": true,
+        "commitMessage": "chore: release ${version}",
+        "hooks": {
+            "before:init": [
+                "pnpm lint"
+            ]
+        }
+    }
+}

copilot-widget/src/lib/CopilotWidget.tsx → copilot-widget/lib/CopilotWidget.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
-import { useWidgetStateContext } from "../contexts/WidgetState";
-import ChatScreenWithSfxs from "../screens/ChatScreen";
-import cn from "../utils/cn";
+import { useWidgetStateContext } from "./contexts/WidgetState";
+import cn from "./utils/cn";
+import ChatScreenWithSfxs from "./screens/ChatScreen";
+import { IS_SERVER } from "./utils/is_server";
 
 export function CopilotWidget({
   triggerSelector,
@@ -10,13 +11,11 @@ export function CopilotWidget({
 }) {
   const [open, toggle] = useWidgetStateContext();
   useEffect(() => {
+    if (IS_SERVER) return;
     const trigger = document.querySelector(triggerSelector);
-    function handleClick() {
-      toggle();
-    }
     if (trigger) {
-      trigger.addEventListener("click", handleClick);
-      return () => trigger.removeEventListener("click", handleClick);
+      trigger.addEventListener("click", toggle);
+      return () => trigger.removeEventListener("click", toggle);
     } else {
       console.warn(
         "the trigger element can't be found,make sure it present in the DOM"
@@ -37,8 +36,10 @@ export function CopilotWidget({
         className={cn(
           "opencopilot-font-inter opencopilot-overflow-hidden opencopilot-h-full sm:opencopilot-rounded-xl opencopilot-bg-white",
           "opencopilot-opacity-0 opencopilot-transition-opacity opencopilot-ease",
-          open && "opencopilot-opacity-100 opencopilot-animate-in opencopilot-fade-in",
-          !open && "opencopilot-hidden opencopilot-animate-out opencopilot-fade-out"
+          open &&
+            "opencopilot-opacity-100 opencopilot-animate-in opencopilot-fade-in",
+          !open &&
+            "opencopilot-hidden opencopilot-animate-out opencopilot-fade-out"
         )}
       >
         <ChatScreenWithSfxs />

copilot-widget/src/lib/Root.tsx → copilot-widget/lib/Root.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import WidgetState from "../contexts/WidgetState";
-import { AxiosProvider } from "../contexts/axiosInstance";
-import { InitialDataProvider } from "../contexts/InitialDataContext";
-
 import ConfigDataProvider, {
   ConfigDataContextType,
-} from "../contexts/ConfigData";
+} from "./contexts/ConfigData";
+import WidgetState from "./contexts/WidgetState";
+import { AxiosProvider } from "./contexts/axiosInstance";
+import { InitialDataProvider } from "./contexts/InitialDataContext";
 
 function Root({
   children,

copilot-widget/src/components/Messages.tsx → copilot-widget/lib/components/Messages.tsx

@@ -23,7 +23,7 @@ function BotIcon({ error }: { error?: boolean }) {
 function UserIcon() {
   return (
     <div className="opencopilot-rounded-lg opencopilot-shrink-0 opencopilot-bg-accent opencopilot-h-7 opencopilot-w-7 opencopilot-object-cover opencopilot-aspect-square hover:opencopilot-shadow opencopilot-border-primary-light opencopilot-border opencopilot-flex opencopilot-items-center opencopilot-justify-center">
-      <span className="opencopilot-text-xl opencopilot-text-accent2">
+      <span className="opencopilot-text-xl opencopilot-text-primary opencopilot-fill-current">
         <FaRegUserCircle />
       </span>
     </div>

copilot-widget/src/contexts/ConfigData.tsx → copilot-widget/lib/contexts/ConfigData.tsx

@@ -1,5 +1,5 @@
+import { Options } from "@lib/types";
 import { ReactNode, createContext, useContext } from "react";
-import { Options } from "../lib/types";
 
 export type ConfigDataContextType = Pick<
   Options,

copilot-widget/src/contexts/Controller.tsx → copilot-widget/lib/contexts/Controller.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode, createContext, useContext, useState } from "react";
-import { type Message } from "../lib/types";
 import now from "../utils/timenow";
 import { useAxiosInstance } from "./axiosInstance";
 import { useConfigData } from "./ConfigData";
 import { useSoundEffectes } from "../hooks/useSoundEffects";
+import { Message } from "@lib/types";
 
 interface ChatContextProps {
   messages: Message[];

copilot-widget/src/contexts/InitialDataContext.tsx → copilot-widget/lib/contexts/InitialDataContext.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import { useAxiosInstance } from "./axiosInstance";
-import { type InitialDataType } from "../lib/types";
+import { InitialDataType } from "@lib/types";
 
 type InitialDataContextType = {
   data: InitialDataType | undefined;

copilot-widget/lib/utils/is_server.ts

@@ -0,0 +1 @@
+export const IS_SERVER = typeof window === "undefined";

copilot-widget/package.json

@@ -1,28 +1,25 @@
 {
   "name": "@openchatai/copilot-widget",
-  "private": true,
-  "version": "1.0.0",
+  "private": false,
+  "version": "1.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf ./dist && tsc && vite build",
+    "clean": "rm -rf ./dist",
+    "build:embed": "pnpm clean && tsc && vite build",
+    "build:lib": "tsup",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "release": "release-it",
+    "prepublishOnly": "pnpm clean && pnpm build:lib"
   },
-  "dependencies": {
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-tooltip": "^1.0.6",
-    "axios": "^1.4.0",
+  "peerDependencies": {
     "react": "^18.x",
-    "react-dom": "^18.x",
-    "react-icons": "^4.10.1",
-    "react-loader-spinner": "^5.3.4",
-    "react-markdown": "^8.0.7",
-    "react-textarea-autosize": "^8.5.3",
-    "remark-gfm": "^3.0.1",
-    "tailwind-merge": "^1.13.2"
+    "react-dom": "^18.x"
   },
   "devDependencies": {
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "^20.4.7",
     "@types/react": "^18.x",
@@ -31,17 +28,50 @@
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.24",
     "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.8.8",
+    "react": "^18.x",
+    "react-dom": "^18.x",
+    "react-icons": "^4.10.1",
+    "react-loader-spinner": "^5.3.4",
+    "react-markdown": "^8.0.7",
+    "react-textarea-autosize": "^8.5.3",
+    "release-it": "^16.2.1",
+    "remark-gfm": "^3.0.1",
+    "tailwind-merge": "^1.13.2",
     "tailwind-scrollbar": "^3.0.4",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.6",
     "timeago.js": "^4.0.2",
+    "tsup": "^7.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://github.com/openchatai/OpenCopilot/issues"
+  },
+  "author": {
+    "name": "openchatai",
+    "url": "https://github.com/openchatai"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./index.css": "./dist/index.css"
   }
-}
+}