10690899862

Committed 03 Sep 2024 09:27PM UTC coverage: 31.857% (-0.02%) from 31.878%

Build # 10690899862

Build Type

Pull #9701

github

Committed by

b0b3rt

Commit Message

usePostsList tagId typing

Pull Request Pull Request #9701: fix graphql resolver args

Run Details

5028 of 41189 branches covered (12.21%)

Branch coverage included in aggregate %.

12 of 23 new or added lines in 7 files covered. (52.17%)

609 existing lines in 23 files now uncovered.

29356 of 66745 relevant lines covered (43.98%)

187.79 hits per line

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

19.35

/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],
  },
  conversationRowGroup: {
    display: "flex",
    alignItems: "center",
  },
  conversationRowUsername: {
    ...theme.typography.commentStyle,
    width: 90,
    fontWeight: 400,
    fontSize: "0.95rem",
    marginRight: 10,
    opacity: 0.7,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  conversationRowTitle: {
    ...theme.typography.commentStyle,
    maxWidth: 375,
    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
  },
  conversationRowWordCount: {
    ...theme.typography.commentStyle,
    padding: 2,
    fontWeight: 400,
    fontSize: "0.9rem",
    fontStyle: "italic",
    opacity: 0.7,
    marginRight: 10,
  },
});

const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {
  conversation: LlmConversationsViewingPageFragment
  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.conversationRowGroup}>
      <span className={classes.conversationRowUsername}>{userGetDisplayName(user)}</span>
      <span className={classes.conversationRowTitle}>{title}</span>
    </span>
    <span className={classes.conversationRowGroup}>
      <Components.LWTooltip title={`Character count, estimated ${Math.round((conversation.totalCharacterCount ?? 0)/4.4)} tokens`} placement='top'>
        <span className={classes.conversationRowWordCount}>{conversation.totalCharacterCount}</span>
      </Components.LWTooltip>
      <span className={classes.conversationRowNumLastUpdated}><Components.FormatDate date={lastUpdatedAt ?? createdAt}/></span>
    </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: "LlmConversationsViewingPageFragment",
    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	conversationRowGroup: {
56	display: "flex",
57	alignItems: "center",
58	},
59	conversationRowUsername: {
60	...theme.typography.commentStyle,
61	width: 90,
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: 375,
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	conversationRowWordCount: {
87	...theme.typography.commentStyle,
88	padding: 2,
89	fontWeight: 400,
90	fontSize: "0.9rem",
91	fontStyle: "italic",
92	opacity: 0.7,
93	marginRight: 10,
94	},
95	});
96
97	const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {	1✔
98	conversation: LlmConversationsViewingPageFragment
99	currentConversationId?: string
100	setCurrentConversationId: (conversationId: string) => void,
101	classes: ClassesType<typeof styles>,
102	}) => {
UNCOV 103	const isCurrentlySelected = currentConversationId === conversation._id;	×
104	const { title, user, lastUpdatedAt, createdAt } = conversation;	×
105
106	return <div	×
107	className={classNames(classes.conversationRow, {[classes.conversationRowSelected]: isCurrentlySelected})}
108	onClick={()=> setCurrentConversationId(conversation._id)}	×
109	>
110	<span className={classes.conversationRowGroup}>
111	<span className={classes.conversationRowUsername}>{userGetDisplayName(user)}</span>
112	<span className={classes.conversationRowTitle}>{title}</span>
113	</span>
114	<span className={classes.conversationRowGroup}>
115	<Components.LWTooltip title={`Character count, estimated ${Math.round((conversation.totalCharacterCount ?? 0)/4.4)} tokens`} placement='top'>	×
116	<span className={classes.conversationRowWordCount}>{conversation.totalCharacterCount}</span>
117	</Components.LWTooltip>
118	<span className={classes.conversationRowNumLastUpdated}><Components.FormatDate date={lastUpdatedAt ?? createdAt}/></span>	×
119	</span>
120	</div>
121	}
122
123
124	// Lists all conversations for admins to select from
125	const LlmConversationSelector = ({currentConversationId, setCurrentConversationId, classes}: {	1✔
126	currentConversationId?: string
127	setCurrentConversationId: (conversationId: string) => void,
128	classes: ClassesType<typeof styles>,
129	}) => {
UNCOV 130	const { results, loading } = useMulti({	×
131	collectionName: "LlmConversations",
132	fragmentName: "LlmConversationsViewingPageFragment",
133	terms: { view: "llmConversationsAll" },
134	limit: 200,
135	});
136
UNCOV 137	const navigate = useNavigate();	×
UNCOV 138	const location = useLocation();	×
UNCOV 139	const { query } = location;	×
140
141	const updateConversationId = useCallback((conversationId: string) => {	×
142	setCurrentConversationId(conversationId);	×
143	const currentQuery = isEmpty(query) ? {} : query;	×
UNCOV 144	const newQuery = { ...currentQuery, conversationId };	×
145	navigate({...location.location, search: `?${qs.stringify(newQuery)}`})	×
146	}, [query, location, navigate, setCurrentConversationId]);
147
148	useEffect(() => {	×
149	if (results) {	×
UNCOV 150	const initialConversationId = query.conversationId ?? results[0]?._id;	×
UNCOV 151	updateConversationId(initialConversationId);	×
152	}
153	//eslint-disable-next-line react-hooks/exhaustive-deps
154	}, []);
155
UNCOV 156	if (!results && loading) {	×
UNCOV 157	return <Components.Loading />	×
158	}
159
160	if (!results) {	×
161	return <div>No conversations found</div>;	×
162	}
163
164	return <div className={classes.conversationSelectorRoot}>	×
165	{results.map((conversation, idx) => {
UNCOV 166	return <LlmConversationRow	×
167	key={idx}
168	conversation={conversation}
169	currentConversationId={currentConversationId}
170	setCurrentConversationId={updateConversationId}
171	classes={classes} />;
172	})}
173	</div>
174	}
175
176
177	const LlmConversationViewer = ({conversationId, classes}: {	1✔
178	conversationId?: string
179	classes: ClassesType<typeof styles>,
180	}) => {
UNCOV 181	const { LlmChatMessage, SectionTitle } = Components	×
182
UNCOV 183	const { document: conversation, loading } = useSingle({	×
184	collectionName: "LlmConversations",
185	fragmentName: "LlmConversationsWithMessagesFragment",
186	documentId: conversationId,
187	skip: !conversationId
188	});
189
190
UNCOV 191	if (!conversationId) {	×
UNCOV 192	return <div className={classes.conversationViewer}>	×
193	No conversation selected
194	</div>
195	}
196
UNCOV 197	if (!conversation && loading) {	×
UNCOV 198	return <div className={classes.conversationViewer}>	×
199	<Components.Loading />
200	</div>
201	}
202
UNCOV 203	if (!conversation) {	×
UNCOV 204	throw new Error("No conversation with selectedId");	×
205	}
206
207	const { title, messages } = conversation;	×
208
UNCOV 209	return <div className={classes.conversationViewer}>	×
210	<SectionTitle title={title} titleClassName={classes.conversationViewerTitle} />
211	{!messages?.length && <div>No messages in this conversation</div>}	×
212	{messages?.length && messages.map((message, idx) => {	×
213	return <LlmChatMessage key={idx} message={message} />	×
214	})}
215	</div>
216	}
217
218
219	export const LlmConversationsViewingPage = ({classes}: {	1✔
220	classes: ClassesType<typeof styles>,
221	}) => {
UNCOV 222	const currentUser = useCurrentUser();	×
UNCOV 223	const [currentConversationId, setCurrentConversationId] = useState<string>();	×
224
UNCOV 225	if (!userIsAdmin(currentUser)) {	×
226	return <Components.Error404 />	×
227	}
228
229	return <AnalyticsContext pageContext="llmConversationViewingPage">	×
230	<div className={classes.root}>
231	<div className={classes.mainColumn}>
232	<LlmConversationSelector
233	currentConversationId={currentConversationId}
234	setCurrentConversationId={setCurrentConversationId}
235	classes={classes}
236	/>
237	<LlmConversationViewer
238	conversationId={currentConversationId}
239	classes={classes}
240	/>
241	</div>
242	</div>
243	</AnalyticsContext>
244	}
245
246	const LlmConversationsViewingPageComponent = registerComponent('LlmConversationsViewingPage', LlmConversationsViewingPage, {styles});	1✔
247
248	declare global {
249	interface ComponentTypes {
250	LlmConversationsViewingPage: typeof LlmConversationsViewingPageComponent
251	}
252	}

ForumMagnum / ForumMagnum / 10690899862

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