Merge pull request #327 from aws-samples/select

Select, SelectField, MenuDropdown の統一
aws-samples · Feb 21, 2024 · 912b58d · 912b58d
2 parents 4f4b7de + f06d9ec
commit 912b58d
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 265 deletions.
diff --git a/packages/cdk/lib/construct/auth.ts b/packages/cdk/lib/construct/auth.ts
@@ -63,24 +63,30 @@ export class Auth extends Construct {
 
     if (props.allowedIpV4AddressRanges || props.allowedIpV6AddressRanges) {
       const ipRanges = [
-        ...(props.allowedIpV4AddressRanges ? props.allowedIpV4AddressRanges : []),
-        ...(props.allowedIpV6AddressRanges ? props.allowedIpV6AddressRanges : []),
+        ...(props.allowedIpV4AddressRanges
+          ? props.allowedIpV4AddressRanges
+          : []),
+        ...(props.allowedIpV6AddressRanges
+          ? props.allowedIpV6AddressRanges
+          : []),
       ];
 
-      idPool.authenticatedRole.attachInlinePolicy(new Policy(this, 'SourceIpPolicy', {
-        statements: [
-          new PolicyStatement({
-            effect: Effect.DENY,
-            resources: ['*'],
-            actions: ['*'],
-            conditions: {
-              NotIpAddress: {
-                'aws:SourceIp': ipRanges,
+      idPool.authenticatedRole.attachInlinePolicy(
+        new Policy(this, 'SourceIpPolicy', {
+          statements: [
+            new PolicyStatement({
+              effect: Effect.DENY,
+              resources: ['*'],
+              actions: ['*'],
+              conditions: {
+                NotIpAddress: {
+                  'aws:SourceIp': ipRanges,
+                },
               },
-            },
-          }),
-        ]
-      }));
+            }),
+          ],
+        })
+      );
     }
 
     // Lambda

diff --git a/packages/web/src/components/GenerateImageAssistant.tsx b/packages/web/src/components/GenerateImageAssistant.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Card from './Card';
 import InputChatContent from './InputChatContent';
+import Select from './Select';
 import { useLocation } from 'react-router-dom';
 import useChat from '../hooks/useChat';
 import { PiLightbulbFilamentBold, PiWarningFill } from 'react-icons/pi';
 import { BaseProps } from '../@types/common';
 import Button from './Button';
 import useScroll from '../hooks/useScroll';
-import { SelectField } from '@aws-amplify/ui-react';
 import { Model } from 'generative-ai-use-cases-jp';
 
 type Props = BaseProps & {
@@ -141,23 +141,20 @@ const GenerateImageAssistant: React.FC<Props> = (props) => {
         label="チャット形式で画像生成"
         help="チャット形式でプロンプトの生成と設定、画像生成を自動で行います。"
         className={`${props.className ?? ''} h-full pb-32`}>
+        <div className="mb-2 flex w-full">
+          <Select
+            value={props.modelId}
+            onChange={props.onChangeModel}
+            options={props.modelIds.map((m) => {
+              return { value: m, label: m };
+            })}
+          />
+        </div>
         <div
           id="image-assistant-chat"
           className="h-full overflow-y-auto overflow-x-hidden">
-          <div className="mb-4 flex w-full">
-            <SelectField
-              label="モデル"
-              value={props.modelId}
-              onChange={(e) => props.onChangeModel(e.target.value)}>
-              {props.modelIds.map((m) => (
-                <option key={m} value={m}>
-                  {m}
-                </option>
-              ))}
-            </SelectField>
-          </div>
           {contents.length === 0 && (
-            <div className="m-2 rounded border border-gray-400 bg-gray-100/50 p-2 text-gray-600">
+            <div className="rounded border border-gray-400 bg-gray-100/50 p-2 text-gray-600">
               <div className="flex items-center font-bold">
                 <PiLightbulbFilamentBold className="mr-2" />
                 ヒント

diff --git a/packages/web/src/components/MenuDropdown.tsx b/packages/web/src/components/MenuDropdown.tsx
diff --git a/packages/web/src/components/MenuItem.tsx b/packages/web/src/components/MenuItem.tsx
diff --git a/packages/web/src/components/Select.tsx b/packages/web/src/components/Select.tsx
@@ -12,6 +12,7 @@ type Props = RowItemProps & {
     label: string;
   }[];
   clearable?: boolean;
+  fullWidth?: boolean;
   onChange: (value: string) => void;
 };
 
@@ -35,57 +36,56 @@ const Select: React.FC<Props> = (props) => {
       )}
       <Listbox value={props.value} onChange={props.onChange}>
         <div className="relative">
-          <Listbox.Button className="relative h-8 w-full cursor-default rounded border border-black/30 bg-white pl-3 pr-10 text-left focus:outline-none">
+          <Listbox.Button
+            className={`relative h-8 cursor-pointer rounded border border-black/30 bg-white pl-3 pr-10 text-left focus:outline-none ${props.fullWidth ? 'w-full' : 'w-fit'}`}>
             <span className="block truncate">{selectedLabel}</span>
 
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <PiCaretUpDown className="text-sm text-gray-400" />
+              <PiCaretUpDown className="text-sm" />
             </span>
           </Listbox.Button>
           {props.clearable && props.value !== '' && (
-            <span className="absolute inset-y-0 right-6 flex items-center pr-2">
+            <span className="absolute inset-y-0 right-3 flex items-center pr-2">
               <ButtonIcon onClick={onClear}>
-                <PiX className="text-sm text-gray-400" />
+                <PiX className="text-sm" />
               </ButtonIcon>
             </span>
           )}
-          <Transition
-            as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
-              {props.options.map((option, idx) => (
-                <Listbox.Option
-                  key={idx}
-                  className={({ active }) =>
-                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                      active
-                        ? 'bg-aws-smile/10 text-aws-smile'
-                        : 'text-gray-900'
-                    }`
-                  }
-                  value={option.value}>
-                  {({ selected }) => (
-                    <>
-                      <span
-                        className={`block truncate ${
-                          selected ? 'font-medium' : 'font-normal'
-                        }`}>
-                        {option.label}
-                      </span>
-                      {selected ? (
-                        <span className="text-aws-smile absolute inset-y-0 left-0 flex items-center pl-3">
-                          <PiCheck className="size-5" />
-                        </span>
-                      ) : null}
-                    </>
-                  )}
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
-          </Transition>
         </div>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-fit overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+            {props.options.map((option, idx) => (
+              <Listbox.Option
+                key={idx}
+                className={({ active }) =>
+                  `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                    active ? 'bg-aws-smile/10 text-aws-smile' : 'text-gray-900'
+                  }`
+                }
+                value={option.value}>
+                {({ selected }) => (
+                  <>
+                    <span
+                      className={`block truncate ${
+                        selected ? 'font-medium' : 'font-normal'
+                      }`}>
+                      {option.label}
+                    </span>
+                    {selected ? (
+                      <span className="text-aws-smile absolute inset-y-0 left-0 flex items-center pl-3">
+                        <PiCheck className="size-5" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
       </Listbox>
     </RowItem>
   );

diff --git a/packages/web/src/pages/AgentChatPage.tsx b/packages/web/src/pages/AgentChatPage.tsx
@@ -4,11 +4,11 @@ import InputChatContent from '../components/InputChatContent';
 import useChat from '../hooks/useChat';
 import useConversation from '../hooks/useConversation';
 import ChatMessage from '../components/ChatMessage';
+import Select from '../components/Select';
 import useScroll from '../hooks/useScroll';
 import { create } from 'zustand';
 import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 import { AgentPageQueryParams } from '../@types/navigate';
-import { SelectField } from '@aws-amplify/ui-react';
 import { MODELS } from '../hooks/useModel';
 import { v4 as uuidv4 } from 'uuid';
 import queryString from 'query-string';
@@ -117,17 +117,13 @@ const AgentChatPage: React.FC = () => {
         </div>
 
         <div className="mb-6 mt-2 flex w-full items-end justify-center lg:mt-0">
-          <SelectField
-            label="モデル"
-            labelHidden
+          <Select
             value={modelId}
-            onChange={(e) => setModelId(e.target.value)}>
-            {availableModels.map((m) => (
-              <option key={m} value={m}>
-                {m}
-              </option>
-            ))}
-          </SelectField>
+            onChange={setModelId}
+            options={availableModels.map((m) => {
+              return { value: m, label: m };
+            })}
+          />
         </div>
 
         {((isEmpty && !loadingMessages) || loadingMessages) && (

diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
@@ -11,12 +11,12 @@ import ButtonCopy from '../components/ButtonCopy';
 import ModalDialog from '../components/ModalDialog';
 import ExpandableField from '../components/ExpandableField';
 import Switch from '../components/Switch';
+import Select from '../components/Select';
 import useScroll from '../hooks/useScroll';
 import { PiArrowClockwiseBold, PiShareFatFill } from 'react-icons/pi';
 import { create } from 'zustand';
 import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 import { ChatPageQueryParams } from '../@types/navigate';
-import { SelectField } from '@aws-amplify/ui-react';
 import { MODELS } from '../hooks/useModel';
 import queryString from 'query-string';
 
@@ -206,17 +206,13 @@ const ChatPage: React.FC = () => {
         </div>
 
         <div className="mt-2 flex w-full items-end justify-center lg:mt-0">
-          <SelectField
-            label="モデル"
-            labelHidden
+          <Select
             value={modelId}
-            onChange={(e) => setModelId(e.target.value)}>
-            {availableModels.map((m) => (
-              <option key={m} value={m}>
-                {m}
-              </option>
-            ))}
-          </SelectField>
+            onChange={setModelId}
+            options={availableModels.map((m) => {
+              return { value: m, label: m };
+            })}
+          />
         </div>
 
         {((isEmpty && !loadingMessages) || loadingMessages) && (

diff --git a/packages/web/src/pages/EditorialPage.tsx b/packages/web/src/pages/EditorialPage.tsx
@@ -5,14 +5,14 @@ import Button from '../components/Button';
 import Textarea from '../components/Textarea';
 import ExpandableField from '../components/ExpandableField';
 import Switch from '../components/Switch';
+import Select from '../components/Select';
 import useChat from '../hooks/useChat';
 import { create } from 'zustand';
 import Texteditor from '../components/TextEditor';
 import { DocumentComment } from 'generative-ai-use-cases-jp';
 import debounce from 'lodash.debounce';
 import { editorialPrompt } from '../prompts';
 import { EditorialPageQueryParams } from '../@types/navigate';
-import { SelectField } from '@aws-amplify/ui-react';
 import { MODELS } from '../hooks/useModel';
 import queryString from 'query-string';
 
@@ -263,18 +263,14 @@ const EditorialPage: React.FC = () => {
       </div>
       <div className="col-span-12 col-start-1 mx-2 lg:col-span-10 lg:col-start-2 xl:col-span-10 xl:col-start-2">
         <Card label="校正したい文章">
-          <div className="mb-4 flex w-full items-center justify-between">
-            <SelectField
-              label="モデル"
-              labelHidden
+          <div className="mb-2 flex w-full items-center justify-between">
+            <Select
               value={modelId}
-              onChange={(e) => setModelId(e.target.value)}>
-              {availableModels.map((m) => (
-                <option key={m} value={m}>
-                  {m}
-                </option>
-              ))}
-            </SelectField>
+              onChange={setModelId}
+              options={availableModels.map((m) => {
+                return { value: m, label: m };
+              })}
+            />
             <Switch label="自動校正" checked={auto} onSwitch={setAuto} />
           </div>
           <Texteditor