Merge pull request #106 from aws-samples/add-kendra-column

Kendra を左カラムに追加
aws-samples · Oct 16, 2023 · 6ce09d8 · 6ce09d8
2 parents 05d46aa + 695b5fd
commit 6ce09d8
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -11,6 +11,7 @@ import {
   PiEnvelope,
   PiChatsCircle,
   PiPenNib,
+  PiMagnifyingGlass,
 } from 'react-icons/pi';
 import { Outlet } from 'react-router-dom';
 import Drawer, { ItemProps } from './components/Drawer';
@@ -29,38 +30,51 @@ const items: ItemProps[] = [
     label: 'ホーム',
     to: '/',
     icon: <PiHouse />,
+    usecase: true,
   },
   {
     label: 'チャット',
     to: '/chat',
     icon: <PiChatsCircle />,
+    usecase: true,
   },
   ragEnabled
     ? {
         label: 'RAG チャット',
         to: '/rag',
         icon: <PiChatCircleText />,
+        usecase: true,
       }
     : null,
   {
     label: '要約',
     to: '/summarize',
     icon: <PiNote />,
+    usecase: true,
   },
   {
     label: '校正',
     to: '/editorial',
     icon: <PiPenNib />,
+    usecase: true,
   },
   {
     label: 'メール生成',
     to: '/mail',
     icon: <PiEnvelope />,
+    usecase: true,
   },
   {
     label: 'CS 業務効率化',
     to: '/cs',
     icon: <PiPencil />,
+    usecase: true,
+  },
+  {
+    label: 'Kendra 検索',
+    to: '/kendra',
+    icon: <PiMagnifyingGlass />,
+    usecase: false,
   },
 ].flatMap((i) => (i !== null ? [i] : []));
 

diff --git a/packages/web/src/components/Drawer.tsx b/packages/web/src/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { BaseProps } from '../@types/common';
 import { Link, useLocation } from 'react-router-dom';
 import useDrawer from '../hooks/useDrawer';
@@ -11,6 +11,7 @@ export type ItemProps = BaseProps & {
   label: string;
   to: string;
   icon: JSX.Element;
+  usecase: boolean;
 };
 
 const Item: React.FC<ItemProps> = (props) => {
@@ -30,7 +31,7 @@ const Item: React.FC<ItemProps> = (props) => {
   }, []);
   return (
     <Link
-      className={`hover:bg-aws-sky m-2 flex h-8 items-center rounded p-2 ${
+      className={`hover:bg-aws-sky flex h-8 items-center rounded p-2 ${
         location.pathname === props.to && 'bg-aws-sky'
       } ${props.className}`}
       to={props.to}
@@ -64,7 +65,7 @@ const RefLink: React.FC<RefLinkProps> = (props) => {
 
   return (
     <Link
-      className={`m-2 flex h-6 items-center rounded px-1 py-2 ${props.className}`}
+      className={`flex h-8 items-center rounded px-1 py-2 ${props.className}`}
       to={props.to}
       onClick={onClick}
       target="_blank">
@@ -84,18 +85,50 @@ type Props = BaseProps & {
 const Drawer: React.FC<Props> = (props) => {
   const { opened, switchOpen } = useDrawer();
 
+  const usecases = useMemo(() => {
+    return props.items.filter((i) => i.usecase);
+  }, [props.items]);
+
+  const tools = useMemo(() => {
+    return props.items.filter((i) => !i.usecase);
+  }, [props.items]);
+
   return (
     <>
       <nav
         className={`h-full lg:visible lg:w-64 ${
           opened ? 'visible w-64' : 'invisible w-0'
         } transition-width bg-aws-squid-ink fixed z-50 flex h-screen flex-col justify-between text-sm text-white lg:static lg:z-0`}>
-        <div className="text-aws-smile mx-3 mt-3 text-xs">ツール</div>
-        <div className="scrollbar-thin scrollbar-thumb-white  ml-2 mr-1 h-full overflow-y-auto border-b">
-          {props.items.map((item, idx) => (
-            <Item key={idx} label={item.label} icon={item.icon} to={item.to} />
+        <div className="text-aws-smile mx-3 my-2 text-xs">
+          ユースケース <span className="text-gray-400">(生成系AI)</span>
+        </div>
+        <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 h-full overflow-y-auto">
+          {usecases.map((item, idx) => (
+            <Item
+              key={idx}
+              label={item.label}
+              icon={item.icon}
+              to={item.to}
+              usecase={item.usecase}
+            />
           ))}
         </div>
+        <div className="border-b" />
+        <div className="text-aws-smile mx-3 my-2 text-xs">
+          ツール <span className="text-gray-400">(非生成系AI)</span>
+        </div>
+        <div className="mb-1 ml-2 mr-1">
+          {tools.map((item, idx) => (
+            <Item
+              key={idx}
+              label={item.label}
+              icon={item.icon}
+              to={item.to}
+              usecase={item.usecase}
+            />
+          ))}
+        </div>
+        <div className="border-b" />
         <div className="text-aws-smile mx-3 my-2  text-xs">会話履歴</div>
         <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 h-full overflow-y-auto">
           <ChatList className="mr-1" />

diff --git a/packages/web/src/pages/EditorialPage.tsx b/packages/web/src/pages/EditorialPage.tsx
@@ -170,7 +170,7 @@ const EditorialPage: React.FC = () => {
   // コメントの更新時にリアルタイムで JSON 部分を抽出してコメントに変換
   useEffect(() => {
     if (messages.length === 0) return;
-    const _lastMessage = messages[messages.length - 1]
+    const _lastMessage = messages[messages.length - 1];
     if (_lastMessage.role !== 'assistant') return;
     const _response = messages[messages.length - 1].content;
     const _comments = [..._response.matchAll(REGEX_BRACKET)].map((x) => {

diff --git a/packages/web/src/pages/KendraSearchPage.tsx b/packages/web/src/pages/KendraSearchPage.tsx
@@ -34,7 +34,7 @@ const KendraSearchPage: React.FC = () => {
       <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min">
         Kendra 検索
       </div>
-      <div className="-mt-3  text-sm text-gray-600">
+      <div className="text-sm text-gray-600">
         <div>
           この機能は、Amazon Kendra の標準機能である Query API
           で検索を行います。