Merge pull request #61 from zamm-dev/max-lines-input

Constrain max height on chat text input

src-svelte/src/routes/chat/Chat.stories.ts

@@ -116,6 +116,33 @@ MultilineChat.parameters = {
   },
 };
 
+export const ExtraLongInput: StoryObj = Template.bind({}) as any;
+ExtraLongInput.args = {
+  conversation,
+  initialMessage: `Hey, I have this definition for a book object:
+
+\`\`\`python
+class Book:
+  def __init__(self, title, author, pages):
+      self.title = title
+      self.author = author
+      self.pages = pages
+
+  def book_info(self):
+      return f"'{self.title}' by {self.author} has {self.pages} pages."
+
+  def is_long(self):
+      return self.pages > 200
+\`\`\`
+
+Do you have any code comments for me?`,
+};
+ExtraLongInput.parameters = {
+  viewport: {
+    defaultViewport: "smallTablet",
+  },
+};
+
 export const BottomScrollIndicator: StoryObj = Template.bind({}) as any;
 BottomScrollIndicator.args = {
   conversation,

src-svelte/src/routes/chat/Form.svelte

@@ -70,6 +70,7 @@
     font-family: var(--font-body);
     width: 100%;
     min-height: 1.2rem;
+    max-height: 9.8rem;
     resize: none;
   }
 </style>

src-svelte/src/routes/storybook.test.ts

@@ -127,6 +127,7 @@ const components: ComponentTestConfig[] = [
       "empty",
       "not-empty",
       "multiline-chat",
+      "extra-long-input",
       "bottom-scroll-indicator",
       "typing-indicator-static",
       "full-message-width",