fix: Enhance component styles and configurations

- Updated `markdown.tsx` to include `break-words` class for list items to improve text wrapping.
- Modified `mention-input.tsx` to configure `StarterKit` by disabling code block, blockquote, and code features.
- Adjusted `message-parts.tsx` to add `max-w-full` class for better layout and `break-words` for text wrapping in user messages.
- Updated keyboard shortcut in `keyboard-shortcuts.ts` to include `shift` key for toggling voice chat.

Author: cgoinglove

src/components/markdown.tsx

@@ -60,7 +60,7 @@ const components: Partial<Components> = {
   },
   li: ({ node, children, ...props }) => {
     return (
-      <li className="py-2" {...props}>
+      <li className="py-2 break-words" {...props}>
         <WordByWordFadeIn>{children}</WordByWordFadeIn>
       </li>
     );

src/components/mention-input.tsx

@@ -104,7 +104,11 @@ export default function MentionInput({
     () => ({
       immediatelyRender: false,
       extensions: [
-        StarterKit,
+        StarterKit.configure({
+          codeBlock: false,
+          blockquote: false,
+          code: false,
+        }),
         Mention.configure({
           HTMLAttributes: {
             class: "mention",

src/components/message-parts.tsx

@@ -176,12 +176,9 @@ export const UserMessagePart = ({
   return (
     <div className="flex flex-col gap-2 items-end my-2">
       <div
-        onClick={() => {
-          ref.current?.scrollIntoView({ behavior: "smooth" });
-        }}
         data-testid="message-content"
         className={cn(
-          "flex flex-col gap-4",
+          "flex flex-col gap-4 max-w-full",
           {
             "bg-accent text-accent-foreground px-4 py-3 rounded-2xl":
               isLast || part.text.length <= PROMPT_PASTE_MAX_LENGTH,
@@ -191,7 +188,7 @@ export const UserMessagePart = ({
         )}
       >
         {isLast || part.text.length <= PROMPT_PASTE_MAX_LENGTH ? (
-          <p className={cn("whitespace-pre-wrap text-sm")}>
+          <p className={cn("whitespace-pre-wrap text-sm break-words")}>
             <HighlightedText text={part.text} mentions={toolMentions} />
           </p>
         ) : (

src/lib/keyboard-shortcuts.ts

@@ -32,6 +32,7 @@ const toggleVoiceChatShortcut: Shortcut = {
   shortcut: {
     key: "I",
     command: true,
+    shift: true,
   },
 };