Merge pull request #260 from openchatai/staging

Release changes

copilot-widget/index.html

@@ -19,9 +19,11 @@
           token: "1RuzS7w5ceGaN6CiK0J7",
           triggerSelector: "#triggerSelector",
           apiUrl: "https://cloud.openchat.so/api",
-          headers: {
-            Authorization: "Bearer your_auth_token_goes_here",
-          },
+          headers: [
+            {
+              Authorization: "Bearer your_auth_token_goes_here",
+            },
+          ],
           user: {
             name: "John Doe",
           },

copilot-widget/lib/components/Messages.tsx

@@ -16,7 +16,7 @@ function BotIcon({ error }: { error?: boolean }) {
   return (
     <img
       className={cn(
-        "opencopilot-h-7 opencopilot-w-7 opencopilot-rounded-lg opencopilot-object-cover opencopilot-aspect-square hover:opencopilot-shadow",
+        "opencopilot-h-7 opencopilot-w-7 opencopilot-rounded-lg opencopilot-shrink-0 opencopilot-object-cover opencopilot-aspect-square hover:opencopilot-shadow",
         error && "border opencopilot-border-rose-500 opencopilot-shadow-none"
       )}
       src="https://cdn.dribbble.com/users/281679/screenshots/14897126/media/f52c47307ac2daa0c727b1840c41d5ab.png?compress=1&resize=1600x1200&vertical=center"
@@ -61,7 +61,7 @@ export function BotTextMessage({
   const { messages } = useChat();
   const isLast = getLast(messages)?.id === id;
   return (
-    <div className="opencopilot-p-2 group opencopilot-w-full">
+    <div className="opencopilot-p-2 group opencopilot-w-full opencopilot-shrink-0">
       <div
         className="opencopilot-flex opencopilot-select-none opencopilot-items-start opencopilot-gap-3 opencopilot-w-full"
         dir="auto"
@@ -108,7 +108,7 @@ export function BotTextMessage({
 export function BotMessageLoading() {
   const { displayText } = useTypeWriter({ text: "Bot is Thinking..." });
   return (
-    <div className="opencopilot-p-2 opencopilot-flex opencopilot-items-center opencopilot-gap-3 opencopilot-w-full">
+    <div className="opencopilot-p-2 opencopilot-flex opencopilot-items-center opencopilot-shrink-0 opencopilot-gap-3 opencopilot-w-full">
       <div className="loading opencopilot-flex-col opencopilot-w-7 opencopilot-flex opencopilot-h-7 opencopilot-bg-accent opencopilot-text-primary opencopilot-rounded-lg opencopilot-shrink-0 opencopilot-mt-auto flex-center">
         <Grid
           height="15"
@@ -139,7 +139,7 @@ export function UserMessage({
   return (
     <div
       dir="auto"
-      className="opencopilot-w-full opencopilot-overflow-x-auto opencopilot-max-w-full last-of-type:opencopilot-mb-10 opencopilot-bg-accent opencopilot-p-2 opencopilot-flex opencopilot-gap-3 opencopilot-items-center"
+      className="opencopilot-w-full opencopilot-overflow-x-auto opencopilot-shrink-0 opencopilot-max-w-full last-of-type:opencopilot-mb-10 opencopilot-bg-accent opencopilot-p-2 opencopilot-flex opencopilot-gap-3 opencopilot-items-center"
     >
       <UserIcon />
       <div>
@@ -164,7 +164,7 @@ export function BotMessageError({ message }: { message?: FailedMessage }) {
     every: 0.001,
   });
   return (
-    <div className="opencopilot-clear-both opencopilot-w-full opencopilot-p-2">
+    <div className="opencopilot-clear-both opencopilot-shrink-0 opencopilot-w-full opencopilot-p-2">
       <div className="opencopilot-flex opencopilot-items-center opencopilot-gap-3 opencopilot-w-full">
         <BotIcon error />
         <div className="opencopilot-text-rose-500 opencopilot-text-sm">

copilot-widget/lib/contexts/Controller.tsx

@@ -54,7 +54,7 @@ const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         "/chat/send",
         {
           ...message,
-          headers: config?.headers,
+          headers: config?.headers || [],
           user: config?.user,
         }
       );

copilot-widget/lib/types/options.ts

@@ -1,6 +1,6 @@
 export type Options = {
   token: string;
-  headers: Record<string, string>;
+  headers?: Record<string, string>[];
   initialMessage: string;
   triggerSelector: string;
   apiUrl: string;

copilot-widget/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

dashboard/app/(copilot)/copilot/[copilot_id]/CopilotWidget.tsx

@@ -0,0 +1,26 @@
+import {
+    CopilotWidget,
+    Root
+} from '@openchatai/copilot-widget';
+export default function Widget({
+    token
+}: {
+    token: string
+}) {
+    return <Root
+        options={{
+            apiUrl: "http://localhost:8888/backend/api",
+            token,
+            initialMessage: "Hey Pal!",
+            headers: {
+                "X-Copilot": "copilot"
+            },
+        }}
+    >
+        <div className="[&>div]:static [&>div]:!max-h-full [&>div]:!h-full h-full overflow-hidden border-border border rounded-lg">
+            <CopilotWidget
+                triggerSelector="#triggerSelector"
+            />
+        </div>
+    </Root>
+}

dashboard/app/(copilot)/copilot/[copilot_id]/page.tsx

@@ -13,6 +13,9 @@ import { ShieldAlert, Wand2, Inspect } from "lucide-react";
 import Link from "next/link";
 import React from "react";
 import { useCopilot } from "../_context/CopilotProvider";
+import dynamic from "next/dynamic";
+
+const Widget = dynamic(() => import("./CopilotWidget"));
 
 function InstallationSection() {
   const { token: CopilotToken } = useCopilot();
@@ -109,18 +112,15 @@ export default function CopilotPage() {
           {CopilotName}
         </h1>
         <div className="space-x-2">
-          <Button>
-            <Link
-              target="_blank"
-              href={"http://localhost:8888/backend" + "/demo/" + CopilotToken}
-            >
-              Test on example dashboard
-            </Link>
+          <Button
+            id="triggerSelector"
+          >
+            Chat with the Copilot
           </Button>
         </div>
       </HeaderShell>
-      <div className="flex-1 overflow-auto">
-        <div className="container max-w-screen-lg p-8">
+      <div className="flex-1 flex flex-row justify-between gap-2 overflow-hidden">
+        <div className="container flex-1 max-w-screen-lg p-8 max-h-full overflow-auto">
           <Alert variant="info" className="mb-5">
             <ShieldAlert className="h-6 w-6" />
             <AlertTitle>Attention</AlertTitle>
@@ -138,6 +138,9 @@ export default function CopilotPage() {
             <TryItSection />
           </Accordion>
         </div>
+        <div className="h-full w-fit p-2">
+          <Widget token={CopilotToken} />
+        </div>
       </div>
     </div>
   );

dashboard/app/globals.css

@@ -1,3 +1,4 @@
+@import url("@openchatai/copilot-widget/index.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -74,7 +75,7 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply !border-border;
   }
   body {
     @apply bg-background text-foreground;

dashboard/package.json

@@ -10,7 +10,9 @@
     "clean": "rm -rf .next"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.2",
+    "@hookform/resolvers": "^3.3.1",
+    "@openchatai/copilot-flows-editor": "^1.5.2",
+    "@openchatai/copilot-widget": "^1.1.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",

docker-compose.yml

@@ -5,6 +5,9 @@ services:
     build:
       context: ./backend
       dockerfile: Dockerfile
+    image: codebanesr/backend:arm_edge  # Add this line
+    ports:
+      - 5000:5000
     depends_on:
       - llm-server
       - mysql
@@ -24,12 +27,13 @@ services:
     build:
       context: ./llm-server
       dockerfile: Dockerfile
+    image: codebanesr/llm-server:arm_edge  # Add this line
     volumes:
       - shared_data:/app/shared_data
     networks:
       - opencopilot_network
     env_file:
-      - llm-server/.env
+      - llm-server/.env.docker
     ports:
       - 8002:8002
     depends_on:
@@ -51,12 +55,13 @@ services:
     build:
       context: ./workers
       dockerfile: Dockerfile
+    image: codebanesr/workers:arm_edge  # Add this line
     networks:
       - opencopilot_network
     volumes:
       - shared_data:/app/shared_data
     env_file:
-      - llm-server/.env
+      - llm-server/.env.docker
     # worker will also check for some database tables, this is a hacky solution
     command: sh -c "celery -A celery_app worker --loglevel=info"
     depends_on:
@@ -69,6 +74,9 @@ services:
     build:
       context: ./dashboard
       dockerfile: Dockerfile
+    image: codebanesr/dashboard:arm_edge  # Add this line
+    ports:
+      - 8000:8000
     volumes:
       - shared_data:/app/shared_data
     networks:
@@ -80,7 +88,7 @@ services:
   mysql:
     restart: unless-stopped
     platform: linux/x86_64
-    image: "mysql:5.7"
+    image: "mysql:8"
     ports:
       - "3307:3306"
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci

k8s/adminer-deployment.yaml

@@ -0,0 +1,36 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  annotations:
+    kompose.cmd: kompose convert --out=k8s
+    kompose.version: 1.31.2 (HEAD)
+  creationTimestamp: null
+  labels:
+    io.kompose.service: adminer
+  name: adminer
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      io.kompose.service: adminer
+  strategy: {}
+  template:
+    metadata:
+      annotations:
+        kompose.cmd: kompose convert --out=k8s
+        kompose.version: 1.31.2 (HEAD)
+      creationTimestamp: null
+      labels:
+        io.kompose.network/opencopilot-opencopilot-network: "true"
+        io.kompose.service: adminer
+    spec:
+      containers:
+        - image: adminer
+          name: adminer
+          ports:
+            - containerPort: 8080
+              hostPort: 8080
+              protocol: TCP
+          resources: {}
+      restartPolicy: Always
+status: {}

k8s/adminer-service.yaml

@@ -0,0 +1,19 @@
+apiVersion: v1
+kind: Service
+metadata:
+  annotations:
+    kompose.cmd: kompose convert --out=k8s
+    kompose.version: 1.31.2 (HEAD)
+  creationTimestamp: null
+  labels:
+    io.kompose.service: adminer
+  name: adminer
+spec:
+  ports:
+    - name: "8080"
+      port: 8080
+      targetPort: 8080
+  selector:
+    io.kompose.service: adminer
+status:
+  loadBalancer: {}