Merge pull request #140 from aws-samples/change-icon

Bedrock のアイコンを追加
aws-samples · Oct 31, 2023 · dd56a01 · dd56a01
2 parents 078c06f + c17f55f
commit dd56a01
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 14 deletions.
diff --git a/packages/web/src/assets/bedrock.svg b/packages/web/src/assets/bedrock.svg
diff --git a/packages/web/src/assets/model.svg b/packages/web/src/assets/model.svg
diff --git a/packages/web/src/components/ChatList.tsx b/packages/web/src/components/ChatList.tsx
@@ -39,7 +39,7 @@ const ChatList: React.FC<Props> = (props) => {
       <div
         className={`${
           props.className ?? ''
-        } flex flex-col items-start gap-1 overflow-x-hidden`}>
+        } flex flex-col items-start gap-0.5 overflow-x-hidden`}>
         {loading &&
           new Array(10)
             .fill('')

diff --git a/packages/web/src/components/ChatListItem.tsx b/packages/web/src/components/ChatListItem.tsx
@@ -90,7 +90,7 @@ const ChatListItem: React.FC<Props> = (props) => {
         />
       )}
       <Link
-        className={`hover:bg-aws-sky group flex  h-8 w-full items-center justify-start rounded p-2  ${
+        className={`hover:bg-aws-sky group flex h-8 w-full items-center justify-start rounded p-2  ${
           props.active && 'bg-aws-sky'
         }
           ${props.className}`}

diff --git a/packages/web/src/components/ChatMessage.tsx b/packages/web/src/components/ChatMessage.tsx
@@ -6,7 +6,7 @@ import ButtonFeedback from './ButtonFeedback';
 import { PiUserFill } from 'react-icons/pi';
 import { BaseProps } from '../@types/common';
 import { ShownMessage } from 'generative-ai-use-cases-jp';
-import { ReactComponent as MLLogo } from '../assets/model.svg';
+import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 import useChat from '../hooks/useChat';
 
 type Props = BaseProps & {
@@ -56,7 +56,7 @@ const ChatMessage: React.FC<Props> = (props) => {
           )}
           {chatContent?.role === 'assistant' && (
             <div className="bg-aws-ml h-min rounded p-1">
-              <MLLogo className="h-7 w-7 fill-white" />
+              <BedrockIcon className="h-7 w-7 fill-white" />
             </div>
           )}
 

diff --git a/packages/web/src/components/Drawer.tsx b/packages/web/src/components/Drawer.tsx
@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 import useDrawer from '../hooks/useDrawer';
 import ButtonIcon from './ButtonIcon';
 import { PiSignOut, PiX, PiGithubLogo } from 'react-icons/pi';
-import { ReactComponent as MLLogo } from '../assets/model.svg';
+import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 import ChatList from './ChatList';
 
 export type ItemProps = BaseProps & {
@@ -31,7 +31,7 @@ const Item: React.FC<ItemProps> = (props) => {
   }, []);
   return (
     <Link
-      className={`hover:bg-aws-sky flex h-8 items-center rounded p-2 ${
+      className={`hover:bg-aws-sky flex h-8 mt-0.5 items-center rounded p-2 ${
         location.pathname === props.to && 'bg-aws-sky'
       } ${props.className}`}
       to={props.to}
@@ -143,7 +143,7 @@ const Drawer: React.FC<Props> = (props) => {
 
           <RefLink
             to="https://aws.amazon.com/jp/bedrock/"
-            icon={<MLLogo className="w-4 fill-white" />}
+            icon={<BedrockIcon className="w-4 fill-white" />}
             label="Bedrock"
           />
           <RefLink

diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
@@ -5,7 +5,7 @@ import useChat from '../hooks/useChat';
 import ChatMessage from '../components/ChatMessage';
 import useScroll from '../hooks/useScroll';
 import { create } from 'zustand';
-import { ReactComponent as MLLogo } from '../assets/model.svg';
+import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 
 type StateType = {
   content: string;
@@ -74,7 +74,7 @@ const ChatPage: React.FC = () => {
 
         {loadingMessages && (
           <div className="relative flex h-screen flex-col items-center justify-center">
-            <MLLogo className="animate-pulse fill-gray-400" />
+            <BedrockIcon className="animate-pulse fill-gray-400" />
           </div>
         )}