10606012682

Committed 28 Aug 2024 11:37PM UTC coverage: 31.916% (-0.2%) from 32.134%

Build # 10606012682

Build Type

Pull #9660

github

Committed by

web-flow

Commit Message

Merge 43c0a1fed into 13343503f

Pull Request Pull Request #9660: Merge master into lw-deploy

Run Details

5023 of 41033 branches covered (12.24%)

Branch coverage included in aggregate %.

73 of 309 new or added lines in 14 files covered. (23.62%)

1 existing line in 1 file now uncovered.

29312 of 66545 relevant lines covered (44.05%)

188.26 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

19.78

/packages/lesswrong/components/languageModels/LlmConversationsViewingPage.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { useMulti } from '@/lib/crud/withMulti';
import { useSingle } from '@/lib/crud/withSingle';
import { userGetDisplayName } from '@/lib/collections/users/helpers';
import classNames from 'classnames';
import { useCurrentUser } from '../common/withUser';
import { userIsAdmin } from '@/lib/vulcan-users';
import { useLocation, useNavigate } from '@/lib/routeUtil';
import { isEmpty } from 'underscore';
import qs from 'qs';

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    justifyContent: "flex-start",
  },
  mainColumn: {
    display: "flex",
    flexDirection: "row",
    marginLeft: 20,
  },
  conversationSelectorRoot: {
    marginRight: 24,
  },
  conversationViewer: {
    borderRadius: 5,
    width: 600,
    height: "calc(100vh - 114px)",
    backgroundColor: theme.palette.grey[0],
    overflowY: "scroll",
  },
  conversationViewerTitle: {
    ...theme.typography.commentStyle,
    marginLeft: 20,
  },
  conversationRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    width: 600,
    padding: 10,
    marginBottom: 5,
    backgroundColor: theme.palette.grey[0],
    borderRadius: 5,
    cursor: "pointer",
    "&:hover": {
      backgroundColor: theme.palette.grey[100],
    }
  },
  conversationRowSelected: {
    backgroundColor: theme.palette.grey[300],
  },
  conversationRowLeftAligned: {
    display: "flex",
    alignItems: "center",
  },
  conversationRowUsername: {
    ...theme.typography.commentStyle,
    width: 100,
    fontWeight: 400,
    fontSize: "0.95rem",
    marginRight: 10,
    opacity: 0.7,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  conversationRowTitle: {
    ...theme.typography.commentStyle,
    maxWidth: 450,
    fontWeight: 500,
    fontSize: "1.15rem",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  conversationRowNumLastUpdated: {
    ...theme.typography.commentStyle,
    padding: 2,
    fontWeight: 400,
    fontSize: "0.9rem",
    opacity: 0.8
  }
});

const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {
  conversation: LlmConversationsWithUserInfoFragment
  currentConversationId?: string
  setCurrentConversationId: (conversationId: string) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const isCurrentlySelected = currentConversationId === conversation._id;
  const { title, user, lastUpdatedAt, createdAt } = conversation;

  return <div 
    className={classNames(classes.conversationRow, {[classes.conversationRowSelected]: isCurrentlySelected})}
    onClick={()=> setCurrentConversationId(conversation._id)}
    >
    <span className={classes.conversationRowLeftAligned}>
      <span className={classes.conversationRowUsername}>{userGetDisplayName(user)}</span>
      <span className={classes.conversationRowTitle}>{title}</span>
    </span>
    <span className={classes.conversationRowNumLastUpdated}><Components.FormatDate date={lastUpdatedAt ?? createdAt}/></span>
  </div>
}


// Lists all conversations for admins to select from
const LlmConversationSelector = ({currentConversationId, setCurrentConversationId, classes}: {
  currentConversationId?: string
  setCurrentConversationId: (conversationId: string) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { results, loading } = useMulti({
    collectionName: "LlmConversations",
    fragmentName: "LlmConversationsWithUserInfoFragment",
    terms: { view: "llmConversationsAll" },
    limit: 200,
  });

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;

  const updateConversationId = useCallback((conversationId: string) => {
    setCurrentConversationId(conversationId);
    const currentQuery = isEmpty(query) ? {} : query;
    const newQuery = { ...currentQuery, conversationId };
    navigate({...location.location, search: `?${qs.stringify(newQuery)}`})
  }, [query, location, navigate, setCurrentConversationId]);

  useEffect(() => {
    if (results) {
      const initialConversationId = query.conversationId ?? results[0]?._id;
      updateConversationId(initialConversationId);
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!results && loading) {
    return <Components.Loading />
  }
  
  if (!results) {
    return <div>No conversations found</div>;
  }

  return <div className={classes.conversationSelectorRoot}>
    {results.map((conversation, idx) => {
      return <LlmConversationRow
        key={idx} 
        conversation={conversation}
        currentConversationId={currentConversationId}
        setCurrentConversationId={updateConversationId}
        classes={classes} />;
    })}
  </div>
}


const LlmConversationViewer = ({conversationId, classes}: {
  conversationId?: string
  classes: ClassesType<typeof styles>,
}) => {
  const { LlmChatMessage, SectionTitle } = Components

  const { document: conversation, loading } = useSingle({
    collectionName: "LlmConversations",
    fragmentName: "LlmConversationsWithMessagesFragment",
    documentId: conversationId,
    skip: !conversationId
  });


  if (!conversationId) {
    return <div className={classes.conversationViewer}>
      No conversation selected
    </div>
  }

  if (!conversation && loading) {
    return <div className={classes.conversationViewer}>
      <Components.Loading />
    </div>
  }

  if (!conversation) {
    throw new Error("No conversation with selectedId");
  }
  
  const { title, messages } = conversation;

  return <div className={classes.conversationViewer}>
    <SectionTitle title={title} titleClassName={classes.conversationViewerTitle} />
    {!messages?.length && <div>No messages in this conversation</div>}
    {messages?.length && messages.map((message, idx) => {
      return <LlmChatMessage key={idx} message={message} />
    })}
  </div> 
}


export const LlmConversationsViewingPage = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const [currentConversationId, setCurrentConversationId] = useState<string>();

  if (!userIsAdmin(currentUser)) {
    return <Components.Error404 />
  }

  return <AnalyticsContext pageContext="llmConversationViewingPage">
    <div className={classes.root}>
      <div className={classes.mainColumn}>
        <LlmConversationSelector
          currentConversationId={currentConversationId}
          setCurrentConversationId={setCurrentConversationId}
          classes={classes}
        />
        <LlmConversationViewer
          conversationId={currentConversationId}
          classes={classes}
        />
      </div>
  </div>
  </AnalyticsContext>
}

const LlmConversationsViewingPageComponent = registerComponent('LlmConversationsViewingPage', LlmConversationsViewingPage, {styles});

declare global {
  interface ComponentTypes {
    LlmConversationsViewingPage: typeof LlmConversationsViewingPageComponent
  }
}

1	import React, { useCallback, useEffect, useState } from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	1✔
4	import { useMulti } from '@/lib/crud/withMulti';	1✔
5	import { useSingle } from '@/lib/crud/withSingle';	1✔
6	import { userGetDisplayName } from '@/lib/collections/users/helpers';	1✔
7	import classNames from 'classnames';	1✔
8	import { useCurrentUser } from '../common/withUser';	1✔
9	import { userIsAdmin } from '@/lib/vulcan-users';	1✔
10	import { useLocation, useNavigate } from '@/lib/routeUtil';	1✔
11	import { isEmpty } from 'underscore';	1✔
12	import qs from 'qs';	1✔
13
14	const styles = (theme: ThemeType) => ({	1✔
15	root: {
16	display: "flex",
17	justifyContent: "flex-start",
18	},
19	mainColumn: {
20	display: "flex",
21	flexDirection: "row",
22	marginLeft: 20,
23	},
24	conversationSelectorRoot: {
25	marginRight: 24,
26	},
27	conversationViewer: {
28	borderRadius: 5,
29	width: 600,
30	height: "calc(100vh - 114px)",
31	backgroundColor: theme.palette.grey[0],
32	overflowY: "scroll",
33	},
34	conversationViewerTitle: {
35	...theme.typography.commentStyle,
36	marginLeft: 20,
37	},
38	conversationRow: {
39	display: "flex",
40	justifyContent: "space-between",
41	alignItems: "center",
42	width: 600,
43	padding: 10,
44	marginBottom: 5,
45	backgroundColor: theme.palette.grey[0],
46	borderRadius: 5,
47	cursor: "pointer",
48	"&:hover": {
49	backgroundColor: theme.palette.grey[100],
50	}
51	},
52	conversationRowSelected: {
53	backgroundColor: theme.palette.grey[300],
54	},
55	conversationRowLeftAligned: {
56	display: "flex",
57	alignItems: "center",
58	},
59	conversationRowUsername: {
60	...theme.typography.commentStyle,
61	width: 100,
62	fontWeight: 400,
63	fontSize: "0.95rem",
64	marginRight: 10,
65	opacity: 0.7,
66	overflow: "hidden",
67	textOverflow: "ellipsis",
68	whiteSpace: "nowrap",
69	},
70	conversationRowTitle: {
71	...theme.typography.commentStyle,
72	maxWidth: 450,
73	fontWeight: 500,
74	fontSize: "1.15rem",
75	overflow: "hidden",
76	textOverflow: "ellipsis",
77	whiteSpace: "nowrap",
78	},
79	conversationRowNumLastUpdated: {
80	...theme.typography.commentStyle,
81	padding: 2,
82	fontWeight: 400,
83	fontSize: "0.9rem",
84	opacity: 0.8
85	}
86	});
87
88	const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {	1✔
89	conversation: LlmConversationsWithUserInfoFragment
90	currentConversationId?: string
91	setCurrentConversationId: (conversationId: string) => void,
92	classes: ClassesType<typeof styles>,
93	}) => {
NEW 94	const isCurrentlySelected = currentConversationId === conversation._id;	×
NEW 95	const { title, user, lastUpdatedAt, createdAt } = conversation;	×
96
NEW 97	return <div	×
98	className={classNames(classes.conversationRow, {[classes.conversationRowSelected]: isCurrentlySelected})}
NEW 99	onClick={()=> setCurrentConversationId(conversation._id)}	×
100	>
101	<span className={classes.conversationRowLeftAligned}>
102	<span className={classes.conversationRowUsername}>{userGetDisplayName(user)}</span>
103	<span className={classes.conversationRowTitle}>{title}</span>
104	</span>
105	<span className={classes.conversationRowNumLastUpdated}><Components.FormatDate date={lastUpdatedAt ?? createdAt}/></span>	×
106	</div>
107	}
108
109
110	// Lists all conversations for admins to select from
111	const LlmConversationSelector = ({currentConversationId, setCurrentConversationId, classes}: {	1✔
112	currentConversationId?: string
113	setCurrentConversationId: (conversationId: string) => void,
114	classes: ClassesType<typeof styles>,
115	}) => {
NEW 116	const { results, loading } = useMulti({	×
117	collectionName: "LlmConversations",
118	fragmentName: "LlmConversationsWithUserInfoFragment",
119	terms: { view: "llmConversationsAll" },
120	limit: 200,
121	});
122
NEW 123	const navigate = useNavigate();	×
NEW 124	const location = useLocation();	×
NEW 125	const { query } = location;	×
126
NEW 127	const updateConversationId = useCallback((conversationId: string) => {	×
NEW 128	setCurrentConversationId(conversationId);	×
NEW 129	const currentQuery = isEmpty(query) ? {} : query;	×
NEW 130	const newQuery = { ...currentQuery, conversationId };	×
NEW 131	navigate({...location.location, search: `?${qs.stringify(newQuery)}`})	×
132	}, [query, location, navigate, setCurrentConversationId]);
133
NEW 134	useEffect(() => {	×
NEW 135	if (results) {	×
NEW 136	const initialConversationId = query.conversationId ?? results[0]?._id;	×
NEW 137	updateConversationId(initialConversationId);	×
138	}
139	//eslint-disable-next-line react-hooks/exhaustive-deps
140	}, []);
141
NEW 142	if (!results && loading) {	×
NEW 143	return <Components.Loading />	×
144	}
145
NEW 146	if (!results) {	×
NEW 147	return <div>No conversations found</div>;	×
148	}
149
NEW 150	return <div className={classes.conversationSelectorRoot}>	×
151	{results.map((conversation, idx) => {
NEW 152	return <LlmConversationRow	×
153	key={idx}
154	conversation={conversation}
155	currentConversationId={currentConversationId}
156	setCurrentConversationId={updateConversationId}
157	classes={classes} />;
158	})}
159	</div>
160	}
161
162
163	const LlmConversationViewer = ({conversationId, classes}: {	1✔
164	conversationId?: string
165	classes: ClassesType<typeof styles>,
166	}) => {
NEW 167	const { LlmChatMessage, SectionTitle } = Components	×
168
NEW 169	const { document: conversation, loading } = useSingle({	×
170	collectionName: "LlmConversations",
171	fragmentName: "LlmConversationsWithMessagesFragment",
172	documentId: conversationId,
173	skip: !conversationId
174	});
175
176
NEW 177	if (!conversationId) {	×
NEW 178	return <div className={classes.conversationViewer}>	×
179	No conversation selected
180	</div>
181	}
182
NEW 183	if (!conversation && loading) {	×
NEW 184	return <div className={classes.conversationViewer}>	×
185	<Components.Loading />
186	</div>
187	}
188
NEW 189	if (!conversation) {	×
NEW 190	throw new Error("No conversation with selectedId");	×
191	}
192
NEW 193	const { title, messages } = conversation;	×
194
NEW 195	return <div className={classes.conversationViewer}>	×
196	<SectionTitle title={title} titleClassName={classes.conversationViewerTitle} />
197	{!messages?.length && <div>No messages in this conversation</div>}	×
198	{messages?.length && messages.map((message, idx) => {	×
NEW 199	return <LlmChatMessage key={idx} message={message} />	×
200	})}
201	</div>
202	}
203
204
205	export const LlmConversationsViewingPage = ({classes}: {	1✔
206	classes: ClassesType<typeof styles>,
207	}) => {
NEW 208	const currentUser = useCurrentUser();	×
NEW 209	const [currentConversationId, setCurrentConversationId] = useState<string>();	×
210
NEW 211	if (!userIsAdmin(currentUser)) {	×
NEW 212	return <Components.Error404 />	×
213	}
214
NEW 215	return <AnalyticsContext pageContext="llmConversationViewingPage">	×
216	<div className={classes.root}>
217	<div className={classes.mainColumn}>
218	<LlmConversationSelector
219	currentConversationId={currentConversationId}
220	setCurrentConversationId={setCurrentConversationId}
221	classes={classes}
222	/>
223	<LlmConversationViewer
224	conversationId={currentConversationId}
225	classes={classes}
226	/>
227	</div>
228	</div>
229	</AnalyticsContext>
230	}
231
232	const LlmConversationsViewingPageComponent = registerComponent('LlmConversationsViewingPage', LlmConversationsViewingPage, {styles});	1✔
233
234	declare global {
235	interface ComponentTypes {
236	LlmConversationsViewingPage: typeof LlmConversationsViewingPageComponent
237	}
238	}

ForumMagnum / ForumMagnum / 10606012682

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous