fix: width of bubbles and logging errors (#487)

block · Dec 18, 2024 · 90f9d0a · 90f9d0a
1 parent 7154da7
commit 90f9d0a
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 12 deletions.
diff --git a/ui/desktop/src/App.tsx b/ui/desktop/src/App.tsx
@@ -25,9 +25,5 @@ export default function App() {
     return <ErrorScreen error={fatalError} onReload={() => window.electron.reloadApp()} />;
   }
 
-  if (isLauncher) {
-    return <LauncherWindow />;
-  } else {
-    return <ChatWindow />;
-  }
+  return isLauncher ? <LauncherWindow /> : <ChatWindow />;
 }
diff --git a/ui/desktop/src/ChatWindow.tsx b/ui/desktop/src/ChatWindow.tsx
@@ -190,8 +190,8 @@ function ChatContent({
   };
 
   return (
-    <div className="chat-content flex flex-col w-screen h-screen items-center justify-center p-[10px]">
-      <div className="relative block h-[20px] w-screen">
+    <div className="chat-content flex flex-col w-full h-screen items-center justify-center p-[10px]">
+      <div className="relative block h-[20px] w-full">
         <MoreMenu />
       </div>
       <Card className="flex flex-col flex-1 h-[calc(100vh-95px)] w-full bg-card-gradient dark:bg-dark-card-gradient mt-0 border-none rounded-2xl relative">

diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
@@ -8,8 +8,8 @@ export default function UserMessage({ message }) {
   const urls = extractUrls(message.content, []);
 
   return (
-    <div className="flex justify-end mb-[16px]">
-      <div className="flex-col max-w-[90%]">
+    <div className="flex justify-end mb-[16px] w-full">
+      <div className="flex-col max-w-[85%]">
         <div className="flex bg-user-bubble dark:bg-user-bubble-dark text-goose-text-light dark:text-goose-text-light-dark rounded-2xl p-4">
           <MarkdownContent
             content={message.content}

diff --git a/ui/desktop/src/renderer.tsx b/ui/desktop/src/renderer.tsx
@@ -3,10 +3,79 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App'
 
+// Error Boundary Component
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Send error to main process
+    window.electron.logInfo(`[ERROR] ${error.toString()}\n${errorInfo.componentStack}`)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}
+
+// Set up console interceptors
+const originalConsole = {
+  log: console.log,
+  error: console.error,
+  warn: console.warn,
+  info: console.info,
+}
+
+// Intercept console methods
+console.log = (...args) => {
+  window.electron.logInfo(`[LOG] ${args.join(' ')}`)
+  originalConsole.log(...args)
+}
+
+console.error = (...args) => {
+  window.electron.logInfo(`[ERROR] ${args.join(' ')}`)
+  originalConsole.error(...args)
+}
+
+console.warn = (...args) => {
+  window.electron.logInfo(`[WARN] ${args.join(' ')}`)
+  originalConsole.warn(...args)
+}
+
+console.info = (...args) => {
+  window.electron.logInfo(`[INFO] ${args.join(' ')}`)
+  originalConsole.info(...args)
+}
+
+// Capture unhandled promise rejections
+window.addEventListener('unhandledrejection', (event) => {
+  window.electron.logInfo(`[UNHANDLED REJECTION] ${event.reason}`)
+})
+
+// Capture global errors
+window.addEventListener('error', (event) => {
+  window.electron.logInfo(`[GLOBAL ERROR] ${event.message} at ${event.filename}:${event.lineno}:${event.colno}`)
+})
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Router>
-      <App />
-    </Router>
+    <ErrorBoundary>
+      <Router>
+        <App />
+      </Router>
+    </ErrorBoundary>
   </React.StrictMode>,
 )