@rimori/client 1.4.0 → 1.4.3

package/src/cli/scripts/release/release.ts

@@ -38,9 +38,9 @@ const config = {
   release_channel: releaseChannel,
   plugin_id: pluginId,
   token: RIMORI_TOKEN,
-  domain: process.env.RIMORI_BACKEND_URL || "https://api.rimori.se",
+  domain: process.env.RIMORI_BACKEND_URL || 'https://api.rimori.se',
   rimori_client_version: packageJson.dependencies['@rimori/client'].replace('^', ''),
-}
+};
 
 export type Config = typeof config;
 
@@ -61,9 +61,9 @@ async function releaseProcess(): Promise<void> {
     // Then release the plugin
     await releasePlugin(config, release_id);
   } catch (error: any) {
-    console.log("❌ Error:", error.message);
+    console.log('❌ Error:', error.message);
     process.exit(1);
   }
 }
 
-releaseProcess();
+releaseProcess();

package/src/cli/types/DatabaseTypes.ts

@@ -3,14 +3,7 @@
 /**
  * Supported database column data types for table schema definitions.
  */
-type DbColumnType =
-  | 'decimal'
-  | 'integer'
-  | 'text'
-  | 'boolean'
-  | 'json'
-  | 'timestamp'
-  | 'uuid';
+type DbColumnType = 'decimal' | 'integer' | 'text' | 'boolean' | 'json' | 'timestamp' | 'uuid';
 
 /**
  * Foreign key relationship configuration with cascade delete support.
@@ -120,5 +113,4 @@ export interface DbPermissionDefinition {
 /**
  * Full table definition that includes automatically generated fields.
  */
-export type FullTable<T extends Record<string, DbColumnDefinition>> = T &
-  BaseTableStructure;
+export type FullTable<T extends Record<string, DbColumnDefinition>> = T & BaseTableStructure;

package/src/components/CRUDModal.tsx

@@ -1,59 +1,75 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 interface Props {
-    title: string;
-    show?: boolean;
-    className?: string;
-    closeAble?: boolean;
-    children: React.ReactNode;
-    actionbuttons: ActionButton[];
-    buttonText?: string | React.ReactNode;
-    onClose?: () => void;
+  title: string;
+  show?: boolean;
+  className?: string;
+  closeAble?: boolean;
+  children: React.ReactNode;
+  actionbuttons: ActionButton[];
+  buttonText?: string | React.ReactNode;
+  onClose?: () => void;
 }
 
 interface ActionButton {
-    text: string;
-    onClick: () => void;
-    closeModal?: boolean;
+  text: string;
+  onClick: () => void;
+  closeModal?: boolean;
 }
 
-export function CRUDModal({ actionbuttons, children, title, buttonText, className, closeAble = true, show = false, onClose }: Props) {
-    const dialogRef = useRef<HTMLDialogElement>(null);
+export function CRUDModal({
+  actionbuttons,
+  children,
+  title,
+  buttonText,
+  className,
+  closeAble = true,
+  show = false,
+  onClose,
+}: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
-    useEffect(() => {
-        if (show) {
-            dialogRef.current?.showModal();
-        } else {
-            dialogRef.current?.close();
-        }
-    }, [show]);
+  useEffect(() => {
+    if (show) {
+      dialogRef.current?.showModal();
+    } else {
+      dialogRef.current?.close();
+    }
+  }, [show]);
 
-    const handleClose = () => {
-        dialogRef.current?.close();
-        onClose?.();
-    };
+  const handleClose = () => {
+    dialogRef.current?.close();
+    onClose?.();
+  };
 
-    return (
-        <>
-            {!!buttonText && <button className={className} onClick={() => dialogRef.current?.showModal()}>{buttonText}</button>}
-            <dialog ref={dialogRef} className="bg-gray-400 rounded-lg font-normal" onClose={handleClose}>
-                <div className="bg-gray-500 text-xl flex flex-row justify-between p-3 items-start font-bold">
-                    <h2>{title}</h2>
-                    {closeAble && <button onClick={handleClose}>&times;</button>}
-                </div>
-                <div className="modal-body p-2">
-                    {children}
-                </div>
-                <div className="modal-footer px-2 py-2 flex flex-row gap-2 border-t-2">
-                    {actionbuttons.map(({ onClick, text, closeModal = true }, index) => (
-                        <button key={index} className="bg-blue-500 hover:bg-blue-600 dark:border-gray-900 rounded-md py-2 px-4 dark:text-white font-bold"
-                            onClick={() => {
-                                if (closeModal) handleClose();
-                                onClick();
-                            }}>{text}</button>
-                    ))}
-                </div>
-            </dialog>
-        </>
-    );
+  return (
+    <>
+      {!!buttonText && (
+        <button className={className} onClick={() => dialogRef.current?.showModal()}>
+          {buttonText}
+        </button>
+      )}
+      <dialog ref={dialogRef} className="bg-gray-400 rounded-lg font-normal" onClose={handleClose}>
+        <div className="bg-gray-500 text-xl flex flex-row justify-between p-3 items-start font-bold">
+          <h2>{title}</h2>
+          {closeAble && <button onClick={handleClose}>&times;</button>}
+        </div>
+        <div className="modal-body p-2">{children}</div>
+        <div className="modal-footer px-2 py-2 flex flex-row gap-2 border-t-2">
+          {actionbuttons.map(({ onClick, text, closeModal = true }, index) => (
+            <button
+              key={index}
+              className="bg-blue-500 hover:bg-blue-600 dark:border-gray-900 rounded-md py-2 px-4 dark:text-white font-bold"
+              onClick={() => {
+                if (closeModal) handleClose();
+                onClick();
+              }}
+            >
+              {text}
+            </button>
+          ))}
+        </div>
+      </dialog>
+    </>
+  );
 }

package/src/components/MarkdownEditor.tsx

@@ -1,12 +1,12 @@
 import { Markdown } from 'tiptap-markdown';
-import StarterKit from "@tiptap/starter-kit";
-import { PiCodeBlock } from "react-icons/pi";
-import { TbBlockquote } from "react-icons/tb";
-import { GoListOrdered } from "react-icons/go";
-import { AiOutlineUnorderedList } from "react-icons/ai";
-import { EditorProvider, useCurrentEditor } from "@tiptap/react";
-import { LuHeading1, LuHeading2, LuHeading3 } from "react-icons/lu";
-import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from "react-icons/fa";
+import StarterKit from '@tiptap/starter-kit';
+import { PiCodeBlock } from 'react-icons/pi';
+import { TbBlockquote } from 'react-icons/tb';
+import { GoListOrdered } from 'react-icons/go';
+import { AiOutlineUnorderedList } from 'react-icons/ai';
+import { EditorProvider, useCurrentEditor } from '@tiptap/react';
+import { LuHeading1, LuHeading2, LuHeading3 } from 'react-icons/lu';
+import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 
 // This inplementation is rooted in the Tiptap editor basic example https://codesandbox.io/p/devbox/editor-9x9dkd
 
@@ -24,12 +24,12 @@ const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps)
     return null;
   }
 
-  if (action.includes("heading")) {
+  if (action.includes('heading')) {
     const level = parseInt(action[action.length - 1]);
     return (
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: level }).run()}
-        className={`pl-2 ${isActive ? "is-active" : ""}`}
+        className={`pl-2 ${isActive ? 'is-active' : ''}`}
       >
         {label}
       </button>
@@ -40,7 +40,7 @@ const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps)
     <button
       onClick={() => editor.chain().focus()[action]().run()}
       disabled={disabled ? !editor.can().chain().focus()[action]().run() : false}
-      className={`pl-2 ${isActive ? "is-active" : ""}`}
+      className={`pl-2 ${isActive ? 'is-active' : ''}`}
     >
       {label}
     </button>
@@ -56,18 +56,46 @@ const MenuBar = () => {
 
   return (
     <div className="bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1">
-      <EditorButton action="toggleBold" isActive={editor.isActive("bold")} label={<FaBold />} disabled />
-      <EditorButton action="toggleItalic" isActive={editor.isActive("italic")} label={<FaItalic />} disabled />
-      <EditorButton action="toggleStrike" isActive={editor.isActive("strike")} label={<FaStrikethrough />} disabled />
-      <EditorButton action="toggleCode" isActive={editor.isActive("code")} label={<FaCode />} disabled />
-      <EditorButton action="setParagraph" isActive={editor.isActive("paragraph")} label={<FaParagraph />} />
-      <EditorButton action='setHeading1' isActive={editor.isActive("heading", { level: 1 })} label={<LuHeading1 size={"24px"} />} />
-      <EditorButton action='setHeading2' isActive={editor.isActive("heading", { level: 2 })} label={<LuHeading2 size={"24px"} />} />
-      <EditorButton action='setHeading3' isActive={editor.isActive("heading", { level: 3 })} label={<LuHeading3 size={"24px"} />} />
-      <EditorButton action="toggleBulletList" isActive={editor.isActive("bulletList")} label={<AiOutlineUnorderedList size={"24px"} />} />
-      <EditorButton action="toggleOrderedList" isActive={editor.isActive("orderedList")} label={<GoListOrdered size={"24px"} />} />
-      <EditorButton action="toggleCodeBlock" isActive={editor.isActive("codeBlock")} label={<PiCodeBlock size={"24px"} />} />
-      <EditorButton action="toggleBlockquote" isActive={editor.isActive("blockquote")} label={<TbBlockquote size={"24px"} />} />
+      <EditorButton action="toggleBold" isActive={editor.isActive('bold')} label={<FaBold />} disabled />
+      <EditorButton action="toggleItalic" isActive={editor.isActive('italic')} label={<FaItalic />} disabled />
+      <EditorButton action="toggleStrike" isActive={editor.isActive('strike')} label={<FaStrikethrough />} disabled />
+      <EditorButton action="toggleCode" isActive={editor.isActive('code')} label={<FaCode />} disabled />
+      <EditorButton action="setParagraph" isActive={editor.isActive('paragraph')} label={<FaParagraph />} />
+      <EditorButton
+        action="setHeading1"
+        isActive={editor.isActive('heading', { level: 1 })}
+        label={<LuHeading1 size={'24px'} />}
+      />
+      <EditorButton
+        action="setHeading2"
+        isActive={editor.isActive('heading', { level: 2 })}
+        label={<LuHeading2 size={'24px'} />}
+      />
+      <EditorButton
+        action="setHeading3"
+        isActive={editor.isActive('heading', { level: 3 })}
+        label={<LuHeading3 size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleBulletList"
+        isActive={editor.isActive('bulletList')}
+        label={<AiOutlineUnorderedList size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleOrderedList"
+        isActive={editor.isActive('orderedList')}
+        label={<GoListOrdered size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleCodeBlock"
+        isActive={editor.isActive('codeBlock')}
+        label={<PiCodeBlock size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleBlockquote"
+        isActive={editor.isActive('blockquote')}
+        label={<TbBlockquote size={'24px'} />}
+      />
     </div>
   );
 };
@@ -76,12 +104,12 @@ const extensions = [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
-        class: "list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0",
+        class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
       },
     },
     orderedList: {
       HTMLAttributes: {
-        className: "list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0",
+        className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
       },
     },
   }),
@@ -97,9 +125,12 @@ interface Props {
 
 export const MarkdownEditor = (props: Props) => {
   return (
-    <div className={"text-md border border-gray-800 overflow-hidden " + props.className} style={{ borderWidth: props.editable ? 1 : 0 }}>
+    <div
+      className={'text-md border border-gray-800 overflow-hidden ' + props.className}
+      style={{ borderWidth: props.editable ? 1 : 0 }}
+    >
       <EditorProvider
-        key={(props.editable ? "editable" : "readonly") + props.content}
+        key={(props.editable ? 'editable' : 'readonly') + props.content}
         slotBefore={props.editable ? <MenuBar /> : null}
         extensions={extensions}
         content={props.content}

package/src/components/Spinner.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
 
 interface SpinnerProps {
-    text?: string;
-    size?: string
-    className?: string;
+  text?: string;
+  size?: string;
+  className?: string;
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({ text, className, size = "30px" }) => {
-    return (
-        <div className={"flex items-center space-x-2 " + className}>
-            <svg
-                style={{ width: size, height: size }}
-                className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            {text && <span className="">{text}</span>}
-        </div>
-    );
-};
+export const Spinner: React.FC<SpinnerProps> = ({ text, className, size = '30px' }) => {
+  return (
+    <div className={'flex items-center space-x-2 ' + className}>
+      <svg
+        style={{ width: size, height: size }}
+        className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      {text && <span className="">{text}</span>}
+    </div>
+  );
+};

package/src/components/ai/Assistant.tsx

@@ -8,89 +8,89 @@ import { useRimori } from '../../components';
 import { FirstMessages, getFirstMessages } from './utils';
 
 interface Props {
-    voiceId: any;
-    avatarImageUrl: string;
-    onComplete: (result: any) => void;
-    autoStartConversation?: FirstMessages;
+  voiceId: any;
+  avatarImageUrl: string;
+  onComplete: (result: any) => void;
+  autoStartConversation?: FirstMessages;
 }
 
 export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }: Props) {
-    const [oralCommunication, setOralCommunication] = React.useState(true);
-    const { ai: llm, event } = useRimori();
-    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
-    const { messages, append, isLoading, setMessages } = useChat();
+  const [oralCommunication, setOralCommunication] = React.useState(true);
+  const { ai: llm, event } = useRimori();
+  const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+  const { messages, append, isLoading, setMessages } = useChat();
 
-    const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop()?.content;
+  const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop()?.content;
 
-    useEffect(() => {
-        sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
+  useEffect(() => {
+    sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
 
-        if (!autoStartConversation) {
-            return;
-        }
-
-        setMessages(getFirstMessages(autoStartConversation));
-        // append([{ role: 'user', content: autoStartConversation.userMessage }]);
+    if (!autoStartConversation) {
+      return;
+    }
 
-        if (autoStartConversation.assistantMessage) {
-            // console.log("autostartmessages", { autoStartConversation, isLoading });
-            sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
-        }
-    }, []);
+    setMessages(getFirstMessages(autoStartConversation));
+    // append([{ role: 'user', content: autoStartConversation.userMessage }]);
 
-    useEffect(() => {
-        let message = lastAssistantMessage;
-        if (message !== messages[messages.length - 1]?.content) {
-            message = undefined;
-        }
-        sender.handleNewText(message, isLoading);
-    }, [messages, isLoading]);
+    if (autoStartConversation.assistantMessage) {
+      // console.log("autostartmessages", { autoStartConversation, isLoading });
+      sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
+    }
+  }, []);
 
-    const lastMessage = messages[messages.length - 1];
+  useEffect(() => {
+    let message = lastAssistantMessage;
+    if (message !== messages[messages.length - 1]?.content) {
+      message = undefined;
+    }
+    sender.handleNewText(message, isLoading);
+  }, [messages, isLoading]);
 
-    useEffect(() => {
-        console.log("lastMessage", lastMessage);
-        const toolInvocations = lastMessage?.toolCalls;
-        if (toolInvocations && toolInvocations.length > 0) {
-            console.log("toolInvocations", toolInvocations);
-            onComplete(toolInvocations[0].args);
-        }
-    }, [lastMessage]);
+  const lastMessage = messages[messages.length - 1];
 
-    if (lastMessage?.toolCalls && lastMessage.toolCalls.length > 0) {
-        console.log("lastMessage test2", lastMessage);
-        const args = lastMessage.toolCalls[0].args;
+  useEffect(() => {
+    console.log('lastMessage', lastMessage);
+    const toolInvocations = lastMessage?.toolCalls;
+    if (toolInvocations && toolInvocations.length > 0) {
+      console.log('toolInvocations', toolInvocations);
+      onComplete(toolInvocations[0].args);
+    }
+  }, [lastMessage]);
 
-        const success = args.explanationUnderstood === "TRUE" || args.studentKnowsTopic === "TRUE";
+  if (lastMessage?.toolCalls && lastMessage.toolCalls.length > 0) {
+    console.log('lastMessage test2', lastMessage);
+    const args = lastMessage.toolCalls[0].args;
 
-        return <div className="px-5 pt-5 overflow-y-auto text-center" style={{ height: "478px" }}>
-            <h1 className='text-center mt-5 mb-5'>
-                {success ? "Great job!" : "You failed"}
-            </h1>
-            <p>{args.improvementHints}</p>
-        </div>
-    }
+    const success = args.explanationUnderstood === 'TRUE' || args.studentKnowsTopic === 'TRUE';
 
     return (
-        <div>
-            {oralCommunication && <CircleAudioAvatar imageUrl={avatarImageUrl} className='mx-auto my-10' />}
-            <div className="w-full">
-                {lastAssistantMessage && <div className="px-5 pt-5 overflow-y-auto remirror-theme" style={{ height: "4k78px" }}>
-                    <Markdown>{lastAssistantMessage}</Markdown>
-                </div>}
-            </div>
-            <AudioInputField
-                blockSubmission={isLoading}
-                onSubmit={message => {
-                    append([{ role: 'user', content: message, id: messages.length.toString() }]);
-                }}
-                onAudioControl={voice => {
-                    setOralCommunication(voice);
-                    sender.setVolume(voice ? 1 : 0);
-                }} />
-        </div>
+      <div className="px-5 pt-5 overflow-y-auto text-center" style={{ height: '478px' }}>
+        <h1 className="text-center mt-5 mb-5">{success ? 'Great job!' : 'You failed'}</h1>
+        <p>{args.improvementHints}</p>
+      </div>
     );
-};
-
-
-
+  }
+
+  return (
+    <div>
+      {oralCommunication && <CircleAudioAvatar imageUrl={avatarImageUrl} className="mx-auto my-10" />}
+      <div className="w-full">
+        {lastAssistantMessage && (
+          <div className="px-5 pt-5 overflow-y-auto remirror-theme" style={{ height: '4k78px' }}>
+            <Markdown>{lastAssistantMessage}</Markdown>
+          </div>
+        )}
+      </div>
+      <AudioInputField
+        blockSubmission={isLoading}
+        onSubmit={(message) => {
+          append([{ role: 'user', content: message, id: messages.length.toString() }]);
+        }}
+        onAudioControl={(voice) => {
+          setOralCommunication(voice);
+          sender.setVolume(voice ? 1 : 0);
+        }}
+      />
+    </div>
+  );
+}

package/src/components/ai/Avatar.tsx

@@ -9,7 +9,7 @@ import { getFirstMessages } from './utils';
 import { FirstMessages } from './utils';
 
 interface Props {
-  voiceId: any;
+  voiceId: string;
   agentTools: Tool[];
   avatarImageUrl: string;
   circleSize?: string;
@@ -26,8 +26,8 @@ export function Avatar({
   autoStartConversation,
   children,
   isDarkTheme = false,
-  circleSize = "300px",
-  className
+  circleSize = '300px',
+  className,
 }: Props) {
   const { ai, event } = useRimori();
   const [agentReplying, setAgentReplying] = useState(false);
@@ -36,7 +36,7 @@ export function Avatar({
   const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
 
   useEffect(() => {
-    console.log("messages", messages);
+    console.log('messages', messages);
   }, [messages]);
 
   useEffect(() => {
@@ -74,23 +74,26 @@ export function Avatar({
 
   return (
     <div className={`md:pb-8 ${className || ''}`}>
-      <CircleAudioAvatar
-        width={circleSize}
-        className='mx-auto'
-        imageUrl={avatarImageUrl}
-        isDarkTheme={isDarkTheme} />
+      <CircleAudioAvatar width={circleSize} className="mx-auto" imageUrl={avatarImageUrl} isDarkTheme={isDarkTheme} />
       {children}
       <VoiceRecorder
-        iconSize='30'
-        className='w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800'
+        iconSize="30"
+        className="w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800"
         disabled={agentReplying}
         loading={isProcessingMessage}
         enablePushToTalk={true}
         onVoiceRecorded={(message) => {
           setAgentReplying(true);
-          append([{ role: 'user', content: "Message(" + Math.floor((messages.length + 1) / 2) + "): " + message, id: messages.length.toString() }]);
+          append([
+            {
+              role: 'user',
+              content: 'Message(' + Math.floor((messages.length + 1) / 2) + '): ' + message,
+              id: messages.length.toString(),
+            },
+          ]);
         }}
-        onRecordingStatusChange={(running) => !running && setIsProcessingMessage(true)} />
+        onRecordingStatusChange={(running) => !running && setIsProcessingMessage(true)}
+      />
     </div>
   );
-};
+}