Fixed DallE and I think I fixed Claude

jrgleason · Dec 1, 2024 · 5e2ecfb · 5e2ecfb
1 parent ca6372e
commit 5e2ecfb
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 38 deletions.
diff --git a/app/src/main/java/org/example/controller/AnthropicController.java b/app/src/main/java/org/example/controller/AnthropicController.java
@@ -18,7 +18,7 @@ public AnthropicController(
         this.chatClient = chatClient;
     }
 
-    @GetMapping("/anthropic")
+    @GetMapping
     public ResponseEntity<String> questionAnthropic(
             @RequestParam(
                     value = "message",

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -1,13 +1,13 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import ChatInterface from './components/ChatInterface.jsx';
-import {DocumentGrid} from './components/DocumentGrid.jsx';
-import {AddDocumentModal} from './components/AddDocumentModal.jsx';
-import {StateProvider} from "./state/StateProvider.jsx";
-import {Box, Button, Tab, Tabs} from '@mui/material';
-import {FileText, MessageSquare, Upload} from 'lucide-react';
+import { DocumentGrid } from './components/DocumentGrid.jsx';
+import { AddDocumentModal } from './components/AddDocumentModal.jsx';
+import { StateProvider } from "./state/StateProvider.jsx";
+import { AppBar, Box, Button, Tab, Tabs, Toolbar, Typography } from '@mui/material';
+import { FileText, MessageSquare, Upload } from 'lucide-react';
 
 function TabPanel(props) {
-    const {children, value, index, ...other} = props;
+    const { children, value, index, ...other } = props;
 
     return (
         <div
@@ -18,7 +18,7 @@ function TabPanel(props) {
             {...other}
         >
             {value === index && (
-                <Box sx={{p: 3}}>
+                <Box sx={{ p: 3 }}>
                     {children}
                 </Box>
             )}
@@ -36,35 +36,38 @@ function App() {
 
     return (
         <StateProvider>
-            <div className="min-h-screen bg-gray-100 py-8">
-                <div className="container mx-auto">
-                    <h1 className="text-3xl font-bold text-center mb-8 text-gray-800">
-                        Chat Interface
-                    </h1>
-
-                    <Box sx={{width: '100%'}}>
-                        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+            <div className="min-h-screen bg-gray-100">
+                <AppBar position="static">
+                    <Toolbar>
+                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                            Chat Interface
+                        </Typography>
+                    </Toolbar>
+                </AppBar>
+                <div className="container mx-auto py-8">
+                    <Box sx={{ width: '100%' }}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <Tabs
                                 value={tabValue}
                                 onChange={handleChange}
                                 centered
                                 aria-label="chat and documents tabs"
                             >
                                 <Tab
-                                    icon={<MessageSquare className="w-4 h-4"/>}
+                                    icon={<MessageSquare className="w-4 h-4" />}
                                     label="Chat"
                                     iconPosition="start"
                                 />
                                 <Tab
-                                    icon={<FileText className="w-4 h-4"/>}
+                                    icon={<FileText className="w-4 h-4" />}
                                     label="Documents"
                                     iconPosition="start"
                                 />
                             </Tabs>
                         </Box>
 
                         <TabPanel value={tabValue} index={0}>
-                            <ChatInterface/>
+                            <ChatInterface />
                         </TabPanel>
 
                         <TabPanel value={tabValue} index={1}>
@@ -73,13 +76,13 @@ function App() {
                                     <Button
                                         variant="contained"
                                         color="primary"
-                                        startIcon={<Upload className="w-4 h-4"/>}
+                                        startIcon={<Upload className="w-4 h-4" />}
                                         onClick={() => setIsAddDocumentOpen(true)}
                                     >
                                         Upload Document
                                     </Button>
                                 </div>
-                                <DocumentGrid/>
+                                <DocumentGrid />
                                 <AddDocumentModal
                                     isOpen={isAddDocumentOpen}
                                     onClose={() => setIsAddDocumentOpen(false)}

diff --git a/ui/src/components/ChatInterface.jsx b/ui/src/components/ChatInterface.jsx
@@ -33,17 +33,6 @@ const ChatInterface = () => {
         setMessage('');
     };
 
-    const scrollToBottom = (behavior = 'smooth') => {
-        window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior
-        });
-    };
-
-    React.useEffect(() => {
-        scrollToBottom();
-    }, [state.context.messages]);
-
     const EmptyState = () => (
         <Box className="text-center mt-4">
             <Typography variant="body2" className="text-gray-400 italic">
@@ -60,7 +49,7 @@ const ChatInterface = () => {
                 {/* Controls Bar */}
                 <Paper className="p-4">
                     <Stack direction="row" spacing={4} alignItems="center">
-                        <ModeToggle mode={mode} setMode={setMode} />
+                        {!isStreaming && <ModeToggle mode={mode} setMode={setMode} />}
                         <FormControlLabel
                             control={
                                 <Switch

diff --git a/ui/src/components/MessageBubble.jsx b/ui/src/components/MessageBubble.jsx
@@ -51,6 +51,14 @@ export const MessageBubble = ({ message }) => {
 
     const renderContent = () => {
         if (isImage && message.type === 'ai') {
+            if (!message.content) {
+                return (
+                    <div className="flex justify-center w-full">
+                        <LoadingSpinner size="small" />
+                    </div>
+                );
+            }
+
             return (
                 <img
                     src={isBase64(message.content)

diff --git a/ui/src/hooks/useChat.js b/ui/src/hooks/useChat.js
@@ -8,7 +8,7 @@ export const useChat = () => {
         const endpoints = {
             'openai-chat': '/openai',
             'openai-image': '/openai/image',
-            'anthropic': '/anthropic/anthropic'
+            'anthropic': '/anthropic'
         };
         return endpoints[mode] || '/openai';
     };
@@ -34,7 +34,14 @@ export const useChat = () => {
         if (!message.trim()) return;
 
         const messageId = uuidv4();
-        await send({type: 'ASK', message, speaker: "user", responder: "ai", responseId: messageId});
+        await send({
+            type: 'ASK',
+            message,
+            speaker: "user",
+            responder: "ai",
+            responseId: messageId,
+            mode
+        });
 
         try {
             const endpoint = getEndpoint(mode);
@@ -88,7 +95,9 @@ export const useChat = () => {
             }
 
             await send({type: 'COMPLETE'});
-            await generateAudioForMessage(messageId, completeMessage, send);
+            if(message.mode !== 'openai-image'){
+                await generateAudioForMessage(messageId, completeMessage, send);
+            }
             return true;
 
         } catch (error) {

diff --git a/ui/src/state/StateMachine.js b/ui/src/state/StateMachine.js
@@ -126,6 +126,7 @@ const askQuestion = fromPromise(async ({input}) => {
             [input.responseId]: {
                 type: input.responder,
                 content: "",
+                mode: input.mode,
                 timestamp: new Date()
             }
         };
@@ -181,7 +182,8 @@ export const simpleMachine = createMachine({
                     message: event.message,
                     responseId: event.responseId,
                     speaker: event.speaker,
-                    responder: event.responder
+                    responder: event.responder,
+                    mode: event.mode
                 }),
                 onDone: {
                     actions: assign(({event, context}) => {