Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@wadabee
wadabee committed Apr 22, 2024
1 parent 10e25b0 commit 97fff32
Show file tree
Hide file tree
Showing 18 changed files with 104 additions and 75 deletions.
4 changes: 3 additions & 1 deletion .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@
**/node_modules
**/dist

cdk.out
cdk.out
packages/web/dev-dist
browser-extension/dist-firefox-v2
2 changes: 1 addition & 1 deletion browser-extension/src/app/features/chat/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { PromptSetting } from '../../../@types/settings';

type Props = {
initContent: string;
initPromptSetting: PromptSetting;
initPromptSetting?: PromptSetting;
};

const Chat: React.FC<Props> = (props) => {
Expand Down
12 changes: 6 additions & 6 deletions browser-extension/src/app/features/chat/InputContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { produce } from 'immer';

type Props = BaseProps & {
initContent: string;
initPromptSetting: PromptSetting;
initPromptSetting?: PromptSetting;
};

const InputContent: React.FC<Props> = (props) => {
Expand All @@ -27,14 +27,14 @@ const InputContent: React.FC<Props> = (props) => {
});

useEffect(() => {
if (props.initPromptSetting.initializeMessages && !props.initPromptSetting.directSend) {
if (props.initPromptSetting?.initializeMessages && !props.initPromptSetting?.directSend) {
clearMessages();
}
if (props.initPromptSetting.directSend) {
if (props.initPromptSetting?.directSend) {
sendMessage(
props.initPromptSetting,
props.initContent,
props.initPromptSetting.initializeMessages,
props.initPromptSetting.initializeMessages
);
} else {
if (props.initContent) {
Expand Down Expand Up @@ -108,7 +108,7 @@ ${formValues[idx]}
setFormValues(
produce(formValues, (draft) => {
draft[idx] = value;
}),
})
);
}}
/>
Expand All @@ -127,7 +127,7 @@ ${formValues[idx]}
<button
className={twMerge(
'absolute right-3 bottom-3 mb-0.5 text-white p-2 rounded text-xl',
isLoading ? 'border' : 'bg-aws-smile',
isLoading ? 'border' : 'bg-aws-smile'
)}
disabled={isLoading}
onClick={() => {
Expand Down
50 changes: 26 additions & 24 deletions browser-extension/src/app/features/chat/SelectPrompt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ const SelectPrompt: React.FC<Props> = (props) => {
const [isOpenContext, setIsOpenContext] = useState(false);

return (
<div className={twMerge(props.className, 'relative w-full border rounded')}>
<div className="flex justify-between items-center w-full">
<div className={twMerge(props.className, 'w-full border rounded')}>
<div className="flex justify-between items-center w-full relative">
{selectedPrompt ? (
<div
className="flex items-center gap-1 p-1 ml-1 hover:bg-white/20 cursor-pointer flex-1"
Expand All @@ -49,35 +49,37 @@ const SelectPrompt: React.FC<Props> = (props) => {
>
選択
</Button>
</div>

<div
className={twMerge(
'transition-all text-xs text-aws-font-color-gray px-2',
isOpenContext ? 'max-h-[300px] overflow-y-auto pb-2 ' : 'max-h-0 overflow-hidden',
)}
>
{selectedPrompt && <PromptSettingItem prompt={selectedPrompt} />}
<div
className={twMerge(
'absolute transition border bottom-11 rounded w-full bg-aws-squid-ink brightness-150',
isOpenSelect
? 'opacity-100 max-h-[200px] overflow-y-auto'
: 'opacity-0 max-h-0 overflow-hidden'
)}
>
{prompts.map((prompt) => (
<div
key={prompt.systemContextId}
className="border-b p-1 last:border-b-0 hover:bg-white/20 cursor-pointer"
onClick={() => {
props.onChange(prompt);
setIsOpenSelect(false);
}}
>
{prompt.systemContextTitle}
</div>
))}
</div>
</div>

<div
className={twMerge(
'absolute transition bottom-11 border rounded w-full bg-aws-squid-ink brightness-150',
isOpenSelect ? 'opacity-100 max-h-[200px]' : 'opacity-0 max-h-0 overflow-hidden',
'transition-all text-xs text-aws-font-color-gray px-2',
isOpenContext ? 'max-h-[300px] overflow-y-auto pb-2 ' : 'max-h-0 overflow-hidden'
)}
>
{prompts.map((prompt) => (
<div
key={prompt.systemContextId}
className="border-b p-1 last:border-b-0 hover:bg-white/20 cursor-pointer"
onClick={() => {
props.onChange(prompt);
setIsOpenSelect(false);
}}
>
{prompt.systemContextTitle}
</div>
))}
{selectedPrompt && <PromptSettingItem prompt={selectedPrompt} disabled />}
</div>
</div>
);
Expand Down
7 changes: 4 additions & 3 deletions browser-extension/src/app/features/chat/chatSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { AppThunk, RootState } from '../../store';
import { Message } from '../../../@types/chat';
import { produce } from 'immer';

// 複数画面で立ち上げることがあるのでタブごとに状態を管理
export type ChatState = {
[tabId: number]: {
messages: Message[];
Expand Down Expand Up @@ -55,7 +56,7 @@ export const replaceMessages =
setMessages({
tabId,
messages,
}),
})
);
};

Expand All @@ -70,7 +71,7 @@ export const pushMessages =
messages: produce(currentMessages, (draft) => {
draft.push(...messages);
}),
}),
})
);
};

Expand All @@ -88,7 +89,7 @@ export const overwriteLatestMessage =
messages: produce(currentMessages, (draft) => {
draft[draft.length - 1].content = content.replace(/<([^>]+)>([\s\S]*?)<\/\1>/, '$2');
}),
}),
})
);
};

Expand Down
3 changes: 2 additions & 1 deletion browser-extension/src/app/features/chat/useChat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Browser from 'webextension-polyfill';
import { PromptSetting } from '../../../@types/settings';

const useChat = () => {
// 複数のタブで起動する場合があるので、タブごとに状態を管理する
const [tabId, setTabId] = useState<number>(-1);
Browser.tabs?.getCurrent().then((tab) => {
if (tab) {
Expand Down Expand Up @@ -82,7 +83,7 @@ const useChat = () => {
role: 'assistant',
content: '▍',
},
]),
])
);

// Assistant の発言を更新
Expand Down
2 changes: 2 additions & 0 deletions browser-extension/src/app/features/common/components/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { BaseProps } from '../../../../@types/common';
type Props = BaseProps & {
label: string;
value: boolean;
disabled?: boolean;
onChange: (checked: boolean) => void;
};

Expand All @@ -14,6 +15,7 @@ const Checkbox: React.FC<Props> = (props) => {
<input
type="checkbox"
className="rounded accent-aws-smile"
disabled={props.disabled}
checked={props.value}
onChange={(e) => {
props.onChange(e.target.checked);
Expand Down
2 changes: 2 additions & 0 deletions browser-extension/src/app/features/common/components/InputText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { BaseProps } from '../../../../@types/common';
type Props = BaseProps & {
label?: string;
value: string;
disabled?: boolean;
onChange: (val: string) => void;
};

Expand All @@ -14,6 +15,7 @@ const InputText: React.FC<Props> = (props) => {
{props.label && <div className="text-xs text-aws-font-color-gray">{props.label}</div>}
<input
className="border bg-aws-squid-ink brightness-150 rounded h-8 w-full px-1"
disabled={props.disabled}
value={props.value}
onChange={(e) => {
props.onChange(e.target.value);
Expand Down
2 changes: 2 additions & 0 deletions browser-extension/src/app/features/highlight-menu/HighlightMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ type Props = BaseProps & {
const HighlightMenu: React.FC<Props> = (props) => {
const [isOpen, setIsOpen] = useState(false);

// Floating UIのExampleを参考に実装
// https://floating-ui.com/docs/react-examples
const { refs, floatingStyles, context } = useFloating({
placement: 'bottom',
open: isOpen,
Expand Down
8 changes: 5 additions & 3 deletions browser-extension/src/app/features/prompt-settings/DraggablePromptItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export type DragPromptItem = {
};

const DraggablePromptItem: React.FC<Props> = (props) => {
// React DnDのExampleを参考に実装
// https://react-dnd.github.io/react-dnd/examples/sortable/simple
const ref = useRef<HTMLDivElement>(null);
const [{ handlerId }, drop] = useDrop<DragPromptItem, void, { handlerId: Identifier | null }>({
accept: ItemTypes.PROMPT_ITEM,
Expand Down Expand Up @@ -122,7 +124,7 @@ const DraggablePromptItem: React.FC<Props> = (props) => {
'flex flex-col border border-b-0 last:border-b first:rounded-t p-1 last:rounded-b bg-aws-squid-ink',
props.canDrag === false ? 'bg-white/30 cursor-no-drop' : '',
isDragging ? 'opacity-30' : '',
isPromptSetting ? '' : 'cursor-grab',
isPromptSetting ? '' : 'cursor-grab'
)}
data-handler-id={handlerId}
>
Expand All @@ -135,7 +137,7 @@ const DraggablePromptItem: React.FC<Props> = (props) => {
<div
className={twMerge(
'flex items-center gap-2 p-1 w-full ',
isPromptSetting ? 'hover:bg-white/20 rounded cursor-pointer' : '',
isPromptSetting ? 'hover:bg-white/20 rounded cursor-pointer' : ''
)}
onClick={() => {
if (isPromptSetting) {
Expand All @@ -160,7 +162,7 @@ const DraggablePromptItem: React.FC<Props> = (props) => {
<div
className={twMerge(
'transition-all',
isOpenSettings ? 'max-h-[350px] overflow-y-auto' : 'max-h-0 overflow-hidden ',
isOpenSettings ? 'max-h-[350px] overflow-y-auto' : 'max-h-0 overflow-hidden '
)}
>
{props.isPromptSetting ? (
Expand Down
60 changes: 35 additions & 25 deletions browser-extension/src/app/features/prompt-settings/PromptSettingItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { produce } from 'immer';

type Props = BaseProps & {
prompt: PromptSetting;
disabled?: boolean;
onChange?: (propmt: PromptSetting) => void;
};

Expand All @@ -22,7 +23,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<div className="text-xs ">プロンプト</div>
<textarea
className={twMerge(
'text-xs text-aws-font-color-gray border p-1 rounded bg-aws-squid-ink w-full resize-none',
'text-xs text-aws-font-color-gray border p-1 rounded bg-aws-squid-ink w-full resize-none'
)}
rows={13}
value={props.prompt.systemContext}
Expand All @@ -32,6 +33,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<Checkbox
label="フォーム形式で入力する"
value={props.prompt.useForm ?? false}
disabled={props.disabled}
onChange={(checked) => {
props.onChange
? props.onChange({
Expand All @@ -56,6 +58,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<InputText
label="ラベル"
value={def.label}
disabled={props.disabled}
onChange={(val) => {
props.onChange
? props.onChange({
Expand All @@ -72,6 +75,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<InputText
label="プロンプトタグ"
value={def.tag}
disabled={props.disabled}
onChange={(val) => {
props.onChange
? props.onChange({
Expand All @@ -88,6 +92,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<Checkbox
label="選択部分を自動コピー"
value={def.autoCopy}
disabled={props.disabled}
onChange={(val) => {
props.onChange
? props.onChange({
Expand Down Expand Up @@ -130,37 +135,40 @@ const PromptSettingItem: React.FC<Props> = (props) => {
</div>
))}

<div>
<Button
className="ml-auto"
outlined
onClick={() => {
props.onChange
? props.onChange({
...props.prompt,
formDefinitions: produce(props.prompt.formDefinitions, (draft) => {
if (draft) {
draft.push({
autoCopy: false,
label: '',
tag: '',
});
}
}),
})
: null;
}}
>
追加
</Button>
</div>
{!props.disabled && (
<div>
<Button
className="ml-auto"
outlined
onClick={() => {
props.onChange
? props.onChange({
...props.prompt,
formDefinitions: produce(props.prompt.formDefinitions, (draft) => {
if (draft) {
draft.push({
autoCopy: false,
label: '',
tag: '',
});
}
}),
})
: null;
}}
>
追加
</Button>
</div>
)}
</div>
)}
</div>
<div>
<Checkbox
label="一問一答形式にする（会話履歴を無視する）"
value={props.prompt.ignoreHistory ?? false}
disabled={props.disabled}
onChange={(checked) => {
props.onChange
? props.onChange({
Expand All @@ -175,6 +183,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<Checkbox
label="拡張機能を開いた際にすぐに送信する"
value={props.prompt.directSend ?? false}
disabled={props.disabled}
onChange={(checked) => {
props.onChange
? props.onChange({
Expand All @@ -189,6 +198,7 @@ const PromptSettingItem: React.FC<Props> = (props) => {
<Checkbox
label="初期化した状態で拡張機能を開く"
value={props.prompt.initializeMessages ?? false}
disabled={props.disabled}
onChange={(checked) => {
props.onChange
? props.onChange({
Expand Down
Loading

0 comments on commit 97fff32

Please sign in to comment.