Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(console): added drag and drop feature to chat message #252

Closed
wants to merge 1 commit into from
Closed

feat(console): added drag and drop feature to chat message #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 30 additions & 6 deletions apps/console/src/app/components/prompts/editor/chat/ChatEditMode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { Button, Form } from "antd";
import { Button, Card, Form, List, FormListFieldData } from "antd";
import { ChatMessage } from "./ChatMessage";
import { PlusOutlined } from "@ant-design/icons";
import { usePromptVersionEditorContext } from "../../../../lib/providers/PromptVersionEditorContext";
import { trackEvent } from "../../../../lib/utils/analytics";
import { useCurrentPrompt } from "../../../../lib/providers/CurrentPromptContext";
import { useEffect } from "react";
import { findVariables } from "../../../../lib/utils/find-variables";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export const ChatEditMode = () => {
const { promptId } = useCurrentPrompt();
const { form, setVariables } = usePromptVersionEditorContext();

const content = Form.useWatch(["content"], { form });

useEffect(() => {
Expand Down Expand Up @@ -52,23 +53,46 @@ export const ChatEditMode = () => {
add();
}

const moveField = (fromIndex: number, toIndex: number) => {
const currentMessages = form.getFieldValue(["content", "messages"]);

// Use form.setFieldsValue to clear the form fields

form.setFieldValue(["content", "messages"], []);

const movedItem = currentMessages[fromIndex]; // Extract the item to move

// Create a new array with the item moved to the new index
const newArray = currentMessages.filter(
(_, index) => index !== fromIndex
);
newArray.splice(toIndex, 0, movedItem);

// Update the messages with the new array
form.setFieldValue(["content", "messages"], newArray);
};

return (
<div>
{fields.map((field, index) => {
return (
<DndProvider backend={HTML5Backend}>
{fields.map((field, index) => (
<ChatMessage
key={field.key}
index={index}
canDelete={fields.length !== 1}
onMove={(dragIndex: number, hoverIndex: number) => {
moveField(dragIndex, hoverIndex);
}}
isOver={false}
onDelete={() => {
remove(index);
trackEvent("prompt_chat_completion_message_deleted", {
promptId,
});
}}
/>
);
})}
))}
</DndProvider>

<Button icon={<PlusOutlined />} onClick={() => handleAdd()}>
New Message
Expand Down
161 changes: 102 additions & 59 deletions apps/console/src/app/components/prompts/editor/chat/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { Button, Card, Form, Select } from "antd";
import { CloseOutlined, SwapOutlined } from "@ant-design/icons";
import { CloseOutlined, SwapOutlined, HolderOutlined } from "@ant-design/icons";
import { colors } from "../../../../lib/theme/colors";
import { PromptEditorTextArea } from "../../../common/PromptEditorTextArea";
import styled from "@emotion/styled";
import { useCurrentPrompt } from "../../../../lib/providers/CurrentPromptContext";
import { trackEvent } from "../../../../lib/utils/analytics";
import { useDrag, useDrop } from "react-dnd";

interface Props {
index: number;
canDelete?: boolean;
onDelete: () => void;
isOver: boolean;
}

const StyledCard = styled(Card)`
Expand All @@ -21,68 +23,109 @@ const StyledCard = styled(Card)`
padding: 16px 20px 10px 20px;
}
`;
interface DraggableChatMessageProps extends Props {
onMove: (dragIndex: number, hoverIndex: number) => void;
}

export const ChatMessage = ({ index, canDelete = true, onDelete }: Props) => {
export const ChatMessage: React.FC<DraggableChatMessageProps> = ({
index,
canDelete = true,
onDelete,
onMove,
isOver,
}: DraggableChatMessageProps) => {
const { promptId } = useCurrentPrompt();

const [{ opacity }, ref, preview] = useDrag({
type: "CHAT_MESSAGE",
item: { index },
collect: (monitor) => ({
opacity: monitor.isDragging() ? 0.4 : 1,
}),
});

const [, drop] = useDrop({
accept: "CHAT_MESSAGE",
drop: (draggedItem: { index: number }) => {
if (draggedItem.index !== index) {
onMove(draggedItem.index, index);
}
},
collect: (monitor) => ({
isOver: monitor.isOver(),
}),
});

return (
<StyledCard
style={{ marginBottom: 12, padding: 0 }}
title={
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<SwapOutlined style={{ color: colors.neutral[400] }} />
<Form.Item name={[index, "role"]} noStyle>
<Select
bordered={false}
suffixIcon={null}
style={{ width: 200 }}
onChange={(role) => {
trackEvent("prompt_chat_completion_message_role_changed", {
promptId,
role,
});
}}
options={[
{
label: "System",
value: "system",
},
{
label: "User",
value: "user",
},
{
label: "Assistant",
value: "assistant",
},
]}
/>
</Form.Item>
</div>
{canDelete && (
<Button
style={{ opacity: 0.5 }}
type="text"
icon={<CloseOutlined />}
onClick={onDelete}
<div ref={preview} style={{ opacity }}>
{isOver ? null : (
<StyledCard
style={{ marginBottom: 12, padding: 0 }}
title={
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<div ref={(node) => ref(drop(node))} style={{ cursor: "move" }}>
<HolderOutlined
style={{ color: colors.neutral[400], marginRight: 10 }}
/>
</div>
<SwapOutlined style={{ color: colors.neutral[400] }} />
<Form.Item name={[index, "role"]} noStyle>
<Select
bordered={false}
suffixIcon={null}
style={{ width: 200 }}
onChange={(role) => {
trackEvent(
"prompt_chat_completion_message_role_changed",
{
promptId,
role,
}
);
}}
options={[
{
label: "System",
value: "system",
},
{
label: "User",
value: "user",
},
{
label: "Assistant",
value: "assistant",
},
]}
/>
</Form.Item>
</div>
{canDelete && (
<Button
style={{ opacity: 0.5 }}
type="text"
icon={<CloseOutlined />}
onClick={onDelete}
/>
)}
</div>
}
>
<Form.Item
name={[index, "content"]}
rules={[{ required: true, message: "Message content is required" }]}
>
<PromptEditorTextArea
placeholder="Start typing your message here..."
autoSize={{ minRows: 4, maxRows: 20 }}
bordered={false}
color="#fff"
style={{ padding: 0 }}
/>
)}
</div>
}
>
<Form.Item
name={[index, "content"]}
rules={[{ required: true, message: "Message content is required" }]}
>
<PromptEditorTextArea
placeholder="Start typing your message here..."
autoSize={{ minRows: 4, maxRows: 20 }}
bordered={false}
color="#fff"
style={{ padding: 0 }}
/>
</Form.Item>
</StyledCard>
</Form.Item>
</StyledCard>
)}
</div>
);
};
Loading
Loading