Fixes for o1 models, and other updates

Author: metaspartan

client/src/components/ChatNode.tsx

@@ -11,7 +11,6 @@ import { Textarea } from "@/components/ui/textarea";
 import { Send, Trash2, Loader2, Maximize2, X } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   Select,
   SelectContent,
@@ -23,18 +22,13 @@ import { AIModel, APIResponseMetrics, CustomModel, Message, availableModels } fr
 import { cn, sanitizeChatMessages } from "@/lib/utils";
 import { useStore } from "@/lib/store";
 import { Copy, Check } from "lucide-react";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { NodeResizer } from 'reactflow';
 import Anthropic from '@anthropic-ai/sdk';
 import { DEFAULT_AI_SETTINGS, AISettings, PRESET_ENDPOINTS } from '@/lib/constants';
 import { ImageUpload } from "./ImageUpload";
 import logo from "@/assets/logo.svg";
 import { RAGService } from "@/lib/rag";
-import { FileUpload } from "./FileUpload";
-import { encode } from "gpt-tokenizer";
-import { defaultLocalModels } from "@/lib/localmodels";
-import { modelService } from "@/lib/localmodels";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "./ui/context-menu";
+// import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "./ui/context-menu";
 import { RAGSelector } from "./RAGSelector";
 import { CodeBlock } from "./CodeBlock";
 import remarkGfm from 'remark-gfm';
@@ -308,6 +302,7 @@ export function ChatNode({ id, data: initialData }: NodeProps) {
 
         const assistantMessage: Message = {
           role: "assistant",
+          // @ts-ignore anthropic returns content as an array
           content: response.content[0].text,
           metrics: {
             tokensPerSecond: metrics.completion_tokens ? metrics.completion_tokens / totalTime : undefined,
@@ -320,12 +315,22 @@ export function ChatNode({ id, data: initialData }: NodeProps) {
 
 
       } else {
+
         const messageContent = imageData
         ? [
             { type: "text", text: input },
             { type: "image_url", image_url: { url: imageData } }
           ]
         : input;
+
+        // Check if using O1 models
+        const isO1Model = model.includes('o1-mini') || model.includes('o1') || model.includes('o1-preview');
+        const messagesToSend = sanitizeChatMessages([
+          ...((!isO1Model && enhancedSystemPrompt) ? [{ role: 'system', content: enhancedSystemPrompt }] : []),
+          ...allMessages.slice(0, -1),
+          { role: "user", content: messageContent }
+        ]).filter(m => m.content);
+
         response = await fetch(`${baseUrl}/chat/completions`, {
           method: "POST",
           headers: {
@@ -334,11 +339,7 @@ export function ChatNode({ id, data: initialData }: NodeProps) {
           },
           body: JSON.stringify({
             model,
-            messages: sanitizeChatMessages([
-              { role: 'system', content: enhancedSystemPrompt },
-              ...allMessages.slice(0, -1),
-              { role: "user", content: messageContent }
-            ]).filter(m => m.content),
+            messages: messagesToSend,
             // we shouldnt pass any of these unless they are changed from the defaults
             ...filterAISettings(settings),
           }),
@@ -502,8 +503,8 @@ export function ChatNode({ id, data: initialData }: NodeProps) {
             key={i}
             className={`${
               msg.role === "user"
-                ? "bg-primary text-primary-foreground ml-4"
-                : "bg-muted text-muted-foreground mr-4"
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground"
             } p-3 rounded-lg relative group`}
           >
             <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -535,10 +536,10 @@ export function ChatNode({ id, data: initialData }: NodeProps) {
     h2: ({ children }) => <h2 className="text-xl font-bold mb-2">{children}</h2>,
     h3: ({ children }) => <h3 className="text-lg font-bold mb-2">{children}</h3>,
     h4: ({ children }) => <h4 className="text-base font-bold mb-2">{children}</h4>,
-    p: ({ children }) => <p className="mb-4">{children}</p>,
+    p: ({ children }) => <p className="mt-1 mb-2">{children}</p>,
     ul: ({ children }) => <ul className="list-disc list-inside mb-4">{children}</ul>,
     ol: ({ children }) => <ol className="list-decimal list-inside mb-4">{children}</ol>,
-    li: ({ children }) => <li className="mb-1">{children}</li>,
+    li: ({ children }) => <li className="mb-2">{children}</li>,
     a: ({ href, children }) => (
       <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
         {children}

client/src/components/CodeBlock.tsx

@@ -3,21 +3,26 @@ import { Button } from './ui/button';
 import { Copy, Check } from 'lucide-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import type { CodeProps } from 'react-markdown/lib/ast-to-react';
+
+interface CodeBlockProps {
+  inline?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
 
 export const CodeBlock = memo(({ 
   inline, 
   className, 
   children,
   ...props 
-}: CodeProps) => {
+}: CodeBlockProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const match = /language-(\w+)/.exec(className || '');
 
-  const handleCopy = useCallback((e: React.MouseEvent) => {
+  const handleCopy = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    
+    console.log('Copying code block');
     if (!children) return;
 
     const code = String(children).replace(/\n$/, '');
@@ -27,17 +32,19 @@ export const CodeBlock = memo(({
     }).catch(err => {
       console.error('Failed to copy:', err);
     });
-  }, [children]);
+  };
 
   if (!inline && match) {
     return (
-      <div className="relative group" onMouseDown={e => e.stopPropagation()}>
+      <div className="relative group">
         {/* <Button
           type="button"
           variant="ghost"
           size="icon"
           className="absolute right-2 top-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-muted/50"
-          onMouseDown={handleCopy}
+          onClick={(e) => {
+            handleCopy(e);
+          }}
         >
           {isCopied ? (
             <Check className="h-3 w-3 text-green-500" />

client/src/components/SettingsDialog.tsx

@@ -79,7 +79,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
 
             <div className="flex justify-center">
             <img src={logo} alt="Curiso.ai" title="Curiso.ai" className="w-12 h-12" /></div>
-            <div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.2 by     <a 
+            <div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.3 by <a 
               href="https://github.com/metaspartan/curiso" 
               onClick={(e) => {
                 e.preventDefault();

client/src/lib/types.ts

@@ -3,7 +3,7 @@ import { Node as ReactFlowNode } from 'reactflow';
 import googleLogo from '@/assets/google-logo.svg'
 
 export interface Message {
-  role: 'user' | 'assistant';
+  role: 'user' | 'assistant' | 'system';
   content: string;
   image_url?: string;
   metrics?: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "curiso.ai",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "Carsen Klock",
   "type": "module",
   "license": "MIT",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "curiso-ai"
-version = "1.1.2"
+version = "1.1.3"
 description = "Curiso AI Desktop"
 authors = ["Carsen Klock"]
 license = "MIT"

src-tauri/Cargo.toml

@@ -1,17 +1,17 @@
 {
     "identifier": "com.curiso.ai",
     "productName": "Curiso AI",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "build": {
-      "beforeBuildCommand": "npm run build",
-      "beforeDevCommand": "npm run dev",
+      "beforeBuildCommand": "bun run build",
+      "beforeDevCommand": "bun run dev",
       "devUrl": "http://localhost:5173",
         "frontendDist": "../dist"
     },
     "app": {
       "withGlobalTauri": true,
       "security": {
-       "csp": "default-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' http://localhost:* https://*; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net blob:; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://* http://* http://127.0.0.1:* http://localhost:*; connect-src 'self' http://127.0.0.1:* http://localhost:* https://* http://* https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; worker-src 'self' blob: data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://* http://* http://127.0.0.1:* http://localhost:*",
+       "csp": "default-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' http://localhost:* https://*; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net blob:; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' 'unsafe-hashes' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://* http://* http://127.0.0.1:* http://localhost:* data: blob:; connect-src 'self' http://127.0.0.1:* http://localhost:* https://* http://* https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; worker-src 'self' blob: data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://* http://* http://127.0.0.1:* http://localhost:*",
        "capabilities": [
         {
           "identifier": "fetch",