Skip to content

feat: Pi chat #5933

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.

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

Merged
merged 5 commits into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions packages/ui/src/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ export * from "./planned-icon";
export * from "./in-progress-icon";
export * from "./done-icon";
export * from "./pending-icon";
export * from "./pi-chat";
21 changes: 21 additions & 0 deletions packages/ui/src/icons/pi-chat.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from "react";

import { ISvgIcons } from "./type";

export const PiChatLogo: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider memoizing the component for better performance.

Since this is a static icon component, you can optimize re-renders using React.memo:

-export const PiChatLogo: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
+export const PiChatLogo = React.memo<ISvgIcons>(({ width = "16", height = "16", className, color = "currentColor" }) => (

Add at the end of the file:

-);
+));
+PiChatLogo.displayName = "PiChatLogo";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const PiChatLogo: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
export const PiChatLogo = React.memo<ISvgIcons>(({ width = "16", height = "16", className, color = "currentColor" }) => (

<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill={color}
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path d="M5.25 4.5C5.25 3.67157 5.92157 3 6.75 3H11.25V21H5.25V4.5Z" fill={color} />
<path d="M12 3H16.5C17.3284 3 18 3.67157 18 4.5V13.5H12V3Z" fill={color} />
<path
d="M14.6782 18.8062C14.648 18.6894 14.5871 18.5828 14.5019 18.4975C14.4166 18.4123 14.31 18.3514 14.1932 18.3212L12.1227 17.7873C12.0873 17.7773 12.0563 17.756 12.0341 17.7267C12.012 17.6974 12 17.6617 12 17.625C12 17.5883 12.012 17.5526 12.0341 17.5233C12.0563 17.494 12.0873 17.4727 12.1227 17.4627L14.1932 16.9284C14.3099 16.8983 14.4165 16.8375 14.5018 16.7523C14.5871 16.667 14.648 16.5605 14.6782 16.4438L15.2121 14.3733C15.222 14.3378 15.2432 14.3066 15.2726 14.2843C15.3019 14.262 15.3377 14.25 15.3746 14.25C15.4114 14.25 15.4472 14.262 15.4765 14.2843C15.5059 14.3066 15.5271 14.3378 15.5371 14.3733L16.0706 16.4438C16.1008 16.5606 16.1616 16.6672 16.2469 16.7525C16.3322 16.8377 16.4388 16.8986 16.5556 16.9288L18.6261 17.4623C18.6617 17.4721 18.6931 17.4934 18.7155 17.5228C18.7379 17.5522 18.75 17.5881 18.75 17.625C18.75 17.6619 18.7379 17.6978 18.7155 17.7272C18.6931 17.7566 18.6617 17.7778 18.6261 17.7877L16.5556 18.3212C16.4388 18.3514 16.3322 18.4123 16.2469 18.4975C16.1616 18.5828 16.1008 18.6894 16.0706 18.8062L15.5367 20.8767C15.5268 20.9122 15.5056 20.9434 15.4762 20.9657C15.4469 20.988 15.4111 21 15.3742 21C15.3374 21 15.3016 20.988 15.2722 20.9657C15.2429 20.9434 15.2217 20.9122 15.2117 20.8767L14.6782 18.8062Z"
fill={color}
/>
</svg>
);
53 changes: 53 additions & 0 deletions web/ce/constants/dashboard.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
"use client";

// icons
import { Home, Inbox, PenSquare } from "lucide-react";

// ui
import { UserActivityIcon } from "@plane/ui";
import { Props } from "@/components/icons/types";
import { TLinkOptions } from "@/constants/dashboard";
import { EUserPermissions } from "@/plane-web/constants/user-permissions";

export const SIDEBAR_USER_MENU_ITEMS: {
key: string;
label: string;
href: string;
access: EUserPermissions[];
highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) => boolean;
Icon: React.FC<Props>;
}[] = [
{
key: "home",
label: "Home",
href: ``,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
Icon: Home,
},
{
key: "your-work",
label: "Your work",
href: "/profile",
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) =>
options?.userId ? pathname.includes(`${baseUrl}/profile/${options?.userId}`) : false,
Icon: UserActivityIcon,
},
{
key: "notifications",
label: "Inbox",
href: `/notifications`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/notifications/`),
Icon: Inbox,
},
{
key: "drafts",
label: "Drafts",
href: `/drafts`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/drafts/`),
Icon: PenSquare,
},
];
9 changes: 6 additions & 3 deletions web/core/components/workspace/logo.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// helpers
import { cn } from "@plane/editor";
import { getFileURL } from "@/helpers/file.helper";

type Props = {
Expand All @@ -9,9 +10,11 @@ type Props = {

export const WorkspaceLogo = (props: Props) => (
<div
className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
!props.logo && "rounded bg-custom-primary-500 text-white"
} ${props.classNames ? props.classNames : ""}`}
className={cn(
`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
!props.logo && "rounded bg-custom-primary-500 text-white"
} ${props.classNames ? props.classNames : ""}`
)}
Comment on lines +13 to +17
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve class name handling with cn utility.

While using cn is good, the current implementation with template literals doesn't fully utilize its capabilities. The cn utility is designed to handle conditional classes more elegantly.

Here's a cleaner implementation:

-    className={cn(
-      `relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
-        !props.logo && "rounded bg-custom-primary-500 text-white"
-      } ${props.classNames ? props.classNames : ""}`
-    )}
+    className={cn(
+      "relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase",
+      !props.logo && "rounded bg-custom-primary-500 text-white",
+      props.classNames
+    )}

This refactored version:

  • Separates base classes from conditional ones
  • Leverages cn's ability to handle falsy values (undefined classNames will be ignored)
  • Improves readability and maintainability
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className={cn(
`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
!props.logo && "rounded bg-custom-primary-500 text-white"
} ${props.classNames ? props.classNames : ""}`
)}
className={cn(
"relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase",
!props.logo && "rounded bg-custom-primary-500 text-white",
props.classNames
)}

>
{props.logo && props.logo !== "" ? (
<img
Expand Down
3 changes: 2 additions & 1 deletion web/core/components/workspace/sidebar/user-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ import { Tooltip } from "@plane/ui";
import { SidebarNavItem } from "@/components/sidebar";
import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
// constants
import { SIDEBAR_USER_MENU_ITEMS } from "@/constants/dashboard";
import { SIDEBAR_CLICKED } from "@/constants/event-tracker";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useEventTracker, useUser, useUserPermissions } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";

import { SIDEBAR_USER_MENU_ITEMS } from "@/plane-web/constants/dashboard";
import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";

export const SidebarUserMenu = observer(() => {
Expand Down
49 changes: 3 additions & 46 deletions web/core/constants/dashboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { linearGradientDef } from "@nivo/core";
// icons
import { BarChart2, Briefcase, Home, Inbox, Layers, PenSquare } from "lucide-react";
import { BarChart2, Briefcase, Layers } from "lucide-react";
// types
import { TIssuesListTypes, TStateGroups } from "@plane/types";
// ui
import { ContrastIcon, UserActivityIcon } from "@plane/ui";
import { ContrastIcon } from "@plane/ui";
import { Props } from "@/components/icons/types";
import { EUserPermissions } from "@/plane-web/constants/user-permissions";
// assets
Expand Down Expand Up @@ -292,49 +292,6 @@ export const SIDEBAR_WORKSPACE_MENU_ITEMS: {
},
];

type TLinkOptions = {
export type TLinkOptions = {
userId: string | undefined;
};

export const SIDEBAR_USER_MENU_ITEMS: {
key: string;
label: string;
href: string;
access: EUserPermissions[];
highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) => boolean;
Icon: React.FC<Props>;
}[] = [
{
key: "home",
label: "Home",
href: ``,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
Icon: Home,
},
{
key: "your-work",
label: "Your work",
href: "/profile",
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) =>
options?.userId ? pathname.includes(`${baseUrl}/profile/${options?.userId}`) : false,
Icon: UserActivityIcon,
},
{
key: "notifications",
label: "Inbox",
href: `/notifications`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/notifications/`),
Icon: Inbox,
},
{
key: "drafts",
label: "Drafts",
href: `/drafts`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/drafts/`),
Icon: PenSquare,
},
];
Loading