🔄 feat: chat direction (LTR-RTL) (#3260)

* feat: chat direction * fix: FileRow * feat: smooth trigger transition
2026-01-07 11:08:52 +01:00 · 2024-07-17 16:08:13 +02:00 · 2024-07-17 16:08:13 +02:00 · 237a0de8b6
commit 237a0de8b6
parent d5782ac66c
31 changed files with 145 additions and 111 deletions
--- a/client/src/components/Chat/Input/AudioRecorder.tsx
+++ b/client/src/components/Chat/Input/AudioRecorder.tsx
@ -4,16 +4,19 @@ import { ListeningIcon, Spinner } from '~/components/svg';
 import { useLocalize, useSpeechToText } from '~/hooks';
 import { useChatFormContext } from '~/Providers';
 import { globalAudioId } from '~/common';
+import { cn } from '~/utils';

 export default function AudioRecorder({
  textAreaRef,
  methods,
  ask,
+  isRTL,
  disabled,
 }: {
  textAreaRef: React.RefObject<HTMLTextAreaElement>;
  methods: ReturnType<typeof useChatFormContext>;
  ask: (data: { text: string }) => void;
+  isRTL: boolean;
  disabled: boolean;
 }) {
  const localize = useLocalize();
@ -77,7 +80,12 @@ export default function AudioRecorder({
          <button
            onClick={isListening ? handleStopRecording : handleStartRecording}
            disabled={disabled}
-            className="absolute bottom-1.5 right-12 flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 md:bottom-3 md:right-12"
+            className={cn(
+              'absolute flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700',
+              isRTL
+                ? 'bottom-1.5 left-4 md:bottom-3 md:left-12'
+                : 'bottom-1.5 right-12 md:bottom-3 md:right-12',
+            )}
            type="button"
          >
            {renderIcon()}
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@ -48,6 +48,9 @@ const ChatForm = ({ index = 0 }) => {
    store.showMentionPopoverFamily(index),
  );

+  const chatDirection = useRecoilValue(store.chatDirection).toLowerCase();
+  const isRTL = chatDirection === 'rtl';
+
  const { requiresKey } = useRequiresKey();
  const handleKeyUp = useHandleKeyUp({
    index,
@ -149,6 +152,7 @@ const ChatForm = ({ index = 0 }) => {
              files={files}
              setFiles={setFiles}
              setFilesLoading={setFilesLoading}
+              isRTL={isRTL}
              Wrapper={({ children }) => (
                <div className="mx-2 mt-2 flex flex-wrap gap-2 px-2.5 md:pl-0 md:pr-4">
                  {children}
@ -179,7 +183,7 @@ const ChatForm = ({ index = 0 }) => {
                    ? ' pl-10 md:pl-[55px]'
                    : 'pl-3 md:pl-4',
                  'm-0 w-full resize-none border-0 bg-transparent py-[10px] placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5  ',
-                  SpeechToText ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
+                  SpeechToText && !isRTL ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
                  'max-h-[65vh] md:max-h-[75vh]',
                  removeFocusRings,
                )}
@ -188,15 +192,21 @@ const ChatForm = ({ index = 0 }) => {
            <AttachFile
              endpoint={_endpoint ?? ''}
              endpointType={endpointType}
+              isRTL={isRTL}
              disabled={disableInputs}
            />
            {(isSubmitting || isSubmittingAdded) && (showStopButton || showStopAdded) ? (
-              <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
+              <StopButton
+                stop={handleStopGenerating}
+                setShowStopButton={setShowStopButton}
+                isRTL={isRTL}
+              />
            ) : (
              endpoint && (
                <SendButton
                  ref={submitButtonRef}
                  control={methods.control}
+                  isRTL={isRTL}
                  disabled={!!(filesLoading || isSubmitting || disableInputs)}
                />
              )
@ -206,6 +216,7 @@ const ChatForm = ({ index = 0 }) => {
                disabled={!!disableInputs}
                textAreaRef={textAreaRef}
                ask={submitMessage}
+                isRTL={isRTL}
                methods={methods}
              />
            )}
--- a/client/src/components/Chat/Input/Files/AttachFile.tsx
+++ b/client/src/components/Chat/Input/Files/AttachFile.tsx
@ -9,14 +9,17 @@ import { useGetFileConfig } from '~/data-provider';
 import { AttachmentIcon } from '~/components/svg';
 import { FileUpload } from '~/components/ui';
 import { useFileHandling } from '~/hooks';
+import { cn } from '~/utils';

 const AttachFile = ({
  endpoint,
  endpointType,
+  isRTL,
  disabled = false,
 }: {
  endpoint: EModelEndpoint | '';
  endpointType?: EModelEndpoint;
+  isRTL: boolean;
  disabled?: boolean | null;
 }) => {
  const { handleFileChange } = useFileHandling();
@ -30,7 +33,14 @@ const AttachFile = ({
  }

  return (
-    <div className="absolute bottom-2 left-2 md:bottom-3 md:left-4">
+    <div
+      className={cn(
+        'absolute',
+        isRTL
+          ? 'bottom-2 right-14 md:bottom-3.5 md:right-3'
+          : 'bottom-2 left-2 md:bottom-3.5 md:left-4',
+      )}
+    >
      <FileUpload handleFileChange={handleFileChange} className="flex">
        <button
          disabled={!!disabled}
--- a/client/src/components/Chat/Input/Files/FileRow.tsx
+++ b/client/src/components/Chat/Input/Files/FileRow.tsx
@ -13,6 +13,7 @@ export default function FileRow({
  assistant_id,
  tool_resource,
  fileFilter,
+  isRTL,
  Wrapper,
 }: {
  files: Map<string, ExtendedFile>;
@ -21,6 +22,7 @@ export default function FileRow({
  fileFilter?: (file: ExtendedFile) => boolean;
  assistant_id?: string;
  tool_resource?: EToolResources;
+  isRTL?: boolean;
  Wrapper?: React.FC<{ children: React.ReactNode }>;
 }) {
  const files = Array.from(_files.values()).filter((file) =>
@ -64,8 +66,11 @@ export default function FileRow({
  }

  const renderFiles = () => {
+    // Inline style for RTL
+    const rowStyle = isRTL ? { display: 'flex', flexDirection: 'row-reverse' } : {};
+
    return (
-      <>
+      <div style={rowStyle as React.CSSProperties}>
        {files
          .reduce(
            (acc, current) => {
@ -90,10 +95,9 @@ export default function FileRow({
                />
              );
            }
-
            return <FileContainer key={index} file={file} onDelete={handleDelete} />;
          })}
-      </>
+      </div>
    );
  };

--- a/client/src/components/Chat/Input/SendButton.tsx
+++ b/client/src/components/Chat/Input/SendButton.tsx
@ -9,42 +9,48 @@ import { cn } from '~/utils';
 type SendButtonProps = {
  disabled: boolean;
  control: Control<{ text: string }>;
+  isRTL: boolean;
 };

 const SubmitButton = React.memo(
-  forwardRef((props: { disabled: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
-    const localize = useLocalize();
-    return (
-      <TooltipProvider delayDuration={250}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              ref={ref}
-              disabled={props.disabled}
-              className={cn(
-                'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
-              )}
-              data-testid="send-button"
-              type="submit"
-            >
-              <span className="" data-state="closed">
-                <SendIcon size={24} />
-              </span>
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={10}>
-            {localize('com_nav_send_message')}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }),
+  forwardRef(
+    (props: { disabled: boolean; isRTL: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
+      const localize = useLocalize();
+      return (
+        <TooltipProvider delayDuration={250}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                ref={ref}
+                disabled={props.disabled}
+                className={cn(
+                  'absolute rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
+                  props.isRTL
+                    ? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
+                    : 'bottom-1.5 right-2 md:bottom-3 md:right-3',
+                )}
+                data-testid="send-button"
+                type="submit"
+              >
+                <span className="" data-state="closed">
+                  <SendIcon size={24} />
+                </span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={10}>
+              {localize('com_nav_send_message')}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  ),
 );

 const SendButton = React.memo(
  forwardRef((props: SendButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
    const data = useWatch({ control: props.control });
-    return <SubmitButton ref={ref} disabled={props.disabled || !data?.text} />;
+    return <SubmitButton ref={ref} disabled={props.disabled || !data?.text} isRTL={props.isRTL} />;
  }),
 );

--- a/client/src/components/Chat/Input/StopButton.tsx
+++ b/client/src/components/Chat/Input/StopButton.tsx
@ -1,6 +1,13 @@
-export default function StopButton({ stop, setShowStopButton }) {
+import { cn } from '~/utils';
+
+export default function StopButton({ stop, setShowStopButton, isRTL }) {
  return (
-    <div className="absolute bottom-3 right-2 md:bottom-4 md:right-4">
+    <div
+      className={cn(
+        'absolute',
+        isRTL ? 'bottom-3 left-2 md:bottom-4 md:left-4' : 'bottom-3 right-2 md:bottom-4 md:right-4',
+      )}
+    >
      <button
        type="button"
        className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"