sweet lander

packages/client/src/components/chat/Chat.tsx

@@ -28,7 +28,7 @@ const Chat = observer(({ height, width }) => {
       <GridItem
         overflow="auto"
         width="100%"
-        maxH="100%"
+        maxH="100vh"
         ref={scrollRef}
         // If there are attachments, use "100px". Otherwise, use "128px" on Android, "73px" elsewhere.
         pb={isAndroid ? '128px' : '73px'}

packages/client/src/components/chat/input/ChatInput.tsx

@@ -22,7 +22,7 @@ const ChatInput = observer(() => {
   const [shouldFollow, setShouldFollow] = useState<boolean>(userOptionsStore.followModeEnabled);
   const [couldFollow, setCouldFollow] = useState<boolean>(chatStore.isLoading);
 
-  const [inputWidth, setInputWidth] = useState<string>('50%');
+  const [inputWidth, setInputWidth] = useState<string>('40%');
 
   useEffect(() => {
     setShouldFollow(chatStore.isLoading && userOptionsStore.followModeEnabled);
@@ -64,10 +64,10 @@ const ChatInput = observer(() => {
   };
 
   const inputMaxWidth = useBreakpointValue(
-    { base: '50rem', lg: '50rem', md: '80%', sm: '100vw' },
+    { base: '30rem', lg: '50rem', md: '80%', sm: '100vw' },
     { ssr: true },
   );
-  const inputMinWidth = useBreakpointValue({ lg: '40rem' }, { ssr: true });
+  const inputMinWidth = useBreakpointValue({ lg: '40rem', md: '30rem' }, { ssr: true });
 
   useEffect(() => {
     setInputWidth('100%');
@@ -75,9 +75,7 @@ const ChatInput = observer(() => {
 
   return (
     <Box
-      width={inputWidth}
-      maxW={inputMaxWidth}
-      minWidth={inputMinWidth}
+      width={inputMinWidth}
       mx="auto"
       p={2}
       pl={2}

packages/client/src/components/chat/input/ChatInputTextArea.tsx

@@ -1,4 +1,4 @@
-import { Box, chakra, InputGroup } from '@chakra-ui/react';
+import { Box, chakra, InputGroup, useBreakpointValue } from '@chakra-ui/react';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef, useState } from 'react';
 import AutoResize from 'react-textarea-autosize';
@@ -19,7 +19,7 @@ const InputTextArea: React.FC<InputTextAreaProps> = observer(
 
     useEffect(() => {
       if (value.length > 10) {
-        setHeightConstraint();
+        setHeightConstraint(parseInt(value));
       }
     }, [value]);
 
@@ -38,6 +38,7 @@ const InputTextArea: React.FC<InputTextAreaProps> = observer(
             ref={inputRef}
             value={value}
             height={heightConstraint}
+            maxH={heightConstraint}
             autoFocus
             onChange={e => onChange(e.target.value)}
             onKeyDown={onKeyDown}
@@ -48,8 +49,14 @@ const InputTextArea: React.FC<InputTextAreaProps> = observer(
             color="text.primary"
             borderRadius="20px"
             border="none"
-            placeholder="Free my mind..."
-            _placeholder={{ color: 'gray.400' }}
+            placeholder="To Gilligan's island!"
+            _placeholder={{
+              color: 'gray.400',
+              textWrap: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              width: '90%',
+            }}
             _focus={{
               outline: 'none',
             }}

packages/client/src/components/chat/lib/exportConversationAsMarkdown.ts

@@ -9,7 +9,7 @@ export function formatConversationMarkdown(messages: Instance<typeof IMessage>[]
       if (message.role === 'user') {
         return `**You**: ${message.content}`;
       } else if (message.role === 'assistant') {
-        return `**Geoff's AI**: ${message.content}`;
+        return `**yachtpit-ai**: ${message.content}`;
       }
       return '';
     })

packages/client/src/components/chat/messages/MessageBubble.tsx

@@ -51,7 +51,7 @@ const MessageBubble = observer(({ msg, scrollRef }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const isUser = msg.role === 'user';
-  const senderName = isUser ? 'You' : "Geoff's AI";
+  const senderName = isUser ? 'You' : 'yachtpit-ai';
   const isLoading = !msg.content || !(msg.content.trim().length > 0);
   const messageRef = useRef();
 

packages/client/src/components/chat/messages/__tests__/MessageBubble.test.tsx

@@ -104,7 +104,7 @@ describe('MessageBubble', () => {
   it('should render assistant message correctly', () => {
     render(<MessageBubble msg={mockAssistantMessage} scrollRef={mockScrollRef} />);
 
-    expect(screen.getByText("Geoff's AI")).toBeInTheDocument();
+    expect(screen.getByText('yachtpit-ai')).toBeInTheDocument();
     expect(screen.getByTestId('message-content')).toHaveTextContent('Assistant response');
   });