🌍 : Updated Translations & AI Generation Scripts (#2666)

* chore: bun scripts * feat: comparisons * refactor: move scripts to own folder * feat: generated prompts script and Es output * feat: generated prompts * created prompts * feat: Russian localization prompts * translation setup * additional ES translations * additional ES translations * translation services * feat: additional translations * fix regex for parseParamPrompt * RU translations * remove stores from git * update gitignore * update gitignore * ZH translations * move gen prompt output location * ZH traditional translations * AR translations * chore: rename * JP * cleanup scripts * add additional instruction prompts * fix translation prompt and add DE * FR translations (rate limited so not complete) * chore: update translation comparisons * chore: remove unused AnthropicClient changes * refactor: use compositional styling for archive/delete buttons, fix manage archive table styling
danny-avila · May 10, 2024 · 2ec821e · 2ec821e
1 parent 9780097
commit 2ec821e
Show file tree

Hide file tree

Showing 66 changed files with 51,655 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,10 @@ coverage
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
+# translation services
+config/translations/stores/*
+client/src/localization/languages/*_missing_keys.json
+
 # Compiled Dirs (http://nodejs.org/api/addons.html)
 build/
 dist/

diff --git a/api/app/clients/AnthropicClient.js b/api/app/clients/AnthropicClient.js
@@ -7,10 +7,10 @@ const {
 } = require('librechat-data-provider');
 const { encodeAndFormat } = require('~/server/services/Files/images/encode');
 const {
-  titleFunctionPrompt,
-  parseTitleFromPrompt,
   truncateText,
   formatMessage,
+  titleFunctionPrompt,
+  parseParamFromPrompt,
   createContextHandlers,
 } = require('./prompts');
 const spendTokens = require('~/models/spendTokens');
@@ -748,7 +748,7 @@ class AnthropicClient extends BaseClient {
           context: 'title',
         });
         const text = response.content[0].text;
-        title = parseTitleFromPrompt(text);
+        title = parseParamFromPrompt(text, 'title');
       } catch (e) {
         logger.error('[AnthropicClient] There was an issue generating the title', e);
       }

diff --git a/api/app/clients/prompts/titlePrompts.js b/api/app/clients/prompts/titlePrompts.js
@@ -59,31 +59,64 @@ Submit a brief title in the conversation's language, following the parameter des
 </tool_description>
 </tools>`;
 
-/**
- * Parses titles from title functions based on the provided prompt.
- * @param {string} prompt - The prompt containing the title function.
- * @returns {string} The parsed title. "New Chat" if no title is found.
- */
-function parseTitleFromPrompt(prompt) {
-  const titleRegex = /<title>(.+?)<\/title>/;
-  const titleMatch = prompt.match(titleRegex);
+const genTranslationPrompt = (
+  translationPrompt,
+) => `In this environment you have access to a set of tools you can use to translate text.
+  
+You may call them like this:
+<function_calls>
+<invoke>
+<tool_name>$TOOL_NAME</tool_name>
+<parameters>
+<$PARAMETER_NAME>$PARAMETER_VALUE</$PARAMETER_NAME>
+...
+</parameters>
+</invoke>
+</function_calls>
 
-  if (titleMatch && titleMatch[1]) {
-    const title = titleMatch[1].trim();
+Here are the tools available:
+<tools>
+<tool_description>
+<tool_name>submit_translation</tool_name>
+<description>
+Submit a translation in the target language, following the parameter description and its language closely.
+</description>
+<parameters>
+<parameter>
+<name>translation</name>
+<type>string</type>
+<description>${translationPrompt}
+ONLY include the generated translation without quotations, nor its related key</description>
+</parameter>
+</parameters>
+</tool_description>
+</tools>`;
 
-    // // Capitalize the first letter of each word; Note: unnecessary due to title case prompting
-    // const capitalizedTitle = title.replace(/\b\w/g, (char) => char.toUpperCase());
+/**
+ * Parses specified parameter from the provided prompt.
+ * @param {string} prompt - The prompt containing the desired parameter.
+ * @param {string} paramName - The name of the parameter to extract.
+ * @returns {string} The parsed parameter's value or a default value if not found.
+ */
+function parseParamFromPrompt(prompt, paramName) {
+  const paramRegex = new RegExp(`<${paramName}>([\\s\\S]+?)</${paramName}>`);
+  const paramMatch = prompt.match(paramRegex);
 
-    return title;
+  if (paramMatch && paramMatch[1]) {
+    return paramMatch[1].trim();
   }
 
-  return 'New Chat';
+  if (prompt && prompt.length) {
+    return `NO TOOL INVOCATION: ${prompt}`;
+  }
+  return `No ${paramName} provided`;
 }
 
 module.exports = {
   langPrompt,
   titleInstruction,
   createTitlePrompt,
   titleFunctionPrompt,
-  parseTitleFromPrompt,
+  parseParamFromPrompt,
+  genTranslationPrompt,
 };
diff --git a/api/package.json b/api/package.json
@@ -58,6 +58,7 @@
     "firebase": "^10.6.0",
     "googleapis": "^126.0.1",
     "handlebars": "^4.7.7",
+    "hnswlib-node": "^1.4.2",
     "html": "^1.0.0",
     "ioredis": "^5.3.2",
     "js-yaml": "^4.1.0",

diff --git a/bun.lockb b/bun.lockb
diff --git a/client/src/components/Conversations/ArchiveButton.tsx b/client/src/components/Conversations/ArchiveButton.tsx
@@ -13,14 +13,14 @@ type ArchiveButtonProps = {
   retainView: () => void;
   shouldArchive: boolean;
   icon: React.ReactNode;
-  twcss?: string;
+  className?: string;
 };
 export default function ArchiveButton({
   conversationId,
   retainView,
   shouldArchive,
   icon,
-  twcss = undefined,
+  className = '',
 }: ArchiveButtonProps) {
   const localize = useLocalize();
   const { newConversation } = useNewConvo();
@@ -58,14 +58,9 @@ export default function ArchiveButton({
       },
     );
   };
-  const classProp: { className?: string } = {
-    className: 'z-50 hover:text-black dark:hover:text-white',
-  };
-  if (twcss) {
-    classProp.className = twcss;
-  }
+
   return (
-    <button type="button" className={classProp.className} onClick={archiveHandler}>
+    <button type="button" className={className} onClick={archiveHandler}>
       <TooltipProvider delayDuration={250}>
         <Tooltip>
           <TooltipTrigger asChild>

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
@@ -155,10 +155,11 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
               renaming={renaming}
               title={title}
               appendLabel={true}
-              className="mt-[3.5px]"
+              className="group m-1.5 mt-[3.5px] flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
             />
           </EditMenuButton>
           <ArchiveButton
+            className="z-50 hover:text-black dark:hover:text-white"
             conversationId={conversationId}
             retainView={retainView}
             shouldArchive={true}

diff --git a/client/src/components/Conversations/DeleteButton.tsx b/client/src/components/Conversations/DeleteButton.tsx
@@ -16,7 +16,6 @@ import {
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { TrashIcon, CrossIcon } from '~/components/svg';
 import { useLocalize, useNewConvo } from '~/hooks';
-import { cn } from '~/utils';
 
 export default function DeleteButton({
   conversationId,
@@ -59,7 +58,7 @@ export default function DeleteButton({
         <Tooltip>
           <TooltipTrigger asChild>
             <span>
-              <TrashIcon />
+              <TrashIcon className="h-5 w-5" />
             </span>
           </TooltipTrigger>
           <TooltipContent side="top" sideOffset={0}>
@@ -73,14 +72,7 @@ export default function DeleteButton({
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <button
-          className={cn(
-            'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
-            className,
-          )}
-        >
-          {renaming ? <CrossIcon /> : renderDeleteButton()}
-        </button>
+        <button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
       </DialogTrigger>
       <DialogTemplate
         showCloseButton={false}

diff --git a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
@@ -79,19 +79,20 @@ export default function ArchivedChatsTable({ className }: { className?: string }
                     {conversation.conversationId && (
                       <>
                         <ArchiveButton
+                          className="hover:text-black dark:hover:text-white"
                           conversationId={conversation.conversationId}
                           retainView={moveToTop}
                           shouldArchive={false}
                           icon={<ArchiveRestore className="h-4 w-4 hover:text-gray-300" />}
                         />
-                        <div className="h-4 w-4 hover:text-gray-300">
+                        <div className="h-5 w-5 hover:text-gray-300">
                           <DeleteButton
                             conversationId={conversation.conversationId}
                             retainView={moveToTop}
                             renaming={false}
                             title={conversation.title}
                             appendLabel={false}
-                            className="mx-3 flex items-center"
+                            className="group ml-4 flex w-full cursor-pointer items-center items-center gap-2 rounded text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
                           />
                         </div>
                       </>

diff --git a/client/src/components/svg/TrashIcon.tsx b/client/src/components/svg/TrashIcon.tsx
@@ -1,12 +1,14 @@
-export default function TrashIcon() {
+import { cn } from '~/utils';
+
+export default function TrashIcon({ className = '' }) {
   return (
     <svg
       fill="none"
       strokeWidth="2"
       viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="icon-md"
+      className={cn('icon-md', className)}
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +18,7 @@ export default function TrashIcon() {
         clipRule="evenodd"
         d="M10.5555 4C10.099 4 9.70052 4.30906 9.58693 4.75114L9.29382 5.8919H14.715L14.4219 4.75114C14.3083 4.30906 13.9098 4 13.4533 4H10.5555ZM16.7799 5.8919L16.3589 4.25342C16.0182 2.92719 14.8226 2 13.4533 2H10.5555C9.18616 2 7.99062 2.92719 7.64985 4.25342L7.22886 5.8919H4C3.44772 5.8919 3 6.33961 3 6.8919C3 7.44418 3.44772 7.8919 4 7.8919H4.10069L5.31544 19.3172C5.47763 20.8427 6.76455 22 8.29863 22H15.7014C17.2354 22 18.5224 20.8427 18.6846 19.3172L19.8993 7.8919H20C20.5523 7.8919 21 7.44418 21 6.8919C21 6.33961 20.5523 5.8919 20 5.8919H16.7799ZM17.888 7.8919H6.11196L7.30423 19.1057C7.3583 19.6142 7.78727 20 8.29863 20H15.7014C16.2127 20 16.6417 19.6142 16.6958 19.1057L17.888 7.8919ZM10 10C10.5523 10 11 10.4477 11 11V16C11 16.5523 10.5523 17 10 17C9.44772 17 9 16.5523 9 16V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V16C15 16.5523 14.5523 17 14 17C13.4477 17 13 16.5523 13 16V11C13 10.4477 13.4477 10 14 10Z"
         fill="currentColor"
-      ></path>
+      />
     </svg>
   );
 }