✨ feat: Enhance form submission for touch screens (#7198)

* ✨ feat: Enhance form submission for touch screens

* chore: add comment

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: add comment

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: linting in AnthropicClient

* chore: Add anthropic model outputs for Claude 3.7

* refactor: Simplify touch-screen detection in message submission

* fix: Correct button rendering order for chat collapse/expand icons

* Revert "refactor: Simplify touch-screen detection in message submission"

This reverts commit 8638442a4c.

* refactor: Improve touchscreen detection for focus handling in ChatForm and useFocusChatEffect

* chore: EditMessage linting

* refactor: Reorder dropdown items in ExportAndShareMenu

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Danny Avila <danny@librechat.ai>

api/app/clients/AnthropicClient.js

@@ -396,13 +396,13 @@ class AnthropicClient extends BaseClient {
     const formattedMessages = orderedMessages.map((message, i) => {
       const formattedMessage = this.useMessages
         ? formatMessage({
-          message,
-          endpoint: EModelEndpoint.anthropic,
-        })
+            message,
+            endpoint: EModelEndpoint.anthropic,
+          })
         : {
-          author: message.isCreatedByUser ? this.userLabel : this.assistantLabel,
-          content: message?.content ?? message.text,
-        };
+            author: message.isCreatedByUser ? this.userLabel : this.assistantLabel,
+            content: message?.content ?? message.text,
+          };
 
       const needsTokenCount = this.contextStrategy && !orderedMessages[i].tokenCount;
       /* If tokens were never counted, or, is a Vision request and the message has files, count again */
@@ -680,7 +680,7 @@ class AnthropicClient extends BaseClient {
   }
 
   getCompletion() {
-    logger.debug('AnthropicClient doesn\'t use getCompletion (all handled in sendCompletion)');
+    logger.debug("AnthropicClient doesn't use getCompletion (all handled in sendCompletion)");
   }
 
   /**
@@ -888,7 +888,7 @@ class AnthropicClient extends BaseClient {
   }
 
   getBuildMessagesOptions() {
-    logger.debug('AnthropicClient doesn\'t use getBuildMessagesOptions');
+    logger.debug("AnthropicClient doesn't use getBuildMessagesOptions");
   }
 
   getEncoding() {

api/utils/tokens.js

@@ -239,12 +239,15 @@ const modelMaxOutputs = {
   system_default: 1024,
 };
 
+/** Outputs from https://docs.anthropic.com/en/docs/about-claude/models/all-models#model-names */
 const anthropicMaxOutputs = {
   'claude-3-haiku': 4096,
   'claude-3-sonnet': 4096,
   'claude-3-opus': 4096,
   'claude-3.5-sonnet': 8192,
   'claude-3-5-sonnet': 8192,
+  'claude-3.7-sonnet': 128000,
+  'claude-3-7-sonnet': 128000,
 };
 
 const maxOutputTokensMap = {

client/src/components/Chat/ExportAndShareMenu.tsx

@@ -44,15 +44,6 @@ export default function ExportAndShareMenu({
   };
 
   const dropdownItems: t.MenuItemProps[] = [
-    {
-      label: localize('com_endpoint_export'),
-      onClick: exportHandler,
-      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
-      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
-      hideOnClick: false,
-      ref: exportButtonRef,
-      render: (props) => <button {...props} />,
-    },
     {
       label: localize('com_ui_share'),
       onClick: shareHandler,
@@ -63,6 +54,15 @@ export default function ExportAndShareMenu({
       ref: shareButtonRef,
       render: (props) => <button {...props} />,
     },
+    {
+      label: localize('com_endpoint_export'),
+      onClick: exportHandler,
+      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
+      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+      hideOnClick: false,
+      ref: exportButtonRef,
+      render: (props) => <button {...props} />,
+    },
   ];
 
   return (
@@ -81,7 +81,7 @@ export default function ExportAndShareMenu({
                 aria-label="Export options"
                 className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
               >
-                <Upload
+                <Share2
                   className="icon-md text-text-secondary"
                   aria-hidden="true"
                   focusable="false"

client/src/components/Chat/Input/ChatForm.tsx

@@ -108,6 +108,10 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   );
 
   const handleContainerClick = useCallback(() => {
+    /** Check if the device is a touchscreen */
+    if (window.matchMedia?.('(pointer: coarse)').matches) {
+      return;
+    }
     textAreaRef.current?.focus();
   }, []);
 
@@ -126,6 +130,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   });
 
   const { submitMessage, submitPrompt } = useSubmitMessage();
+
   const handleKeyUp = useHandleKeyUp({
     index,
     textAreaRef,

client/src/components/Chat/Input/CollapseChat.tsx

@@ -41,9 +41,9 @@ const CollapseChat = ({
             )}
           >
             {isCollapsed ? (
-              <ChevronDown className="h-full w-full" />
-            ) : (
               <ChevronUp className="h-full w-full" />
+            ) : (
+              <ChevronDown className="h-full w-full" />
             )}
           </button>
         }

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -113,9 +113,9 @@ const EditMessage = ({
         messages.map((msg) =>
           msg.messageId === messageId
             ? {
-              ...msg,
-              text: data.text,
-            }
+                ...msg,
+                text: data.text,
+              }
             : msg,
         ),
       );

client/src/hooks/Chat/useFocusChatEffect.ts

@@ -11,7 +11,10 @@ export default function useFocusChatEffect(textAreaRef: React.RefObject<HTMLText
         'conversation',
         `Focusing textarea on location state change: ${location.pathname}`,
       );
-      textAreaRef.current?.focus();
+      /** Check if the device is not a touchscreen */
+      if (!window.matchMedia?.('(pointer: coarse)').matches) {
+        textAreaRef.current?.focus();
+      }
       navigate(`${location.pathname}${location.search ?? ''}`, { replace: true, state: {} });
     }
   }, [navigate, textAreaRef, location.pathname, location.state?.focusChat, location.search]);