chore(Electron template): non-latin text formatting

Author: giladgd

templates/electron-typescript-react/src/App/components/ChatHistory/components/ModelResponseThought/ModelResponseThought.css

@@ -121,6 +121,7 @@
         margin-bottom: 24px;
         opacity: 0.64;
         padding-left: 24px;
+        justify-self: flex-start;
         position: relative;
         overflow: clip;
 
@@ -133,7 +134,7 @@
             width: 4px;
             height: 100%;
             background-color: var(--message-blockquote-border-color);
-            inset-inline-start: 0px;
+            left: 0px;
         }
 
         &.hide {

templates/electron-typescript-react/src/App/components/ChatHistory/components/ModelResponseThought/ModelResponseThought.tsx

@@ -36,7 +36,13 @@ export function ModelResponseThought({text, active, duration}: ModelResponseThou
                 <div className="title">{title}</div>
                 <RightChevronIconSVG className="chevron" />
             </span>
-            <MarkdownContent className={classNames("excerpt", isOpen && "hide")} inline>{text.slice(-excerptLength)}</MarkdownContent>
+            <MarkdownContent
+                className={classNames("excerpt", isOpen && "hide")}
+                dir="auto"
+                inline
+            >
+                {text.slice(-excerptLength)}
+            </MarkdownContent>
         </button>
         <MessageMarkdown className={classNames("content", !isOpen && "hide")} activeDot={active}>{text}</MessageMarkdown>
     </div>;

templates/electron-typescript-react/src/App/components/InputRow/InputRow.css

@@ -82,12 +82,14 @@
                     display: inline;
                     white-space: pre-wrap;
                     word-break: break-word;
+                    unicode-bidi: normal;
                 }
 
                 > .completion {
                     display: inline;
                     white-space: pre-wrap;
                     word-break: break-word;
+                    unicode-bidi: normal;
                 }
 
                 > .pressTab {

templates/electron-typescript-react/src/App/components/MarkdownContent/MarkdownContent.tsx

@@ -18,7 +18,7 @@ const md = markdownit({
     }
 });
 
-export function MarkdownContent({children, inline = false, className}: MarkdownContentProps) {
+export function MarkdownContent({children, inline = false, dir, className}: MarkdownContentProps) {
     const divRef = useRef<HTMLDivElement>(null);
 
     useLayoutEffect(() => {
@@ -34,11 +34,13 @@ export function MarkdownContent({children, inline = false, className}: MarkdownC
     return <div
         className={className}
         ref={divRef}
+        dir={dir}
     />;
 }
 
 type MarkdownContentProps = {
     className?: string,
     inline?: boolean,
+    dir?: string,
     children: string
 };

templates/electron-typescript-react/src/App/components/MessageMarkdown/MessageMarkdown.css

@@ -30,6 +30,10 @@
         margin-bottom: 0px;
     }
 
+    * {
+        unicode-bidi: plaintext;
+    }
+
     h2 {
         margin: 16px 0px;
         padding-top: 24px;