Admin UI improvements (#74)

* Button to copy user query to clipboard * Show user query (original and translated) * fix: store original user query in ragPipeline response
Altinn · Jun 18, 2024 · 87eb3c6 · 87eb3c6
1 parent ca4bf6b
commit 87eb3c6
Show file tree

Hide file tree

Showing 13 changed files with 209 additions and 59 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@ node_modules
 **/yarn-error.log
 .yarn/cache
 !.yarn/cache/.gitkeep
+
+temp/
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -15,6 +15,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^5.15.18",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.18",
@@ -34,8 +37,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.12",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.23",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.3.0",

diff --git a/apps/admin/src/App.css b/apps/admin/src/App.css
@@ -7,8 +7,36 @@
   text-align: left;
   box-sizing: border-box;
   max-height: 100vh;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --sidebar-width: 240px;
 }
 
+body {
+  margin: 0;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #f4f6f8;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 100%;
+  }
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+
 .appContainer {
   /* display: flex; */
   /* flex-direction: column; */
@@ -51,3 +79,7 @@
     height: calc(100vh - 56px); /* Adjust height for smaller screens */
   }
 }
+
+.copy-query:hover {
+  color: blue;
+}
diff --git a/apps/admin/src/components/ChatMessageItemView.tsx b/apps/admin/src/components/ChatMessageItemView.tsx
@@ -2,6 +2,9 @@ import React, { useEffect } from "react";
 import { Button, Box } from "@mui/material";
 import { DocsUserQuery, Message, User } from "../models/Models";
 import { useUsers } from "../hooks/useUsers";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+
 
 interface ChatMessageItemViewProps {
   message: Message;
@@ -24,9 +27,9 @@ const ChatMessageItemView: React.FC<ChatMessageItemViewProps> = ({
 
   try {
     return (
-      <Button
+      <Box
         onClick={onClick}
-        fullWidth
+        width="100%"
         style={{
           padding: "8px",
           textAlign: "left",
@@ -37,6 +40,7 @@ const ChatMessageItemView: React.FC<ChatMessageItemViewProps> = ({
         <Box
           display="flex"
           flexDirection="column"
+
           width="100%"
           style={{ color: "black" }}
         >
@@ -46,22 +50,33 @@ const ChatMessageItemView: React.FC<ChatMessageItemViewProps> = ({
             width="100%"
             justifyContent="space-between"
           >
-            <span style={{ fontWeight: "bold" }}>
+            <span style={{ color: "gray"}}>
               {users?.filter((u) => u.user_id == message.user_id)[0]!?.name}
             </span>
 
-            <span style={{ color: "gray" }}>
-              {new Date(message.ts_date * 1000).toLocaleDateString("en-US", {
-                day: "2-digit",
-                month: "short",
-              }) +
-                " " +
-                new Date(message.ts_date * 1000).toTimeString().slice(0, 5)}
-            </span>
+            <Box>
+              <Button
+                onClick={() => (navigator.clipboard.writeText(message.content.original_user_query))}
+                className="copy-query"
+                size="small"
+                sx={{ color: "#EEEEEE", minWidth: 0, padding: 0, marginRight: 1 }}
+              >
+                <FontAwesomeIcon icon={faCopy} />
+              </Button>
+              <span style={{ color: "gray" }}>
+                {new Date(message.ts_date * 1000).toTimeString().slice(0, 5)
+                  + " " + new Date(message.ts_date * 1000).toLocaleDateString("en-US",
+                    { day: "2-digit", month: "short", })}
+              </span>
+
+            </Box>
+
+          </Box>
+          <Box>
+            {(message.content as DocsUserQuery).original_user_query}
           </Box>
-          <div>{(message.content as DocsUserQuery).original_user_query}</div>
         </Box>
-      </Button>
+      </Box>
     );
   } catch (error: any) {
     console.error(

diff --git a/apps/admin/src/components/ChatMessageView.tsx b/apps/admin/src/components/ChatMessageView.tsx
@@ -48,7 +48,7 @@ const ChatMessageView: React.FC<Props> = ({
                   setCurrentMessageId({
                     ts_date: message.ts_date,
                     ts_time: message.ts_time,
-                  });
+                  });                  
                 }}
               />
             )}

diff --git a/apps/admin/src/components/ThreadViewPane.tsx b/apps/admin/src/components/ThreadViewPane.tsx
@@ -67,14 +67,27 @@ const ThreadViewPane: React.FC<Props> = ({
             {threadMessages?.map((message) => (
               <>
                 <ListItem key={message.ts_date + "." + message.ts_time + "_0"}>
+                  <Box
+                    sx={{
+                      padding: "20px",
+                      background: "lightyellow",
+                      border: "1px solid gray",
+                    }}
+                  >
+                    User query:{" "}
+                    {threadMessages?.length > 0 &&
+                      threadMessages[0].content.english_user_query}
+                  </Box>
+                </ListItem>
+                <ListItem key={message.ts_date + "." + message.ts_time + "_1"}>
                   <BotReplyContent
                     message={message}
                     selectedThreadView={currentTab}
                   />
                 </ListItem>
                 {message.content_type == "docs_bot_reply" && (
                   <ListItem
-                    key={message.ts_date + "." + message.ts_time + "_1"}
+                    key={message.ts_date + "." + message.ts_time + "_2"}
                   >
                     <BotReplyMetadata message={message} />
                   </ListItem>
@@ -87,6 +100,20 @@ const ThreadViewPane: React.FC<Props> = ({
           <List>
             {threadMessages?.map((message) => (
               <>
+                <ListItem key={message.ts_date + "." + message.ts_time + "_0"}>
+                  <Box
+                    sx={{
+                      padding: "20px",
+                      background: "lightyellow",
+                      border: "1px solid gray",
+                    }}
+                  >
+                    User query:{" "}
+                    {threadMessages?.length > 0 &&
+                      threadMessages[0].content.original_user_query}
+                  </Box>
+                </ListItem>
+
                 <ListItem key={message.ts_date + "." + message.ts_time + "_2"}>
                   <BotReplyContent
                     message={message}

diff --git a/apps/admin/src/index.css b/apps/admin/src/index.css
diff --git a/apps/admin/src/main.tsx b/apps/admin/src/main.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
 import MainRoutes from "./routes/Routes.tsx";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 

diff --git a/apps/slack-app/src/app.ts b/apps/slack-app/src/app.ts
@@ -304,6 +304,7 @@ app.message(async ({ message, say }) => {
   try {
     ragResponse = await ragPipeline(
       stage1Result.questionTranslatedToEnglish,
+      userInput,
       stage1Result.userInputLanguageName,
       promptRagQueryRelax || '',
       promptRagGenerate || '',
@@ -317,8 +318,8 @@ app.message(async ({ message, say }) => {
 
     payload = {
       bot_name: 'docs',
-      original_user_query: ragResponse.original_user_query || '',
-      english_user_query: ragResponse.english_user_query || '',
+      original_user_query: userInput || '',
+      english_user_query: stage1Result.questionTranslatedToEnglish || '',
       user_query_language_code: stage1Result.userInputLanguageCode || '',
       user_query_language_name: ragResponse.user_query_language_name || '',
       english_answer: ragResponse.english_answer || '',

diff --git a/packages/assistant-lib/src/docs/rag.ts b/packages/assistant-lib/src/docs/rag.ts
@@ -56,7 +56,8 @@ const RagPipelineResultSchema = z.object({
 export type RagPipelineResult = z.infer<typeof RagPipelineResultSchema>;
 
 export async function ragPipeline(
-  user_input: string,
+  translated_user_input: string,
+  original_user_input: string,
   user_query_language_name: string,
   promptRagQueryRelax: string,
   promptRagGenerate: string,
@@ -83,7 +84,7 @@ export async function ragPipeline(
   var start = total_start;
 
   const extract_search_queries = await queryRelaxation(
-    user_input,
+    translated_user_input,
     promptRagQueryRelax,
   );
   durations.generate_searches = round(lapTimer(total_start));
@@ -184,7 +185,7 @@ export async function ragPipeline(
   }
 
   const rerankData = {
-    user_input: user_input,
+    user_input: translated_user_input,
     documents: searchHits.map((document) =>
       document.content_markdown.substring(0, envVar("MAX_SOURCE_LENGTH")),
     ),
@@ -287,7 +288,7 @@ export async function ragPipeline(
   const partialPrompt = promptRagGenerate;
   const fullPrompt = partialPrompt
     .replace("{context}", contextYaml)
-    .replace("{question}", user_input);
+    .replace("{question}", translated_user_input);
 
   if (envVar("LOG_LEVEL") == "debug") {
     console.log(`rag prompt:\n${partialPrompt}`);
@@ -365,8 +366,8 @@ export async function ragPipeline(
   durations["total"] = round(lapTimer(total_start));
 
   const response: RagPipelineResult = {
-    original_user_query: user_input,
-    english_user_query: user_input,
+    original_user_query: original_user_input,
+    english_user_query: translated_user_input,
     user_query_language_name,
     english_answer: english_answer || "",
     translated_answer: translated_answer || "",