Merge pull request #87 from aws-samples/chat-title

会話履歴のページは header にタイトルを出すようにする

packages/cdk/lambda/utils/sagemakerApi.ts

@@ -54,15 +54,15 @@ async function* invokeStream(
   // b'data:{"token": {"text": " problem"
   // b'}}'
   //
-  // While usually each PayloadPart event from the event stream will contain a byte array 
+  // While usually each PayloadPart event from the event stream will contain a byte array
   // with a full json, this is not guaranteed and some of the json objects may be split across
   // PayloadPart events. For example:
   // {'PayloadPart': {'Bytes': b'{"outputs": '}}
   // {'PayloadPart': {'Bytes': b'[" problem"]}\n'}}
   //
-  // This logic accounts for this by concatenating bytes and 
-  // return lines (ending with a '\n' character) within the buffer. 
-  // It will also save any pending lines that doe not end with a '\n' 
+  // This logic accounts for this by concatenating bytes and
+  // return lines (ending with a '\n' character) within the buffer.
+  // It will also save any pending lines that doe not end with a '\n'
   // to make sure truncations are concatinated.
 
   let buffer = '';

packages/cdk/lib/construct/api.ts

@@ -106,7 +106,11 @@ export class Api extends Construct {
       const sagemakerPolicy = new PolicyStatement({
         effect: Effect.ALLOW,
         actions: ['sagemaker:DescribeEndpoint', 'sagemaker:InvokeEndpoint'],
-        resources: [`arn:aws:sagemaker:${modelRegion}:${Stack.of(this).account}:endpoint/${modelName}`],
+        resources: [
+          `arn:aws:sagemaker:${modelRegion}:${
+            Stack.of(this).account
+          }:endpoint/${modelName}`,
+        ],
       });
       predictFunction.role?.addToPrincipalPolicy(sagemakerPolicy);
       predictStreamFunction.role?.addToPrincipalPolicy(sagemakerPolicy);

packages/web/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import {
   PiDotsThreeVertical,
@@ -20,6 +20,7 @@ import '@aws-amplify/ui-react/styles.css';
 import MenuDropdown from './components/MenuDropdown';
 import MenuItem from './components/MenuItem';
 import useDrawer from './hooks/useDrawer';
+import useConversation from './hooks/useConversation';
 
 const items = [
   {
@@ -59,10 +60,13 @@ const items = [
   },
 ];
 
-const getLabelByPath = (_path: string) => {
-  // MEMO: /chat/:chatId の path の場合に件名が表示されないため、以下の実装としている
-  const path = '/' + _path.split('/')[1];
-  return items.find((i) => i.to === path)?.label || '';
+// /chat/:chatId の形式から :chatId を返す
+// path が別の形式の場合は null を返す
+const extractChatId = (path: string): string | null => {
+  const pattern = /\/chat\/(.+)/;
+  const match = path.match(pattern);
+
+  return match ? match[1] : null;
 };
 
 const App: React.FC = () => {
@@ -79,12 +83,18 @@ const App: React.FC = () => {
   I18n.setLanguage('ja');
 
   const { switchOpen: switchDrawer } = useDrawer();
-  const [label, setLabel] = useState('');
   const { pathname } = useLocation();
+  const { getConversationTitle } = useConversation();
+
+  const label = useMemo(() => {
+    const chatId = extractChatId(pathname);
 
-  useEffect(() => {
-    setLabel(getLabelByPath(pathname));
-  }, [pathname]);
+    if (chatId) {
+      return getConversationTitle(chatId) || '';
+    } else {
+      return items.find((i) => i.to === pathname)?.label || '';
+    }
+  }, [pathname, getConversationTitle]);
 
   return (
     <Authenticator

packages/web/src/hooks/useConversation.ts

@@ -45,13 +45,24 @@ const useConversation = () => {
       mutate();
     });
   };
+  const getConversationTitle = (chatId: string) => {
+    const idx =
+      data?.chats.findIndex((d) => d.chatId === `chat#${chatId}`) ?? -1;
+
+    if (idx > -1) {
+      return data!.chats[idx].title;
+    } else {
+      return null;
+    }
+  };
 
   return {
     loading: isLoading,
     conversations: data ? data.chats : [],
     mutate,
     updateConversationTitle,
     deleteConversation,
+    getConversationTitle,
   };
 };