[ZEPPELIN-6747] Add AI Assistant conversation list and header components

zeppelin-web-angular/projects/zeppelin-react/src/entities/assistant/ui/ConversationHeader.css.ts

@@ -0,0 +1,35 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { style } from '@vanilla-extract/css';
+import { vars } from '@/shared/ui/assistant-theme/AssistantScope.css';
+
+export const header = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.space2,
+  padding: `${vars.space1} 0`,
+  borderBottom: `1px solid ${vars.border}`
+});
+
+export const title = style({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontWeight: 600
+});
+
+export const lock = style({
+  marginRight: vars.space1,
+  color: vars.textTertiary
+});

zeppelin-web-angular/projects/zeppelin-react/src/entities/assistant/ui/ConversationHeader.spec.tsx

@@ -0,0 +1,52 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { AssistantConversation } from '../model/assistantContract';
+import { ConversationHeader } from './ConversationHeader';
+
+const noop = () => {};
+
+describe('ConversationHeader', () => {
+  it('shows the selected conversation title', () => {
+    const conversation: AssistantConversation = { id: 'a', title: 'Explain revenue by region' };
+    render(<ConversationHeader conversation={conversation} onCreate={noop} onDelete={noop} />);
+    expect(screen.getByText('Explain revenue by region')).toBeTruthy();
+  });
+
+  it('shows a placeholder when no conversation is selected', () => {
+    render(<ConversationHeader onCreate={noop} onDelete={noop} />);
+    expect(screen.getByText('No conversation selected')).toBeTruthy();
+  });
+
+  it('offers no delete button for a read-only conversation', () => {
+    const conversation: AssistantConversation = { id: 'a', title: 'Shared', canSendMessage: false };
+    render(<ConversationHeader conversation={conversation} onCreate={noop} onDelete={noop} />);
+    expect(screen.queryByRole('button', { name: 'Delete Shared' })).toBeNull();
+  });
+
+  it('reports the deleted conversation id without asking for confirmation', () => {
+    const onDelete = vi.fn();
+    const conversation: AssistantConversation = { id: 'a', title: 'Explain revenue by region' };
+    render(<ConversationHeader conversation={conversation} onCreate={noop} onDelete={onDelete} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Explain revenue by region' }));
+    expect(onDelete).toHaveBeenCalledWith('a');
+  });
+
+  it('reports a new-conversation request', () => {
+    const onCreate = vi.fn();
+    render(<ConversationHeader onCreate={onCreate} onDelete={noop} />);
+    fireEvent.click(screen.getByRole('button', { name: 'New conversation' }));
+    expect(onCreate).toHaveBeenCalled();
+  });
+});

zeppelin-web-angular/projects/zeppelin-react/src/entities/assistant/ui/ConversationHeader.stories.tsx

@@ -0,0 +1,32 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+import type { AssistantConversation } from '../model/assistantContract';
+import { ConversationHeader } from './ConversationHeader';
+
+const current: AssistantConversation = { id: 'a', title: 'Explain how the notebook calculates revenue' };
+const readOnly: AssistantConversation = { id: 'b', title: 'Compare regional totals', canSendMessage: false };
+
+const meta = {
+  title: 'Assistant/ConversationHeader',
+  component: ConversationHeader,
+  args: { conversation: current, onCreate: fn(), onDelete: fn() }
+} satisfies Meta<typeof ConversationHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Current: Story = {};
+export const ReadOnly: Story = { args: { conversation: readOnly } };
+export const NoSelection: Story = { args: { conversation: undefined } };

zeppelin-web-angular/projects/zeppelin-react/src/entities/assistant/ui/ConversationHeader.tsx

@@ -0,0 +1,50 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as styles from './ConversationHeader.css';
+
+import { DeleteOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { visuallyHidden } from '@/shared/ui/assistant-theme/AssistantScope.css';
+import type { AssistantConversation } from '../model/assistantContract';
+
+export interface ConversationHeaderProps {
+  conversation?: AssistantConversation;
+  onCreate: () => void;
+  onDelete: (conversationId: string) => void;
+}
+
+export const ConversationHeader = ({ conversation, onCreate, onDelete }: ConversationHeaderProps) => {
+  const title = conversation ? conversation.title : 'No conversation selected';
+  const readOnly = conversation?.canSendMessage === false;
+  return (
+    <header className={styles.header}>
+      {readOnly && (
+        <>
+          <LockOutlined className={styles.lock} aria-hidden="true" />
+          <span className={visuallyHidden}>Read-only</span>
+        </>
+      )}
+      <span className={styles.title}>{title}</span>
+      <Button size="small" type="text" icon={<PlusOutlined />} aria-label="New conversation" onClick={onCreate} />
+      {conversation && !readOnly && (
+        <Button
+          size="small"
+          type="text"
+          icon={<DeleteOutlined />}
+          aria-label={`Delete ${conversation.title}`}
+          onClick={() => onDelete(conversation.id)}
+        />
+      )}
+    </header>
+  );
+};

zeppelin-web-angular/projects/zeppelin-react/src/entities/assistant/ui/ConversationList.css.ts

@@ -0,0 +1,106 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { style } from '@vanilla-extract/css';
+import { vars, visuallyHidden } from '@/shared/ui/assistant-theme/AssistantScope.css';
+
+export { visuallyHidden };
+
+export const list = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.space2
+});
+
+export const header = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.space2,
+  padding: `${vars.space1} 0`
+});
+
+export const title = style({
+  flex: 1,
+  margin: 0,
+  fontSize: vars.fontSize,
+  fontWeight: 600
+});
+
+export const search = style({
+  padding: `0 ${vars.space1}`
+});
+
+export const sectionLabel = style({
+  margin: `${vars.space3} 0 0`,
+  padding: `0 ${vars.space2}`,
+  color: vars.textSecondary,
+  fontSize: vars.fontSizeSm,
+  selectors: {
+    '&:first-child': { marginTop: 0 }
+  }
+});
+
+export const items = style({
+  listStyle: 'none',
+  marginTop: `calc(-1 * ${vars.space2})`,
+  marginBottom: 0,
+  padding: 0,
+  display: 'flex',
+  flexDirection: 'column'
+});
+
+export const row = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.space1
+});
+
+export const rowButton = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  minWidth: 0,
+  padding: vars.space2,
+  border: 'none',
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'left',
+  borderRadius: vars.radius,
+  cursor: 'pointer',
+  selectors: {
+    '&:hover': { background: vars.fill },
+    '&[aria-current="true"]': { background: vars.accentBg, color: vars.accentText }
+  }
+});
+
+export const rowTitle = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%'
+});
+
+export const rowMeta = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.space1,
+  color: vars.textTertiary,
+  fontSize: vars.fontSizeXs
+});
+
+export const empty = style({
+  padding: vars.space4,
+  textAlign: 'center',
+  color: vars.textSecondary
+});