Add auto translation using llms

Author: ericnewcomer

src/components/flow/exit/Exit.module.scss

@@ -29,8 +29,7 @@
       border-bottom-right-radius: 0px !important;
     }
 
-    border-left: 1px solid darken($translation_bg, 5%);
-    background: $translation_bg;
+
 
     .endpoint {
       position: relative;
@@ -50,7 +49,10 @@
   }
 
   &.missing_localization {
+
     color: $translation_missing;
+    border-left: 1px solid darken($translation_bg, 5%);
+    background: $translation_bg;
 
     &:last-child {
       border-bottom-right-radius: $curvature;
@@ -90,9 +92,11 @@
         color: #fff;
       }
     }
+
     .endpoint {
       background: $red !important;
       border-color: $red !important;
+
       .confirm_x {
         color: white;
         position: absolute;
@@ -167,7 +171,7 @@
     text-align: left;
     padding: 8px 10px;
     border-top: 1px solid $light_gray;
-    
+
     .operand {
       padding-top: 3px;
       font-size: 12px;
@@ -182,4 +186,4 @@
 
 .confirm_x {
   color: white;
-}
+}

src/components/index.tsx

@@ -36,7 +36,9 @@ import {
   UpdateTranslationFilters,
   updateTranslationFilters,
   reset,
-  Reset
+  Reset,
+  OnUpdateLocalizations,
+  onUpdateLocalizations
 } from 'store/thunks';
 import { ACTIVITY_INTERVAL, downloadJSON, renderIf, onNextRender } from 'utils';
 import { PopTabType } from 'config/interfaces';
@@ -73,6 +75,7 @@ export interface FlowEditorStoreProps {
   scrollToAction: string;
   popped: string;
   updateTranslationFilters: UpdateTranslationFilters;
+  onUpdateLocalizations: OnUpdateLocalizations;
 }
 
 const hotStore = createStore();
@@ -281,6 +284,7 @@ export class FlowEditor extends React.Component<FlowEditorStoreProps> {
 
             {renderIf(this.props.definition && this.props.translating && !this.props.fetchingFlow)(
               <TranslatorTab
+                baseLanguage={this.props.baseLanguage}
                 language={this.props.language}
                 languages={this.props.languages ? this.props.languages.items : {}}
                 localization={
@@ -291,6 +295,7 @@ export class FlowEditor extends React.Component<FlowEditorStoreProps> {
                 onTranslationClicked={this.handleScrollToTranslation}
                 onTranslationOpened={this.handleOpenTranslation}
                 onTranslationFilterChanged={this.props.updateTranslationFilters}
+                onUpdateLocalizations={this.props.onUpdateLocalizations}
                 translationFilters={
                   this.props.definition ? this.props.definition._ui.translation_filters : null
                 }
@@ -373,6 +378,7 @@ const mapDispatchToProps = (dispatch: DispatchWithState) =>
       onOpenNodeEditor,
       handleLanguageChange,
       updateTranslationFilters,
+      onUpdateLocalizations,
       reset
     },
     dispatch

src/components/nodeeditor/NodeEditor.tsx

@@ -103,7 +103,7 @@ export class NodeEditor extends React.Component<NodeEditorProps> {
   }
 
   private updateLocalizations(language: string, changes: LocalizationUpdates) {
-    this.props.onUpdateLocalizations(language, changes);
+    this.props.onUpdateLocalizations(language, false, changes);
   }
 
   private removeLocalizations(uuid: string, keys?: string[]) {

src/components/translator/TranslatorTab.module.scss

@@ -28,6 +28,7 @@
   border-radius: 4px;
   transition: all 500ms ease-in-out;
   opacity: 1;
+
   &.complete {
     opacity: 0;
     padding: 0px;
@@ -42,17 +43,21 @@
   background: $red;
 }
 
+
+
 .options {
   background: #777;
   color: $light_gray_2;
   padding-top: 4px;
 
   &.options_visible {
+    padding-bottom: 4px;
+
     .filters {
       height: 35px;
-      padding: 6px;
       opacity: 1;
       padding-bottom: 0px;
+
       .pct_complete {
         opacity: 1;
       }
@@ -65,25 +70,20 @@
     }
   }
 
-  &.change_visible {
-    .changeLanguage {
-      height: 20px;
-      padding: 6px;
-      opacity: 1;
-    }
-  }
-
   &:hover {
     .header {
       .progress_bar {
         .filled {
           background: lighten($blue, 3%);
         }
+
         &.hundredpct {
           background: lighten($lime, 3%);
         }
+
         border: solid 1px rgba(100, 100, 100, 0.7);
       }
+
       .toggle {
         color: $light_gray_2;
       }
@@ -130,35 +130,55 @@
     font-size: 12px;
     display: flex;
     flex-flow: wrap;
+    align-items: center;
 
     .pct_complete {
       font-size: 18px;
       align-self: center;
-      margin-top: -6px;
-      padding: 0px 4px;
+
+      padding: 0px 6px;
       opacity: 0;
       cursor: pointer;
       transition: opacity 600ms ease-in-out;
     }
+
     .checkboxes {
       flex-grow: 1;
-      > div:last-child {
-        margin-top: 4px;
-      }
+      --checkbox-padding: 2px 6px;
+      --checkbox-hover-bg: rgba(0, 0, 0, 0.1);
+      --color-text: rgba(255, 255, 255, 0.8);
+
     }
   }
 
-  .changeLanguage {
-    height: 0px;
-    opacity: 0;
+  .buttons {
+    display: flex;
 
     button {
-      background: #777;
+      background: rgba(0, 0, 0, 0.1);
       color: $light_gray_2;
-      border: solid 1px $light_gray_2;
+      border: solid 1px rgba(255, 255, 255, 0.5);
       width: 100%;
+      border-radius: var(--curvature);
+      margin: 4px;
+      padding: 2px 0px;
+    }
+
+    button:hover {
+      background: rgba(0, 0, 0, 0.2);
+      cursor: pointer;
     }
   }
+
+  button.auto_translating {
+    background: #fff;
+    color: #777;
+  }
+
+  button.auto_translating:hover {
+    background: #fff;
+  }
+
 }
 
 .translate_block {
@@ -236,4 +256,4 @@
       font-size: 10px;
     }
   }
-}
+}

src/components/translator/TranslatorTab.test.tsx

@@ -97,7 +97,7 @@ const createRouterNode = (
 describe(TranslatorTab.name, () => {
   it('renders', () => {
     const { baseElement, getByText } = render(<TranslatorTab {...translatorProps} />);
-    getByText('Spanish Translations');
+    getByText('Spanish');
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -109,7 +109,6 @@ describe(TranslatorTab.name, () => {
 
     // we pulled out all the localizable bits
     getByText('Hello World!');
-    getByText('Quick Replies');
 
     getByText('0%');
     expect(baseElement).toMatchSnapshot();
@@ -144,9 +143,6 @@ describe(TranslatorTab.name, () => {
     // category list
     getByText('Red, Green, Blue, Other');
 
-    // rule list
-    getByText('red, green, blue');
-
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -161,8 +157,6 @@ describe(TranslatorTab.name, () => {
 
     // category list
     getByText('Blue, Other');
-    getByText('29%');
-
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -175,7 +169,6 @@ describe(TranslatorTab.name, () => {
 
     rerender(<TranslatorTab {...translatorProps} {...updates} />);
     expect(queryByText('Hello World!')).toBeNull();
-    getByText('50%');
     expect(baseElement).toMatchSnapshot();
   });
 });