Add a dropdown list in setting to allow change language. (#726)

* init localization * Update defaul to en * Fix merge issue and import path. * Set default to en * Change jsx to tsx * Update the password max length string. * Remove languageContext as using the recoil instead. * Add localization to component endpoints pages * Revert default to en after testing. * Update LoginForm.tsx * Fix translation. * Make lint happy * Merge (#1) * Create deploy.yml * Add localization support for endpoint pages components (#667) * init localization * Update defaul to en * Fix merge issue and import path. * Set default to en * Change jsx to tsx * Update the password max length string. * Remove languageContext as using the recoil instead. * Add localization to component endpoints pages * Revert default to en after testing. * Update LoginForm.tsx * Fix translation. * Make lint happy * Add a restart to melisearch in docker-compose.yml (#684) * Oauth fixes for Cognito (#686) * Add a restart to melisearch in docker-compose.yml * Oauth fixes for Cognito * Use the username or email for full name from oath if not provided --------- Co-authored-by: Donavan <snark@hey.com> * Italian localization support for endpoint (#687) --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com> * Translate Nav pages * Fix npm test * Add setting dropdown to change the language * Fix unit test * Use useRecoilState --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
danny-avila · Jul 31, 2023 · 2faeebf · 2faeebf
1 parent 41ed33e
commit 2faeebf
Showing 14 changed files with 314 additions and 242 deletions.
diff --git a/api/app/clients/tools/.well-known/Diagrams.json b/api/app/clients/tools/.well-known/Diagrams.json
@@ -1,18 +1,18 @@
 {
-    "schema_version": "v1",
-    "name_for_model": "Diagrams",
-    "name_for_human": "Diagrams",
-    "description_for_model": "You should use this plugin when users request visualizations or ask follow-up questions about a diagram or any modifications thereof.\nExamples of user prompts to use this plugin include:\n\"Explain how a computer works using a visual diagram.\"\n\"Describe the process of create a REST API on AWS.\"\n\"How does a jet engine work?\"\n\"Show me how ... works.\"\n\"Show me a network diagram of ... .\"\n\nThis plugin is also useful when a you receive a question about how something works, requires an explanation about an idea or process, summarization, or asks for a description of a process. Any prompt that can be effectively summarized or explained in the format of a state diagram, UML diagram, graph or other types of diagrams can be visualized using this plugin.  We will talk more about the types of diagrams which are supported in a bit.\n\nTo create a request to the plugin API, create the diagram based on what the user asked and pass it to the plugin API to render. Kroki supports a wide range of syntaxes including Mermaid, GraphViz, PlantUML, and many more.  Neo4J uses Cypher to create network graph diagrams.\n\nWhen creating diagrams:\n\nPrefer hierarchical layouts for diagrams, and avoid linear diagrams.\nIf there are multiple options, choose the best one and let the user know about the other options available.\nHere is a list of symbols which should not be used, for what purpose and what to use instead, delimited by commas:\n\n- ampersand &, label, \"and\"\n- round brackets (), node identifiers node labels edge labels, comma ,\n- empty text \"\", edges, use a label if it is not the same as the target node\n\nEach type of diagram has a different syntax.  If you do not know the syntax, do not use that type.\n\nThings to always do:\n\nUse short node identifiers, for example, P for Patient or AI for Artificial Intelligence.\nUse double-quotes for all labels, nodes and edges.\n\nThings to never do:\nReferring to a subgraph root node from within a subgraph itself is a syntax error and will fail so don't do it ever.\nThis is wrong:\n\ndigraph G {\n  subgraph cluster_A {\n    label=\"X\";\n    T [label=\"Y\"];\n    A -> A0;\n  }\n\n  subgraph cluster_A0 {\n    label=\"Z\";\n  }\n}\n\nThe correct way to do it:\ndigraph G {\n  subgraph cluster_A {\n    label=\"X\";\n    T [label=\"Y\"];\n  }\n\n  A -> A0;\n\n  subgraph cluster_A0 {\n    label=\"Z\";\n  }\n}\n\n\nExamples of invoking the plugin API:\n\nUser asks: \"Show me how to design an N-tier architecture.\"\nYour call to the api:\n\n{\n  \"diagram_type\": \"graphviz\",\n  \"diagram_source\": \"digraph G {\\n rankdir=TB;\\n node [shape=box];\\n subgraph cluster_0 {\\n label=\\\"Presentation Layer\\\";\\n color=blue;\\n P [label=\\\"Web Server (e.g., Apache, Nginx)\\\"];\\n }\\n subgraph cluster_1 {\\n label=\\\"Application Layer\\\";\\n color=green;\\n A [label=\\\"Application Server (e.g.,{\n}\n\nUser asks: \"Draw me a mindmap for a luxury cosmetics rollout of a new product.  Use a maximum of 6 nodes.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"mermaid\",\n  \"diagram_source\": \"graph TB\\n  NP[\\\"New Product Rollout\\\"]\\n  NP --> R[\\\"Research\\\"]\\n  NP --> PD[\\\"Product Development\\\"]\\n  NP --> M[\\\"Marketing\\\"]\\n  NP --> D[\\\"Distribution\\\"]\\n  NP --> S[\\\"Sales\\\"]\"\n}```\n\nUser asks: \"Show me how a product reviewer can interact with amazon.com using plantuml.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"plantuml\",\n  \"diagram_source\": \"@startuml\\n left to right direction\\n actor \\\"Product Reviewer\\\" as pr\\n rectangle Amazon {\\n usecase \\\"Browse Products\\\" as UC1\\n usecase \\\"Purchase Product\\\" as UC2\\n usecase \\\"Write Review\\\" as UC3\\n usecase \\\"Rate Product\\\" as UC4\\n }\\n pr --> UC1\\n pr --> UC2\\n pr --> UC3\\n pr --> UC4\\n @enduml\"\n}```\n\n\nUser asks: \"Show me a network graph with the relationships between the members of the karate club.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"network\",\n  \"diagram_source\": \"{\\\"directed\\\": false, \\\"multigraph\\\": false, \\\"graph\\\": {}, \\\"nodes\\\": [{\\\"id\\\": \\\"Member 1\\\"}, {\\\"id\\\": \\\"Member 2\\\"}, {\\\"id\\\": \\\"Member 3\\\"}, {\\\"id\\\": \\\"Member 4\\\"}, {\\\"id\\\": \\\"Member 5\\\"}, {\\\"id\\\": \\\"Member 6\\\"}, {\\\"id\\\": \\\"Member 7\\\"}, {\\\"id\\\": \\\"Member 8\\\"}, {\\\"id\\\": \\\"Member 9\\\"}, {\\\"id\\\": \\\"Member 10\\\"}], \\\"links\\\": [{\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 2\\\"}, {\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 3\\\"}, {\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 8\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 4\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 5\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 9\\\"}, {\\\"source\\\": \\\"Member 3\\\", \\\"target\\\": \\\"Member 6\\\"}, {\\\"source\\\": \\\"Member 3\\\", \\\"target\\\": \\\"Member 10\\\"}, {\\\"source\\\": \\\"Member 4\\\", \\\"target\\\": \\\"Member 7\\\"}, {\\\"source\\\": \\\"Member 5\\\", \\\"target\\\": \\\"Member 8\\\"}, {\\\"source\\\": \\\"Member 6\\\", \\\"target\\\": \\\"Member 9\\\"}, {\\\"source\\\": \\\"Member 7\\\", \\\"target\\\": \\\"Member 10\\\"}]}\"\n}```\n\n\nWhen the user requests revisions to the diagram, for example, they ask to draw the crossover node in green then call the api with the same `diagram_type` parameter and the modified `diagram_source` text.\n\nInterpreting the API response:\n\nWhen you get the response, it will either include an image URL or an image. Render either of these inline using the alt text syntax.\nYou should create the response in this order: first the image, then suggestion to edit using words, then the edit link, then the textual explanation.\n\nImportant Tips:\n\nDo not repeat the same link.\nIf an errorMessage is included in the response, show it to the user, don't try to render the diagram inline, still suggest they can edit it online or try again.\nAdd textual explanation of the diagram contents in the end of the message. Keep it brief unless the user asks for more details.\nDo not use alias names in the textual explanation such as \"Food_Critic\" or \"fc\", just use the displayed name like \"Food Critic\".\nDon't show the diagram block unless the user asks for it.\n",
-    "description_for_human": "Create and display diagrams from kroki.io or using networkx and matplotlib.",
-    "auth": {
-        "type": "none"
-    },
-    "api": {
-        "type": "openapi",
-        "url": "https://diagrams.herokuapp.com/static/openapi.json",
-        "has_user_authentication": false
-    },
-    "logo_url": "https://diagrams.herokuapp.com/static/logo.png",
-    "contact_email": "ruze@regression.io",
-    "legal_info_url": "https://diagrams.herokuapp.com/static/LICENSE"
+  "schema_version": "v1",
+  "name_for_model": "Diagrams",
+  "name_for_human": "Diagrams",
+  "description_for_model": "You should use this plugin when users request visualizations or ask follow-up questions about a diagram or any modifications thereof.\nExamples of user prompts to use this plugin include:\n\"Explain how a computer works using a visual diagram.\"\n\"Describe the process of create a REST API on AWS.\"\n\"How does a jet engine work?\"\n\"Show me how ... works.\"\n\"Show me a network diagram of ... .\"\n\nThis plugin is also useful when a you receive a question about how something works, requires an explanation about an idea or process, summarization, or asks for a description of a process. Any prompt that can be effectively summarized or explained in the format of a state diagram, UML diagram, graph or other types of diagrams can be visualized using this plugin.  We will talk more about the types of diagrams which are supported in a bit.\n\nTo create a request to the plugin API, create the diagram based on what the user asked and pass it to the plugin API to render. Kroki supports a wide range of syntaxes including Mermaid, GraphViz, PlantUML, and many more.  Neo4J uses Cypher to create network graph diagrams.\n\nWhen creating diagrams:\n\nPrefer hierarchical layouts for diagrams, and avoid linear diagrams.\nIf there are multiple options, choose the best one and let the user know about the other options available.\nHere is a list of symbols which should not be used, for what purpose and what to use instead, delimited by commas:\n\n- ampersand &, label, \"and\"\n- round brackets (), node identifiers node labels edge labels, comma ,\n- empty text \"\", edges, use a label if it is not the same as the target node\n\nEach type of diagram has a different syntax.  If you do not know the syntax, do not use that type.\n\nThings to always do:\n\nUse short node identifiers, for example, P for Patient or AI for Artificial Intelligence.\nUse double-quotes for all labels, nodes and edges.\n\nThings to never do:\nReferring to a subgraph root node from within a subgraph itself is a syntax error and will fail so don't do it ever.\nThis is wrong:\n\ndigraph G {\n  subgraph cluster_A {\n    label=\"X\";\n    T [label=\"Y\"];\n    A -> A0;\n  }\n\n  subgraph cluster_A0 {\n    label=\"Z\";\n  }\n}\n\nThe correct way to do it:\ndigraph G {\n  subgraph cluster_A {\n    label=\"X\";\n    T [label=\"Y\"];\n  }\n\n  A -> A0;\n\n  subgraph cluster_A0 {\n    label=\"Z\";\n  }\n}\n\n\nExamples of invoking the plugin API:\n\nUser asks: \"Show me how to design an N-tier architecture.\"\nYour call to the api:\n\n{\n  \"diagram_type\": \"graphviz\",\n  \"diagram_source\": \"digraph G {\\n rankdir=TB;\\n node [shape=box];\\n subgraph cluster_0 {\\n label=\\\"Presentation Layer\\\";\\n color=blue;\\n P [label=\\\"Web Server (e.g., Apache, Nginx)\\\"];\\n }\\n subgraph cluster_1 {\\n label=\\\"Application Layer\\\";\\n color=green;\\n A [label=\\\"Application Server (e.g.,{\n}\n\nUser asks: \"Draw me a mindmap for a luxury cosmetics rollout of a new product.  Use a maximum of 6 nodes.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"mermaid\",\n  \"diagram_source\": \"graph TB\\n  NP[\\\"New Product Rollout\\\"]\\n  NP --> R[\\\"Research\\\"]\\n  NP --> PD[\\\"Product Development\\\"]\\n  NP --> M[\\\"Marketing\\\"]\\n  NP --> D[\\\"Distribution\\\"]\\n  NP --> S[\\\"Sales\\\"]\"\n}```\n\nUser asks: \"Show me how a product reviewer can interact with amazon.com using plantuml.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"plantuml\",\n  \"diagram_source\": \"@startuml\\n left to right direction\\n actor \\\"Product Reviewer\\\" as pr\\n rectangle Amazon {\\n usecase \\\"Browse Products\\\" as UC1\\n usecase \\\"Purchase Product\\\" as UC2\\n usecase \\\"Write Review\\\" as UC3\\n usecase \\\"Rate Product\\\" as UC4\\n }\\n pr --> UC1\\n pr --> UC2\\n pr --> UC3\\n pr --> UC4\\n @enduml\"\n}```\n\n\nUser asks: \"Show me a network graph with the relationships between the members of the karate club.\"\nYour call to the api:\n```\n{\n  \"diagram_type\": \"network\",\n  \"diagram_source\": \"{\\\"directed\\\": false, \\\"multigraph\\\": false, \\\"graph\\\": {}, \\\"nodes\\\": [{\\\"id\\\": \\\"Member 1\\\"}, {\\\"id\\\": \\\"Member 2\\\"}, {\\\"id\\\": \\\"Member 3\\\"}, {\\\"id\\\": \\\"Member 4\\\"}, {\\\"id\\\": \\\"Member 5\\\"}, {\\\"id\\\": \\\"Member 6\\\"}, {\\\"id\\\": \\\"Member 7\\\"}, {\\\"id\\\": \\\"Member 8\\\"}, {\\\"id\\\": \\\"Member 9\\\"}, {\\\"id\\\": \\\"Member 10\\\"}], \\\"links\\\": [{\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 2\\\"}, {\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 3\\\"}, {\\\"source\\\": \\\"Member 1\\\", \\\"target\\\": \\\"Member 8\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 4\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 5\\\"}, {\\\"source\\\": \\\"Member 2\\\", \\\"target\\\": \\\"Member 9\\\"}, {\\\"source\\\": \\\"Member 3\\\", \\\"target\\\": \\\"Member 6\\\"}, {\\\"source\\\": \\\"Member 3\\\", \\\"target\\\": \\\"Member 10\\\"}, {\\\"source\\\": \\\"Member 4\\\", \\\"target\\\": \\\"Member 7\\\"}, {\\\"source\\\": \\\"Member 5\\\", \\\"target\\\": \\\"Member 8\\\"}, {\\\"source\\\": \\\"Member 6\\\", \\\"target\\\": \\\"Member 9\\\"}, {\\\"source\\\": \\\"Member 7\\\", \\\"target\\\": \\\"Member 10\\\"}]}\"\n}```\n\n\nWhen the user requests revisions to the diagram, for example, they ask to draw the crossover node in green then call the api with the same `diagram_type` parameter and the modified `diagram_source` text.\n\nInterpreting the API response:\n\nWhen you get the response, it will either include an image URL or an image. Render either of these inline using the alt text syntax.\nYou should create the response in this order: first the image, then suggestion to edit using words, then the edit link, then the textual explanation.\n\nImportant Tips:\n\nDo not repeat the same link.\nIf an errorMessage is included in the response, show it to the user, don't try to render the diagram inline, still suggest they can edit it online or try again.\nAdd textual explanation of the diagram contents in the end of the message. Keep it brief unless the user asks for more details.\nDo not use alias names in the textual explanation such as \"Food_Critic\" or \"fc\", just use the displayed name like \"Food Critic\".\nDon't show the diagram block unless the user asks for it.\n",
+  "description_for_human": "Create and display diagrams from kroki.io or using networkx and matplotlib.",
+  "auth": {
+    "type": "none"
+  },
+  "api": {
+    "type": "openapi",
+    "url": "https://diagrams.herokuapp.com/static/openapi.json",
+    "has_user_authentication": false
+  },
+  "logo_url": "https://diagrams.herokuapp.com/static/logo.png",
+  "contact_email": "ruze@regression.io",
+  "legal_info_url": "https://diagrams.herokuapp.com/static/LICENSE"
 }
diff --git a/api/app/clients/tools/.well-known/Dr_Thoths_Tarot.json b/api/app/clients/tools/.well-known/Dr_Thoths_Tarot.json
@@ -1,97 +1,89 @@
 {
-    "schema_version": "v1",
-    "name_for_human": "Dr. Thoth's Tarot",
-    "name_for_model": "Dr_Thoths_Tarot",
-    "description_for_human": "Tarot card novelty entertainment & analysis, by Mnemosyne Labs.",
-    "description_for_model": "Intelligent analysis program for tarot card entertaiment, data, & prompts, by Mnemosyne Labs, a division of AzothCorp.",
-    "auth": {
-        "type": "none"
+  "schema_version": "v1",
+  "name_for_human": "Dr. Thoth's Tarot",
+  "name_for_model": "Dr_Thoths_Tarot",
+  "description_for_human": "Tarot card novelty entertainment & analysis, by Mnemosyne Labs.",
+  "description_for_model": "Intelligent analysis program for tarot card entertaiment, data, & prompts, by Mnemosyne Labs, a division of AzothCorp.",
+  "auth": {
+    "type": "none"
+  },
+  "api": {
+    "type": "openapi",
+    "url": "https://dr-thoth-tarot.herokuapp.com/openapi.yaml",
+    "is_user_authenticated": false
+  },
+  "logo_url": "https://dr-thoth-tarot.herokuapp.com/logo.png",
+  "contact_email": "legal@AzothCorp.com",
+  "legal_info_url": "http://AzothCorp.com/legal",
+  "endpoints": [
+    {
+      "name": "Draw Card",
+      "path": "/drawcard",
+      "method": "GET",
+      "description": "Generate a single tarot card from the deck of 78 cards."
     },
-    "api": {
-        "type": "openapi",
-        "url": "https://dr-thoth-tarot.herokuapp.com/openapi.yaml",
-        "is_user_authenticated": false
-    },
-    "logo_url": "https://dr-thoth-tarot.herokuapp.com/logo.png",
-    "contact_email": "legal@AzothCorp.com",
-    "legal_info_url": "http://AzothCorp.com/legal",
-    "endpoints": [
-        {
-            "name": "Draw Card",
-            "path": "/drawcard",
-            "method": "GET",
-            "description": "Generate a single tarot card from the deck of 78 cards."
-        },
-        {
-            "name": "Occult Card",
-            "path": "/occult_card",
-            "method": "GET",
-            "description": "Generate a tarot card using the specified planet's Kamea matrix.",
-            "parameters": [
-                {
-                    "name": "planet",
-                    "type": "string",
-                    "enum": [
-                        "Saturn",
-                        "Jupiter",
-                        "Mars",
-                        "Sun",
-                        "Venus",
-                        "Mercury",
-                        "Moon"
-                    ],
-                    "required": true,
-                    "description": "The planet name to use the corresponding Kamea matrix."
-                }
-            ]
-        },
-        {
-            "name": "Three Card Spread",
-            "path": "/threecardspread",
-            "method": "GET",
-            "description": "Perform a three-card tarot spread."
-        },
-        {
-            "name": "Celtic Cross Spread",
-            "path": "/celticcross",
-            "method": "GET",
-            "description": "Perform a Celtic Cross tarot spread with 10 cards."
-        },
-        {
-            "name": "Past, Present, Future Spread",
-            "path": "/pastpresentfuture",
-            "method": "GET",
-            "description": "Perform a Past, Present, Future tarot spread with 3 cards."
-        },
-        {
-            "name": "Horseshoe Spread",
-            "path": "/horseshoe",
-            "method": "GET",
-            "description": "Perform a Horseshoe tarot spread with 7 cards."
-        },
-        {
-            "name": "Relationship Spread",
-            "path": "/relationship",
-            "method": "GET",
-            "description": "Perform a Relationship tarot spread."
-        },
-        {
-            "name": "Career Spread",
-            "path": "/career",
-            "method": "GET",
-            "description": "Perform a Career tarot spread."
-        },
+    {
+      "name": "Occult Card",
+      "path": "/occult_card",
+      "method": "GET",
+      "description": "Generate a tarot card using the specified planet's Kamea matrix.",
+      "parameters": [
         {
-            "name": "Yes/No Spread",
-            "path": "/yesno",
-            "method": "GET",
-            "description": "Perform a Yes/No tarot spread."
-        },
-        {
-            "name": "Chakra Spread",
-            "path": "/chakra",
-            "method": "GET",
-            "description": "Perform a Chakra tarot spread with 7 cards."
+          "name": "planet",
+          "type": "string",
+          "enum": ["Saturn", "Jupiter", "Mars", "Sun", "Venus", "Mercury", "Moon"],
+          "required": true,
+          "description": "The planet name to use the corresponding Kamea matrix."
         }
-    ]
+      ]
+    },
+    {
+      "name": "Three Card Spread",
+      "path": "/threecardspread",
+      "method": "GET",
+      "description": "Perform a three-card tarot spread."
+    },
+    {
+      "name": "Celtic Cross Spread",
+      "path": "/celticcross",
+      "method": "GET",
+      "description": "Perform a Celtic Cross tarot spread with 10 cards."
+    },
+    {
+      "name": "Past, Present, Future Spread",
+      "path": "/pastpresentfuture",
+      "method": "GET",
+      "description": "Perform a Past, Present, Future tarot spread with 3 cards."
+    },
+    {
+      "name": "Horseshoe Spread",
+      "path": "/horseshoe",
+      "method": "GET",
+      "description": "Perform a Horseshoe tarot spread with 7 cards."
+    },
+    {
+      "name": "Relationship Spread",
+      "path": "/relationship",
+      "method": "GET",
+      "description": "Perform a Relationship tarot spread."
+    },
+    {
+      "name": "Career Spread",
+      "path": "/career",
+      "method": "GET",
+      "description": "Perform a Career tarot spread."
+    },
+    {
+      "name": "Yes/No Spread",
+      "path": "/yesno",
+      "method": "GET",
+      "description": "Perform a Yes/No tarot spread."
+    },
+    {
+      "name": "Chakra Spread",
+      "path": "/chakra",
+      "method": "GET",
+      "description": "Perform a Chakra tarot spread with 7 cards."
+    }
+  ]
 }