Merge branch '25_2' into 25_2_angular_19

Author: GoodDayForSurf

.github/instructions/localization.instructions.md

@@ -0,0 +1,39 @@
+---
+applyTo: "**/localization/messages/**/*.json"
+---
+
+# CRITICAL: DO NOT REVIEW LOCALIZATION FILES
+
+These files are managed by a dedicated localization team through a separate workflow.
+
+## Absolute Prohibitions - You MUST NOT:
+
+- ❌ NEVER suggest translating English text to other languages
+- ❌ NEVER comment that text should be translated to match the locale
+- ❌ NEVER suggest alternative translations or phrasings in any language
+- ❌ NEVER comment on language consistency (e.g., "this should be in Arabic")
+- ❌ NEVER suggest changing text content for localization purposes
+- ❌ NEVER comment on which language should be used
+- ❌ NEVER suggest adding or removing message keys
+- ❌ NEVER provide language-specific style recommendations
+
+## Why These Files Are Off-Limits:
+
+Translation suggestions make PR pages UNRESPONSIVE and overwhelm human reviewers. The localization team handles all translation work through a separate quality assurance process.
+
+## The ONLY Acceptable Comments:
+
+✅ Critical JSON syntax errors that would break the build (missing commas, unclosed brackets)
+✅ Severe grammar errors (ONLY if they would cause user confusion)
+
+## Examples of FORBIDDEN Comments:
+
+- ❌ "This English text should be translated to Arabic"
+- ❌ "Translation is missing for this locale"
+- ❌ "Consider translating '(No subject)' to '(بدون موضوع)'"
+- ❌ "This text is in English but should be in German"
+- ❌ "Inconsistent language - use native translation"
+
+If you have ANY doubt about whether to comment on a localization file, DO NOT COMMENT.
+
+Focus your review on actual code files instead.

apps/react-storybook/stories/chat/Chat.stories.tsx

@@ -790,3 +790,127 @@ export const Editing: Story = {
         );
     }
 };
+
+export const FileAttachments: Story = {
+  args: {
+    user: firstAuthor,
+    ...commonArgs,
+  },
+  argTypes: {
+    user: {
+      control: 'select',
+      options: [firstAuthor.name, secondAuthor.name],
+      mapping: {
+        [firstAuthor.name]: firstAuthor,
+        [secondAuthor.name]: secondAuthor,
+      },
+      defaultValue: firstAuthor.name,
+    },
+  },
+  render: ({
+    width,
+    height,
+    disabled,
+    rtlEnabled,
+    user,
+    visible,
+    activeStateEnabled,
+    hoverStateEnabled,
+    focusStateEnabled,
+  }) => {
+    const [messages, setMessages] = useState<ChatTypes.Message[]>([
+      {
+        id: 1,
+        author: firstAuthor,
+        text: 'Files attached in a very long message: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tempus orci, sit amet tempor tortor. Etiam ut aliquam nisi.',
+        attachments: [
+          { name: 'report.pdf', size: 1024 * 512 },
+          { name: 'presentation.pptx', size: 1024 * 1024 },
+          { name: 'photo.jpg', size: 1024 * 300 },
+          { name: 'song.mp3', size: 1024 * 300 },
+        ],
+      },
+      {
+        id: 2,
+        author: secondAuthor,
+        text: 'Files, short message',
+        attachments: [
+          { name: 'report.pdf', size: 1024 * 512 },
+          { name: 'song.mp3', size: 1024 * 1024 },
+        ],
+      },
+    ]);
+
+    const [toastConfig, setToastConfig] = useState({
+      visible: false,
+      message: '',
+    });
+
+    const onAttachmentDownloadClick = useCallback((e: ChatTypes.AttachmentDownloadClickEvent) => {
+      const { attachment } = e;
+
+      setToastConfig({
+        visible: true,
+        message: `Downloading ${attachment?.name}...`,
+      });
+
+      setTimeout(() => {
+        setToastConfig({
+          visible: true,
+          message: `${attachment?.name} downloaded successfully`,
+        });
+      }, 1000);
+    }, []);
+
+    const onMessageEntered = useCallback(
+      ({ message }) => {
+        setMessages((prev) => [...prev, message]);
+      },
+      []
+    );
+
+    const onToastHiding = useCallback(() => {
+      setToastConfig({ visible: false, message: '' });
+    }, []);
+
+    const fileUploaderOptions = useMemo(() => ({
+        uploadFile: (file: File) => {
+          setToastConfig({
+            visible: true,
+            message: `Uploading ${file.name}...`,
+          });
+          setTimeout(() => {
+            setToastConfig({
+              visible: true,
+              message: `${file.name} uploaded successfully`,
+            });
+          }, 1000);
+        }
+    }), []);
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Chat
+          width={width}
+          height={height}
+          items={messages}
+          disabled={disabled}
+          rtlEnabled={rtlEnabled}
+          user={user}
+          visible={visible}
+          activeStateEnabled={activeStateEnabled}
+          focusStateEnabled={focusStateEnabled}
+          hoverStateEnabled={hoverStateEnabled}
+          onAttachmentDownloadClick={onAttachmentDownloadClick}
+          onMessageEntered={onMessageEntered}
+          fileUploaderOptions={fileUploaderOptions}
+        />
+        <Toast
+          {...toastConfig}
+          onHiding={onToastHiding}
+          displayTime={1000}
+        />
+      </div>
+    );
+  },
+};